With Timeline Express Pro it’s easy to extend the base plugin and create new, custom, fields on the announcements. In some cases, you may need an additional WYSIWYG editor or drop-down fields. When you add these new fields, you’ll find that they aren’t automatically added to the popup windows. However, this can be worked around and you can create new fields for the announcements and have them show up in the popup window.

In this tutorial, we’ll walk you through how you can create a new ‘Popup Content’ WYSIWYG editor for each announcement and then how you can display that content in the popup window alongside the default announcement content. Let’s get started.

Any and all code referenced in this tutorial can be placed inside of your themes functions.php file or into a custom plugin that you create.

Creating the Field

First, we need to create the WYSIWYG editor field. This can easily be done by hooking into the `timeline_express_custom_fields` filter.

// Generate a new Announcement  Popup Content WYSIWYG editor field for the announcements
function custom_popup_content_field( $fields ) {
    $fields[] = [
        'name'    => 'Announcement Popup Content',
        'desc'    => 'Enter the popup content for this announcement.',
        'id'      => 'announcement_popup_content',
        'type'    => 'wysiwyg',
    ];

    return $fields;
}
add_filter( 'timeline_express_custom_fields', 'custom_popup_content_field' );

You can see that we are adding a new array of field data into the `$fields` array. We give the field a ‘name’, ‘desc’, ‘id’, and ‘type’. Where ‘name’ is the field name or label that will show up in the announcement edit screen. ‘desc’ is the field description, or help text that will display beneath the field. ‘id’ is the unique field ID that will be referenced by the popups script to generate and display your custom content. And ‘type’ is the field type you want to use. Since Timeline Express leverages CMB2, you have a large number of field types to choose from.

Once you’ve added the above code snippet to your themes functions.php file or into a custom plugin, you should see a new ‘Announcement Popup Content’ WYSWIYG editor visible on the announcement edit screen.

Example:

Expose the Custom Field in REST API

Next, we need to expose the new custom data to the REST API, so it can be referenced and output into our popup container. We’ll hook into the WordPress core action `rest_api_init`, where we can tell WordPress to append the new pop_content data onto the post data object returned in the REST API.

In the code below, we register a rest field with a few parameters. The first is the post type where this data will be exposed in. We use `te_announcements` since that is the custom post type available in Timeline Express. Other default post types include post, page etc. Next is the name of the field. We use pop_content in the code snippet below, meaning that in the REST API response the data will be available under the key popup_content. You can name this whatever you’d like. Next is an array with a ‘get_callback’ and ‘schema’ keys. The get_callback value is just a function used to retrieve the data for the announcement. Because all data assigned to the announcements is just post meta, we can use get_post_meta to retreive the ‘announcement_popup_content’ value. We set schema to null.

/**
 * Make the custom popup content available in the REST API response.
 */
function expose_popup_content_in_rest_api() {

    register_rest_field(
        'te_announcements',
        'popup_content',
        array(
            'get_callback' => function( $object, $field_name, $request ) {
                return get_post_meta( $object['id'], 'announcement_popup_content', true );
            },
            'schema' => null,
        )
    );

}
add_action( 'rest_api_init', 'expose_popup_content_in_rest_api' );

Once added to your themes functions.php file or to a custom plugin, you should find that the new popup content is now available for you to consume in the REST API response. You can check the API response on your website at https://www.example.org/wp-json/wp/v2/announcement for a popup_content value.

Example:

Append the Custom Field and Re-order the Popup Container

When you’ve created the field and exposed it in the REST API response, you’re now ready to append that data onto the popup container. Below you’ll see a code snippet where we append a ‘popup_content’ key with an empty array value into the `$fields` array.

Just beneath that, there is a `$new_order` array, which is an array of Timeline Express popup content. There is a title, announcemnet_image, announcement_date, the new popup_content, the default content and the next_prev_links. You can sort these into any order, and that’s the order they will appear inside of the popup container. You can also remove any of the elements you don’t want to display in the popup container.

/**
 * Append the popup content to the popups array
 *
 * @param  array $fields Popup fields array.
 *
 * @return array         FIltered popup fields.
 */
function append_popup_content_field( $fields ) {

    // Append the popup content to the popup container
    $fields['popup_content'] = array(
        // 'wrap' => 'div',
    );

    // Re-order the popup fields into the order you'd like
    $new_order = array(
        'title',
        'announcement_image',
        'announcement_date',
        'popup_content',
        'content',
        'next_prev_links',
    );

    $new_fields = array();

    foreach ( $new_order as $field_name ) {

        $new_fields[ $field_name ] = $fields[ $field_name ];

    }

    return $new_fields;

}
add_filter( 'timeline_express_popups_fields', 'append_popup_content_field' );

Once you’ve added that to your themes functions.php file or into a custom plugin, you can then view your timeline popups and you should then find that the new popup content is now displaying just above the default content field.

Example:

Struggling or Need Help?

Don’t worry – we’re always here to help! If you need help creating new fields and/or displaying them in the popup content containers feel free to reach out to us! We’d love to help out.

Leave a Reply

Your email address will not be published.

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