How to Add Related Posts to Accelerated Mobile Pages in WordPress – Part 2

The AMP related posts PHP source code and Mustache template are explained this project. This project is continued from How to Add Related Posts to Accelerated Mobile Pages in WordPress.

PHP class AmpContextlyRelatedPosts

The heavy lifting is performed by the amp-contextly-related-posts.php module. The module defines the class AmpContextlyRelatedPosts which has methods that:

  • Calls the Contextly REST API
  • Validates the API response JSON data structure
  • Extracts the related posts data and stuffs it a simple array to be rendered in a Mustache template on the AMP page.
  • If any errors occur such an API response error, unexpected condition, etc. the solution fails silently and nothing is shown on the AMP page.
The project source code is available on GitHub.

The PHP source code is intended to be self-documenting but a couple of notes will help:

  • function __construct( $post_id = null ) gets the related posts for the WordPress post_id argument if provided. Otherwise it will lookup the post_id of the currently displayed post.
  • public function getInitStatus() checks if a valid post was obtained.
  • public function ampRenderContextlyRelatedPosts()
    • Checks if running on the development or production site domain and adjusts accordingly.
      My development site is at * and my production site is
      Class constants are provided for easy adaptation to your site domains.
    • Calls getContextlyAPIData( $production_perma_link ) to retrieve the related posts via the Contextly REST API and converts the API response to JSON object.
    • Calls validateContextlyAPIData( $api_data ) to verify the JSON object has the expected structure and values.
    • Calls ampDisplayContextualPosts( $mustache_data ) to display the related posts on the AMP page via a Mustache template.

Note the Related Posts links are pointed to the AMP version of the post in using amp_get_permalink( $post_id ) in the class method getMustachePostData(). I felt it’s best to keep the reader on the AMP version of the website for page speed and consistency.

WordPress AMP Related Posts – Mustache Template

Normally one might try the brute force approach and generate HTML output using echo statements with hard to read string concatenations and escaping reserved characters as follows:

echo "<li><a href=\"" . $related_posts['post_id'] . "\">" . $related_posts['title'] . "</a></li>";

The above code quickly gets out of hand with more complex HTML structures.

Mustache templates make for easy to understand code. Just pass a PHP array with the related posts data along with the name of the Mustache template file to the rendering engine to produce HTML. My Mustache template is:

  <div class="relatedPostsContainer">
    <div class="relatedPostsSubhead">{{subhead_title}}</div>
      <div class="relatedPostListItem">
         <div class="relatedPostThumbnail">
            <amp-img src="{{post_thumbnail_url}}" width="85" height="85" layout="fixed"></amp-img>
         <div class="relatedPostTitleContainer">
           <span class="relatedPostTitle">{{post_title}}</span>
         <a class="relatedPostLink" href="{{post_url}}">{{post_title}}</a>

The Mustache template above is rendered twice, once for Related Posts and then for Interesting Posts. The rendered mustache HTML is fully responsive and automatically reflows with changes in mobile device screen resolution and orientation.

Mustache Template Data Array

The Mustache data array is built by the class method getMustachePostData( $post_links, $title ) in amp-contextly-related-posts.php module.

Mustache Template CSS

The formatting and style of the Related Posts HTML is controlled by CSS rules in hht-style.php. You can tweak the look and feel to match the scheme for your site.

GitHub Source Code

The Related Posts for Accelerated Mobile Pages in WordPress project source code is available on GitHub.


Bob Jackson

Copyright © 2016   Reproduction strictly prohibited.

, , , ,

No comments yet.

Leave a Reply