In this tutorial, we’ll be removing the default ‘Announcement Date’ field, and creating a new ‘Announcement Date & Time’ field, allowing you to set a date and a time on your announcements.
This is especially helpful when you have announcements that land on the same day, and you want more control over which gets displayed first. A good example of this is an event list for a conference – or party. All of the ‘announcements’, or events, in this case, fall on the same day. You may want to split them up and order them in a certain way, depending on when they happen during the event. This tutorial will get you all the way there!
The first thing we’ll be doing is creating and assigning a new field, a date/time picker, to our Timeline Express announcements. This will allow you to select both a date and a time, so your announcements can display additional data.
The second thing that we will do is alter the timeline query so the announcements are displayed back to the user based on their Announcement Date & Announcement Time values, instead of only by the ‘Announcement Date’, and in the correct chronological order.
We’re going to be writing some additional code to run alongside Timeline Express, that should be added to your active themes functions.php file. If you are unfamiliar with editing that file, we highly recommend you use a third party plugin to add the necessary code snippets from this article to your theme. The plugin that we recommend is My Custom Functions.
Feel free to follow along with our tutorial below, or scroll down to the bottom for the complete code snippet. You can simply copy and paste the block of code into your file, save it and be good to go.
Enable Announcement Date & Time Pickers
We need to define a new meta field to add to our announcements. Additionally, since the announcement date stores in a Unix timestamp format, and we can’t just append on the new time field – we’ll have to remove the default date field and replace it with our new date & time field. This will allow us to store a date/time stamp using both the announcement date and announcement time value.
In the first snippet we’re going to use the built-in filter timeline_express_custom_fields, which allows us to define new fields to add to our ‘Announcement Info.’ meta box, that comes built into Timeline Express.
The filter accepts an array of fields. If you are familiar with CMB2, you should feel right at home. You can quickly define fields as needed, using any of the fields provided by CMB2 – or even define your own. Here we’ll be using the text_datetime_timestamp field.
/**
* Add date/time picker field to Timeline Express announcements
*
* @param array $custom_field Array of custom fields to append to our announcements.
*/
function add_custom_fields_to_announcements( $custom_field ) {
$custom_field[] = array(
'name' => 'Announcement Date & Time',
'desc' => __( 'Select the time that this announcement occured or will occur on.', 'text-domain' ),
'id' => 'announcement-time', // Post type
'type' => 'text_datetime_timestamp',
);
return $custom_field;
}
add_filter( 'timeline_express_custom_fields', 'add_custom_fields_to_announcements' );
If you save and view an announcement, you should now see the new Announcement Date & Time field.
Example:
Since we’ve gone ahead and added a new date/time field onto our announcements, we can go ahead and hide the default date pickers – since they will no longer be relevant to us, and may just be confusing to the end user.
In this snippet, we’re hooking into admin_head and printing out inline styles to hide the date picker field/row altogether. You could also load an admin stylesheet, and enqueue it on the appropriate pages – but for brevity, I decided to load it on the admin_head action.
/**
* Hide the original "Announcement Date" field/row
*
* @return mixed Style tag to hide the original date picker
*/
function hide_default_announcement_date_picker() {
$screen = get_current_screen();
if ( isset( $screen->base ) && 'te_announcements' === $screen->id ) {
?>< style>.cmb2-id-announcement-date { display: none; }< style>< ?php
}
}
add_action( 'admin_head', 'hide_default_announcement_date_picker' );
style tags above, there is a space between the opening bracket and the word style, in both occurrences. There was an issue with the parser on this site, so remember to remove the spaces when you add the above snippet to your functions.php file, or you will still see the old "Announcement Date" field.Now if you save your functions.php file, and load up an announcement (or create a new one) you'll see our new field is present, and the old one should now be gone.
Display the New Date & Time
Next, we'll need to replace the default announcement date with our new date and time stamp value on the front end of the site. This will filter the dates on both the Timeline itself and on the single announcement template page.
Luckily, Timeline Express comes with filters to completely alter the way the dates get displayed on your site. We are going to use two actions here, both included in Timeline Express and Timeline Express Pro.
timeline-express-single-after-date- This action will alter the date on all single announcement template pages. This is the page displayed when you click through into view the announcement.timeline-express-after-date- This action allows us to hook in and display the date on the timeline.
In the snippet below, we ae using the date and time formats that are set inside of 'Settings > General', but you may also use PHP Date Formats, if you are familiar with those and to customize them further.
/**
* Append new announcement time and date on the frontend
*
* @return string New string to append to our announcement date.
*/
function display_announcement_date() {
global $post;
$announcement_date = get_post_meta( $post->ID, 'announcement-time', true );
if ( $announcement_date ) {
echo date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $announcement_date );
}
}
add_action( 'timeline-express-single-after-date', 'display_announcement_date' );
add_action( 'timeline-express-after-date', 'display_announcement_date' );
Filter the Timeline Express Query
At this point, you should now have your new date and time pickers assigned and visible on your announcements. On the front end of your site, you should be seeing the new date and time displaying on both the timeline and the single announcement templates. You may notice that your timelines aren't displaying in the correct order based on the date and time fields.
In the following snippet we'll be using the built in Timeline Express filter timeline_express_announcement_query_args, which allows us to alter the queries run when displaying the announcements on the timeline. We'll need to set our meta-key to the new 'announcement-time' that we created above (same string as the id argument when creating our field, above.).
In the comment of the code block below, we've also linked back to the source code for reference.
/**
* Filter the Timeline Express query 'orderby' param & add a date fallback
*
* Timeline Express sorts by the announcement date by default.
* Use this function to fallback to the published date when two
* or more announcements are using the same announcement date.
* This allows for manual control over the order of announcements.
*
* Source Code: https://github.com/EvanHerman/timeline-express/blob/master/lib/classes/class.timeline-express-initialize.php#L86
*/
function timeline_express_sort_by_published_date_fallback( $args, $post, $atts ) {
$args['meta_key'] = 'announcement-time';
// Order by announcement-time. If time & date matches, fallback to post published date.
$args['orderby'] = [
'meta_value_num' => $args['order'],
'date' => $args['order'],
];
return $args;
}
add_filter( 'timeline_express_announcement_query_args', 'timeline_express_sort_by_published_date_fallback', 10, 3 );
Once you've gone ahead and added the final code snippet above, to your functions.php file - you should now be able to display the timeline in the correct order, taking into account both the announcement date and the announcement time.
Have Fun - and remember, if you're using the plugin and find it handy, we would love it if you would leave us a positive review!
Issues?
If you are running into any issues, feel free to leave a comment in the field below - and we'll get back to you with a response as soon as possible.
Entire Code Block
Here is the entire code block, that is pieced apart in the tutorial above. You can copy the following directly into your themes functions.php file to achieve the same effect as above:
style tags above, there is a space between the opening bracket and the word style, in both occurrences. There was an issue with the parser on this site, so remember to remove the spaces when you add the above snippet to your functions.php file, or you will still see the old "Announcement Date" field.This code snippet is also hosted externally as a GitHub Gist: https://gist.github.com/EvanHerman/a64bc7300c90bf4dda126a18614246b3
<?php
/**
* Add date/time picker field to Timeline Express announcements
*
* @param array $custom_field Array of custom fields to append to our announcements.
*/
function add_custom_fields_to_announcements( $custom_fields ) {
$custom_fields[] = array(
'name' => esc_html__( 'Announcement Date & Time', 'text-domain' ),
'desc' => esc_html__( 'Select the time that this announcement occured or will occur on.', 'text-domain' ),
'id' => 'announcement-time',
'type' => 'text_datetime_timestamp',
);
$full_date = get_option( 'date_format' ) . ' ' . get_option( 'time_format' );
$time_format = get_option( 'time_format' );
// wp_die( print_r( $custom_fields ) );
$custom_fields[] = array(
'name' => esc_html__( 'Announcement Date Type', 'text-domain' ),
'desc' => esc_html__( 'Customize the date format for this announcement.', 'text-domain' ),
'id' => 'announcement-date-format',
'type' => 'radio',
'default' => $full_date,
'options' => [
$full_date => 'Full Date',
'Y' => 'Year Only',
$time_format => 'Time Only',
],
);
return $custom_fields;
}
add_filter( 'timeline_express_custom_fields', 'add_custom_fields_to_announcements' );
/**
* Hide the original "Announcement Date" field/row.
*
* @return mixed Style tag to hide the original date picker
*/
function hide_default_announcement_date_picker() {
$screen = get_current_screen();
if ( isset( $screen->base ) && 'te_announcements' === $screen->id ) {
?><style>.cmb2-id-announcement-date { display: none; }</style><?php
}
}
add_action( 'admin_head', 'hide_default_announcement_date_picker' );
/**
* Append new announcement time and date on the frontend
*
* @return string New string to append to our announcement date.
*/
function display_announcement_date( $date ) {
global $post;
$announcement_date = get_post_meta( $post->ID, 'announcement-time', true );
$date_format = get_post_meta( $post->ID, 'announcement-date-format', true );
$format = $date_format ? $date_format : get_option( 'date_format' ) . ' ' . get_option( 'time_format' );
return date_i18n( $format, $announcement_date );
}
add_filter( 'timeline_express_frontend_date_filter', 'display_announcement_date' );
/**
* Filter the Timeline Express query 'orderby' param & add a date fallback
*
* Timeline Express sorts by the announcement date by default.
* Use this function to fallback to the published date when two
* or more announcements are using the same announcement date.
* This allows for manual control over the order of announcements.
*
* Source Code: https://github.com/EvanHerman/timeline-express/blob/master/lib/classes/class.timeline-express-initialize.php#L86
*/
function timeline_express_sort_by_published_date_fallback( $args, $post, $atts ) {
$args['meta_key'] = 'announcement-time';
// Order by announcement-time. If time & date matches, fallback to post published date.
$args['orderby'] = [
'meta_value_num' => $args['order'],
'date' => $args['order'],
];
return $args;
}
add_filter( 'timeline_express_announcement_query_args', 'timeline_express_sort_by_published_date_fallback', 10, 3 );
this section is giving me a FATAL ERROR
——————
/**
* Hide the original “Announcement Date” field/row
*
* @return mixed Style tag to hide the original date picker
*/
function hide_default_announcement_date_picker() {
$screen = get_current_screen();
if ( isset( $screen->base ) && ‘te_announcements’ === $screen->id ) {
?>.cmb-type-te-date-time-stamp-custom { display: none; }< ?php
}
}
add_action( 'admin_head', 'hide_default_announcement_date_picker' );
——————
Hi Marcus,
The function above has been updated. Additionally, take a look at the following gist I put together with the code snippet without any modifications:
https://gist.github.com/EvanHerman/a64bc7300c90bf4dda126a18614246b3
You can copy and paste that into your functions.php file without the opening
Does the free plug-in support having date-notation in years only? So 1984 instead of the notation Sep 29, 1984?
Hi Lobster,
Yes it does, but it involves adding a code snippet to your themes functions.php file. Take a look at the following documentation page explaining how to achieve that:
https://www.wp-timelineexpress.com/documentation/change-announcement-date-format/
You’ll want to just use “Y” as the date.
Example:
/** * The following function will alter the default date formats * and display them in the format '2016' */ function custom_te_date_format( $date_format ) { $date_format = "Y"; // will print the date as 2016 return $date_format; } add_filter( 'timeline_express_custom_date_format' , 'custom_te_date_format' );Hello,
The code listed above to hide the original announcement date is causing a fatal error. Yes, I have removed the spaces within the opening brackets of the style code. Could you please review and possibly update?
Thanks.
Hi Debbie,
The function above has been updated. There was a rogue space between < and ? in one of the php tags. Additionally, take a look at the following gist I put together with the code snippet without any modifications: https://gist.github.com/EvanHerman/a64bc7300c90bf4dda126a18614246b3
You can copy and paste that into your functions.php file without the opening php tag.
Hi.
When activating your code-snippet “custom-function.php” everything works fine, only the display of the date in the frontend doesn’t work as it should: Both dates appear: 1.) the “old” date-field and 2.) the “new” date+time-field directly behind (the hook “timeline-express-after-date”). And it doesn’t show the configured WP-format: “27. Januar 201727. January 2017 20:30”
Do you have any idea how to fix this?
Thanks.
Axel
Unfortunately I have the exact same issue here. The old date picker is still visible when adding a new announcement and the date of the announcment creation is visible in the timeline as well. Any possibility to fix this?
Hi Michael,
I will certainly take a look and see what might be going on – and update the code snippet as needed. When I’ve had a minute to look I’ll post an update here.
Evan
Are there any plans to add this date-time functionality to the Timeline Express ToolBox Add-on?
I think it’s fair to say that most of us are not coders and the idea of doing what’s suggested above is likely to result in a ‘fuhgeddaboutit’ response (or maybe that’s just me). 🙂
Thanks.
Hey Debbie,
I completely agree. This bit of code can be a bit…overwhelming 🙂
I’ll take a look at getting all of this built out into the toolbox add-on as a toggle, similar to the year icons setting. It shouldn’t be all that difficult to get it included in there. I am just out of the country traveling, but can certainly have the feature built out for you when I make it back home.
Thanks so much for the suggestion!
Evan
Hello Evan,
Just wanted to check-in about the status/possibility of adding date/time functionality to the Toobox Add-on…
Also, as motioned by Axel (January 24 2017), I too am getting duplicate dates/times when using the code provided to add times to my announcements (I used the gist on gishub that you referenced).
What do you suggest?
Thanks.
Hi Debbie,
I went ahead and updated the Gist on our Github account there, so the new code should work fine. However, in Timeline Express Pro it looks like there is a small bug with the dates not being toggled on/off on the single announcement page. We are working on a 2.0 release, which has a whole bunch of new features. Are you a pro license holder?
I would be more than happy to look into including this feature/functionality as a toggle on the settings page in the 2.0 release since it is a fairly frequently requested feature. That, or we can look into building out a standalone, free, add-on that we can host on WordPress.org, since the code is public and it’s not much (85 lines or so).
Evan
Hi Evan,
I replied to the email you sent me (in response to this same comment that I also sent via the contact form) with another question (June 29) and didn’t hear back and also sent another email directly to the support email address (june 30) and haven’t heard back (checked my spam folder), so I’m trying the ‘comments’ approach:
Although the revised time-date code works as it should (thank you), I’ve noticed another issue.
Now, when I create an announcement that has no specific time associated with it, i.e. a standard all-day event, the announcement automatically displays a time of 12:00 AM.
I didn’t realize that with the time-date code I would need to enter a time for each and every announcement.
Is there a way to keep the time feature when needed and still maintain the original, standard date format (i.e. without the 12:00 AM) when no time is associated with an announcement?
I am using the pro version (if it makes a difference).
Hi Debbie,
We’ve responded there. Feel free to continue the discussion via the email thread.
Evan
Hi Even,
is it possible with the PostTypes add-on an extra
Announcement Dates & Times picker to integrate similar to the color picker on post types add-on?
Hi Christoph,
Do you mean that you want the color picker to be available on other post types? Or you want the announcement date & time pickers on those post types? Feel free to reach out to us via the contact form if you still have any questions.
Wondering how this can be modified to use an existing custom post types field.
I have already created a variable $year – and would like to sort by that variable. Not sure how though.
Hi Shannon,
What exactly are you trying to achieve? Feel free to reach out to us via the contact form here on the site and we can discuss some possibilities. We would be happy to provide you with some code to get you headed in the right direction.
Best,
Evan
Hello Evan,
I’m back! Two things:
1) Any chance that the date/time feature will be added to the Timeline Express Toolbox add-on? If so, do you have a realistic ETA?
2) I noticed that even without this date/time code (that you’ve provided), when I create separate announcements with the same date, I’m quite happy with their appearance on the timeline.
But what I’m unable to do is control the ORDER in which each announcement appears (again, I’m only referring to announcements with the same date – no time is listed). I’ve tried fooling around with the ‘publish’ date but that doesn’t change the order of the announcements.
Outside of enabling times on each announcement, is there a way to adjust the order of announcements that share the same date? (Because I can easily insert the announcement time in the body or excerpt).
Any suggestions? (And, am I even making sense?!)
Thanks,
– Debbie
UPDATE: I’m using the Pro version.
Thanks,
– Debbie
Hi Debbie,
Sorry for the delay in responding. We can take a look and see what might be going on with the date orders. I believe that the publish date is what should be ordering the posts when the dates are the same. If not we can go ahead and push out an update, or figure out a workaround. It may involve using the built-in filters to alter the way the queries are run. If that’s something you’d be interested in, feel free to reach out and we can work together on a solution.