Template Hooks: Custom WordPress API Content

WordPress post pages in your app display pre-defined content from the WP-API. What if you want to add more, such as a product price, event date, or video link? That's possible with template hooks.

List page

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

Post detail page

  • Title
  • Content

Usage

This code goes in a plugin on your WordPress site. First make sure the WP-API (v2) is enabled. 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.

Video: Events Calendar

First part of the video is here.

The full demo code from the video is available here.

Note: in the first part of the video I used register_post_meta to add the event cost, you don't actually need to do that. You can skip to the part where I add the template hook using the code above.

Example Plugin: Add Featured Images to Single Post View

To add post featured images, see this article.

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

AppCommerce template hooks

If you want to add more content to the product list and product details pages you can use the available AppCommerce template hooks. Follow the instructions in this article on how to use the AppCommerce template hooks and how to extend the wp-json/appcommerce/v2/products endpoint.