Custom API Data and Template Hooks

To customize an API list you need to use template hooks.

For example, if I wanted to add the post comments to the single post view, or some custom post meta like an event date, I would use template hooks for that.

This requires writing some custom code in a plugin on your WordPress site to add API data.

For a live demonstration, please view the Advanced Features Webinar in the previous lesson.

Template Hooks

List pages display pre-defined content from the WP-API.

List page

• Thumbnail (optional)
• Title
• Excerpt
• Slide Content

Post detail page

• Title
• Content

What if you want to add more, such as a product price, event date, or video link? That’s possible with template hooks.

Usage

This code goes in a plugin on your WordPress site. In this example we are adding post meta to the wp-json/wp/v2/posts endpoint.

/**
* Use an AppPresser template hook
*/
add_action( 'rest_api_init', 'my_register_template_hook' );
function my_register_template_hook() {
    register_rest_field( 'post', // any post type registered with API
        'appp',
        array(
            'get_callback'    => 'my_get_hook_data',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}


/**
 * Get the value of a meta field field
 *
 * @param array $object Details of current post.
 * @param string $field_name Name of field.
 * @param WP_REST_Request $request Current request
 *
 * @return mixed
 */
function my_get_hook_data( $object, $field_name, $request ) {
	
	$data = [];
	// $data['post_list']['above_title'] = '<span class="schedule-time">' . get_post_meta( $object['id'], 'schedule_time', 1 ) . '</span>';
	
	$data['post_detail']['above_title'] = '<div class="post-featured-wrap">' . get_the_post_thumbnail( $object['id'], 'large', array( 'class' => 'post-featured' ) ) . '</div>';	
	return $data;
}

You can edit the code above to add this content for a specific post type, and change the content that is displayed in the app. We are showing post meta called schedule_time above the title in a post list, which is great for a conference schedule or event app. We are also displaying the post thumbnail on the post detail page.

View a plugin PHP file with sample list hook code here.

Available Hooks

appp.post_list.slide_content – Add custom content inside a slide, below the title

appp.post_list.above_title – Display content above the title on the post list page

appp.post_list.below_title – Display content below the title on the post list page

appp.post_list.below_content – Display content beneath the excerpt on the post list page

appp.post_detail.above_title – Display content above the title on the post detail page

appp.post_detail.below_title – Display content below the title on the post detail page

appp.post_detail.below_content – Display content beneath the excerpt on the post detail page

Custom Post Types

The WP-API doesn’t support custom post types or post meta by default. Adding them is just a few lines of code, we have a sample plugin file to help.

Please view the Gist here.

You will need to edit this file, all of the functions are commented out by default. Please read through the code, make any changes necessary, then add it to your site as a plugin.

For more information on customizing the WP-API, please see these articles:

AppPresser 3 Feature Spotlight: API driven list pages

Add CPTs to the WP-API

Post meta in the WP-API