This is a solution for creating a format date filed using Slider Revolution by ThemePunch and The Events Calendar by Modern Tribe.
Format Date Requierment
I use the Avada theme by Theme Fusion and it comes with Slider Revolution. I recently had the desire to display a slider on the home page to advertise some events that are coming up, and naturally, one would think an important aspect of the slider would be the date.
Out of the box Slider Revolution comes with an option called {{meta:somemegatag}} or more specifically {{meta:_EventStartDate}}
This option seemed the appropriate and easy solution to display the date.
Not Exactly
Sure enough using the meta field “_EventStartDate” would yield a very simple date result but the date format was not exactly what I was looking for. This lead me to research for a solution that would allow me to manipulate the date in the format I desired.
Using _EventStartDate
Results
Since I had the date I figured all I had to do next was understand how to format the date of the meta information inside of the slider, easy-peasy right?
To my surprise, I couldn’t find anything that would allow me to control the output of _EventStartDate. I researched this and googled it for weeks and was not able to come up with a viable and simple solution. Everything I tried would just not work.
Modern Tribe suggested using a function called tribe_get_start_date which you can apply the date format to, so I decided to give that a whirl and create a short code by following some simple instructions from Bobby Bryant (you should definitely check out his YouTube series!).
The Format Date Code
I came up with some very simple code and if you paste this code into your funtions.php file (in your CHILD THEME) you should be able to format the results.
You should be able to use this short code [event_date id={{id}}] inside of Slider Revolution to get a result with a date with a more “reader friendly” format.
(Note that the id={{id}} is required)
Shortcode (id={{id}} must be used)
Final Results using shortcode
And if this isn’t exactly what you are looking for you are able to format the date anyway you want using the Date & time format for PHP https://php.net/manual/en/function.date.php within the short code itself by adding the “format” option.
Simple Examples:
For some simple examples:
[event_date id={{id}} format=’F j @ gA’] would result in: December 31 @ 8AM
[event_date id={{id}} format=’m/j/y’] would result in: 12/31/16
I also added the display and timezone option if you wanted to use those but I have not found a use myself. I am sure that this code can be cleaned up and made more efficient but I just wanted to share my quick solution for anyone looking for one.
Please feel free to contribute a more robust version of the code if you would like!
Important note, I believe that Slider Revolution 5.3 may be the minimum version required to use this short code as I believe they added the {{id}} option in that version.
Hi,
Thanks for this explanation! I think i’m doing it wrong. Could you help me?
(it’s for a non-profit, social project)
After adding this to functions.php I get an Internal Server ERROR 550.
I Use the latest Avada, ECP.
This is what I’ve done:
> Copied the code.
> Opened ../wp-admin/theme-editor.php?file=functions.php
> Paste code on bottom of the page. Didn’t put any comments in.
> Saved the File
function cct_event_date( $atts ) {
$atts = shortcode_atts(
array(
‘id’ => ‘null’,
‘display’ => ‘false’, //If true shows date and time, if false only shows date;
‘format’ =>’F j, Y’, //Date & time format (https://php.net/manual/en/function.date.php);
‘timezone’ => ‘null’ //Timezone in which to present the date/time;
), $atts
);
return tribe_get_start_date ($atts[‘id’], $atts[‘display’], $atts[‘format’], $atts[‘timezone’]);
}
add_shortcode (‘event_date’, ‘cct_event_date’ );
Hi Chris,
Just a couple things…
First, I highly recommend NOT using the functions.php that you described. This is Avadas function.php and when you update in the future it will be written over and you will lose this code. Instead I recommend using a child theme.
Second, if you are getting a 500 error make sure the code is “clean” when you copy and paste it, sometimes if you copy from a web page you can get html code that should not be in there. Try pasting in notepad first and make sure you didnt copy any extra html code.
lastly, be sure to use the shortcode [event_date id={{id}}] in the slider.
I hope this helps! Lets me know how it goes.
Hi,
Can you please tell me how to add this shortcode in navigation editor? I need to call shortcode on params option in navigation editor. but it doesn’t work.
Hi bakhtawar,
What you will want to do is first make sure you are using a Child Theme (if not check out this link: https://theme-fusion.com/avada-doc/special-features/avada-child-theme/)
First, select Appearance, then Editor.
Then in the top Right you will see “Select theme to edit:” and choose “Avada Child” then select.
Select the functions.php
No simple add the code from above and select Update file
Once this is in your functions.php file you will need to go to Slider Revolution and create a slide. Be sure to place the [event_date id={{id}}] inside of the slider.
Let me know if that helps or if you need some more info!
Hello,
Great information. I have one issue, my event times aren’t displaying the correct time. I have checked my wordpress settings and it is set to Chicago timezone, Date Format November 16, 2017, Time Format 1:34 PM. I also checked the events calendar display settings and have Date with year F j, Y, Date without year F j, Month and Year F Y, Week Day Format D jS and Date Time Separator @.
I am using this in the slider [event_date id={{id}} format=’F j @ gA’] . It pulls in the events date correct but the time is wrong and I can’t figure out where its pulling it from. For instance I have a event for November 17th at 6:30PM but it says 12:30AM.
The slider isn’t currently live since I’m testing it.
Hello Evie,
One thing I can suggest is to also use the “TimeZone” switch “e” and see if it matches what you are expecting.
[event_date id={{id}} format= ‘F j @ g:iA e’ ]
There could be a couple things to consider.
• Where is the hosting server located and what is its Time Zone is it in?
• What is your events Time Zone set to?
• What is your WordPress Sites Time Zone set to?
Each of these settings can have an impact on the other (the server time zone hopefully should not)
I have seen these settings display results that I was not expecting.
In this example you will notice my Event time is set to UTC
But my WordPress settings is set to “New York” time (im on the East coast)
With both of those settings I get what I am expecting…a 9:30AM start time on the EAST coast.
Note, that even though the EVENT time is set to UTC it is NOT reflected.
Now if I change my EVENT time to New York time (which makes sense to me) the results are NOT what I want.
If you have your WordPress settings properly set for your time zone, then I would just leave the event as UTC. I’m not sure if this is by design or a WordPress vs Event Calendar conflict.