We were recently asked if it was possible to replace the icons on the timeline with a number (eg: 1, 2, 3) of the announcement on the timeline. For example, the first announcement would display a 1 instead of the default icon, the second announcement would display 2 and so on.
This can easily be achieved using some of the filters built-in to Timeline Express. If you’re looking for a method to replace the icons with a number representing the announcements position on the timeline, follow along below.
Code Snippet
The code snippet below can be used to remove the announcement icons and replace them with an integer value. All you need to do is copy the code snippet below into one of the following locations:
1) Your theme (or child themes) functions.php file
2) A custom MU plugin you create for site alterations
3) A third party plugin such as My Custom Functions.
Whatever method you choose, you’ll want to copy the code snippet below and place it into one of the locations above. Note: Keep in mind, you most likely don’t need the php tag at the top of the snippet.
<?php
/**
* Replace the icon on the timeline with the announcement number.
*
* @param array $timeline_query Timeline Express query.
*
* @return array The unaltered Timeline Express query.
*/
function timeline_express_number_icons( $timeline_query ) {
$announcements = wp_list_pluck( $timeline_query->posts, 'ID' );
/**
* Make the HTML replacement of the icon.
*
* @param integer $post_id The announcement ID in the iteration.
* @param array $options Timeline Exress options array.
*
* @return mixed Markup for the custom number icon, or false to render the default icon.
*/
add_filter( 'timeline_express_custom_icon_html', function( $post_id, $options ) use ( $announcements ) {
global $post;
if ( ! in_array( $post->ID, $announcements, true ) ) {
return false;
}
return sprintf(
'<div class="cd-timeline-img cd-picture" style="background: %s;">
<a class="cd-timeline-icon-link" href="%s">
<span class="year"><strong>%s</strong></span>
</a>
</div>',
esc_attr( timeline_express_get_announcement_icon_color( $post->ID ) ),
esc_url( get_the_permalink( $post->ID ) ),
absint( array_search( $post->ID, $announcements, true ) + 1 )
);
}, 10, 2 );
return $timeline_query;
}
add_filter( 'timeline_express_announcement_query', 'timeline_express_number_icons' );
Once you’ve added the snippet into one of the recommended locations, you’ll want to save the file. Nothing else needs to be done once you save the file, as your timeline should now be updated and the changes reflected on the front of site.
Results
The following is the final results of the code snippet above:
