Note: This documentation was so widely used that we decided to release a free add-on, which carries out this task, so you no longer need to add code to your theme. Checkout our new HTML Excerpts add-on in the WordPress.org plugin repository. You can download it directly to your WordPress site, from the dashboard on the ‘Plugins’ page. Just search for Timeline Express HTML Excerpts Add On.

HTML support in your excerpts has been removed since version 1.2. This is due to the number of issues that it was causing for some users. In version 1.2 and later, we found it best to stick to the WordPress core coding standards, and not allow support for HTML in excerpts – to help mitigate any issues that our users might run into – which in turn is reflected as a negative against us in the review section of the WordPress repository.

The Workaround

In this tutorial we’ll assign new metadata to our announcements titled ‘Custom Excerpt’ – which we will then replace the default Timeline Express excerpt with – thus enabling HTML and a custom excerpt for our announcements. We’ll make sure to use a fallback, in the event the custom excerpt meta field doesn’t get populated when the announcement is published.

Generate the Metabox

Using the action hook timeline_express_metaboxes, we can hook into the apporpiate location and generate a new metabox, with our custom field. Enter the following snippet into your active theme functions.php file:

 /**
 * Timeline Express Add Custom Metabox
 * @param array $options Array of options for Timeline Express.
 */
function define_custom_excerpt_metabox( $options ) {
    $announcement_custom_metabox = new_cmb2_box( array(
       'id' => 'custom_meta',
       'title' => __( 'Announcement Custom Excerpt', 'text-domain' ),
       'object_types' => array( 'te_announcements' ), // Post type
       'context' => 'advanced',
       'priority' => 'high',
       'show_names' => true, // Show field names on the left
    ) );
    // Container class
    $announcement_custom_metabox->add_field( array(
       'name' => __( 'Custom Excerpt', 'text-domain' ),
       'desc' => __( 'Enter the custom excerpt for this announcement in the field above.', 'text-domain' ),
       'id' => 'announcement_custom_excerpt',
       'type' => 'wysiwyg',
    ) );
}
add_action( 'timeline_express_metaboxes', 'define_custom_excerpt_metabox' );

Once added to your themes functions.php file, you should now see an entirely new metabox generated on your announcements titled ‘Announcement Custom Excerpt’, just below the ‘Announcement Info.’ metabox – with a WYSIWYG field titled ‘Custom Excerpt’.

Example:
Custom Excerpt Metabox

Replace the Default Excerpt

Now that we’ve generated our new ‘Custom Excerpt’ metabox, we’ll need to replace the default Timeline Express announcement with our newly created custom excerpt. We can do so in two different ways:

1) Replacing the default excerpt using a built in filter.
or
2) Customizing the Timeline Express announcement container template.

In this tutorial we’ll replace the default excerpt using a built in filter – since customizing the announcement container has previously been covered in another documentation article.

The filter that we’ll need to utilize to alter the default announcement excerpts is timeline_express_frontend_excerpt. Using this filter, we can easily replace the entire body of the excerpt with whatever we’d like; in our case it’s going to be the new custom excerpt defined in the previous step.

Copy the following snippet into the bottom of your active themes functions.php file:

/**
 * Replace the default excerpt with our new custom excerpt
 * @param string $excerpt The original announcement excerpt.
 * @param integer $post_id The announcement post ID
 * @return string Return the new excerpt to use.
 */
function replace_default_timeline_express_excerpt( $excerpt, $post_id ) {
    if ( timeline_express_get_custom_meta( $post_id, 'announcement_custom_excerpt', true ) ) {
       return apply_filters( 'the_content', get_post_meta( $post_id, 'announcement_custom_excerpt', true ) );
    } else {
       return $excerpt;
    }
}
add_filter( 'timeline_express_frontend_excerpt', 'replace_default_timeline_express_excerpt', 10, 2 );

The above snippet will check for any custom excerpt that you have setup for a given announcement, and return that if found. If it’s not found the default excerpt is returned instead.

When using the above two snippets in conjuction with one another, you can now easily enable HTML in your excerpts without having the customize any of the template files!

Final Result

New HTML Excerpt

1 Comment

  1. Thanks – that worked perfectly. Amazing plugin. Keep up the good work!

    Reply

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.