You can use the built in filter to add or remove classes assigned to the announcement container.

By default, the classes on the announcement container are:

  • cd-timeline-block
  • Month (eg: march)
  • Day (eg: 31)
  • Year (eg: 2016)
  • masonry-brick

You can add additional classes to the timeline container by copying and pasting the following code into your theme functions.php file. The additional class added to the timeline containers will be ‘custom-class-name’. You can alter that as needed.

Additionally, one of the available parameters in the filter is `$announcement_id`, which can be used to retrieve metadata from the announcements – using the built in WordPress function get_post_meta().

(Note: For a full list of available post meta – see Available Announcement Meta).


/**
 * Add custom classes to the timeline announcement container
 * @param  string  $class            Class name to alter.
 * @param  integer $announcement_id  The announcemnet ID.
 * @return string                    New class name to use for the container.
 */
function add_custom_announcement_container_classes( $class, $announcement_id ) {
	return $class . ' custom-class-name';
}
add_filter( 'timeline-express-announcement-container-class', 'add_custom_announcement_container_classes', 10 ,2 );

New Method

Users can now drop a single line of code into their themes functions.php file, which will enable a new metabox on the announcement creation/edit page where users can enter a custom class for that announcement container.

define( 'TIMELINE_EXPRESS_CONTAINER_CLASSES', true );

Once added, you’ll find a new metabox added to your announcement new/edit page titled ‘Custom Container Class’. From here, you can enter the custom classes into the metabox, and save or update your post for the changes to take effect. You should now find that the newly defined classes are appended to the respective announcement containers.

Results After Added code

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.