WordPress + AMP: How to Add Related Posts to Accelerated Mobile Pages without Plugin

WordPress + AMP: Add Related Posts to Accelerated Mobile Pages without Plugin

AMP (Accelerated Mobile Pages Project) have already become popular and major websites have already added AMP version of their site. Starting February Google has started to redirect users from Google search to AMP-powered contents especially the traffic from Mobile devices like tablets and smartphones. It means AMP powered content will get more priority over non-AMP contents over the time even if they are mobile friendly like responsive design. It means having an AMP version of your site is as important as any SEO effort you make on your site.

Luckily if you are a WordPress user, activating AMP for your site is as easy as installing and activating a plugin. Yup! now there is a plugin called WP AMP which will enable AMP pages for your each and every posts. However customizing the plugin-powered AMP theme takes a little effort and if you don’t do it rightly, everything will get messed up and you may have to do it again from the start. If you haven’t done it yet, you may read the article on customizing AMP.

WordPress + AMP: How to customize Accelerated Mobile Pages, add Google Analytics and AdSense Code to it

However, the plugin lacks some features, for example it doesn’t add related content or recent articles. Fortunately, they have added several customization options through filters and functions and you can use them to further customize the AMP theme that I have discussed in the link above. And Yea! recently the plugin creator Automatic has announced its Jetpack plugin will be supporting this plugin and adding more features in support of AMP theme including related content. But what if you don’t want to install a massive plugin like Jetpack which eats up more resources from your server especially if you are on servers with limited resource usage, which will eventually harm your entire site performance? Well, then you need to find a way around and stop depending on such plugins for each and every features you need on your website. And here we will learn how to add nicely optimized and mobile-friendly related posts to the AMP theme the plugin produces without any requirement of another plugin.

Why related content?

Related content helps users find more interesting articles relevant to them and make your visitors engage more on your website increasing pageviews hence reducing bounce rate. As it interlinks contents throughout your website, it also helps your SEO and chances of getting your new articles indexed faster and at the top of search result.

However, you don’t want your mobile users visiting your AMP page to read related articles from your original website theme, instead, you will be sending them to another AMP content giving them the same experience as the AMP content to which the search engine first sent them, which will also ensure more previews for your AMP content as well as reducing burden on your end as the AMP pages are cached by Google’s own AMP Cache system and serves them instantly.

How to add related content to your AMP page?

Well, before you go ahead with this instruction, make sure you read the article from the link above on customization of AMP page because this is a follow up tutorial for those who have already customized their AMP theme based on the instructions in the link, which also makes sure your AMP theme is AMP HTML compliant and acceptable to Google. So here I assume that you have done everything well so far and are set to add this additional feature to your AMP theme.

T o add related content, open ”my-single.php” file from custom amp folder and find out closing </div> tag immediate above the <footer> tag, see the pic below.

WordPRess + AMP: Add AMP to AMP Related Contents without any plugin

Copy this piece of code and paste it immediate above the </div> tag.


<div class="related-posts" >
<?php $techprezz_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  'tag__in' => $tag_ids,
  'post__not_in' => array($post->ID),
  'posts_per_page'=>4, // Number of related posts that will be shown.

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
  echo '<h3>You might also like</h3> <ul id="relatedposts" > ';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
  <li class="relatedhoverli" ><a href="<?php the_permalink(); ?>amp/" rel="bookmark" title="<?php the_title(); ?>">
$post_thumbnail_id = get_post_thumbnail_id( get_the_ID($post) );
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
   echo'<amp-img src="'.wp_get_attachment_thumb_url( $post_thumbnail_id ) . ' " width="125" height="125" alt="' . get_the_title() . '" ></amp-img>'; //post thumbnail
  echo'<amp-img src="'.wp_get_attachment_url( $post_thumbnail_id ) . ' " width="125" height="125" alt="' . get_the_title() . '" ></amp-img>'; //else, post attachment
<div class="relatedcontent ">
   <a href="<? the_permalink()?>amp/" rel="bookmark" title="<?php the_title(); ?>"><h4><?php the_title(); ?></h4></a>
<? }
  echo '</ul>';
  $post = $techprezz_post; echo'<div class="clear" ></div>';

And if you have followed the tutorial on the link above, closing </div> tag also means immediate below the AdSense ad slot code which ends with this comment  <!–ADSENSE AD SLOT–> and if you want the related posts to be shown above the Adsense code, simply paste the code immediate above the AdSense widget code which also means immediate below this line of code :

<?php echo $this->get( ‘post_amp_content’ ); // amphtml content; no kses ?>  on your ”my-single.php”.

Not done yet, you are almost there though, and yes now you can definitely see the related posts on your AMP page but don’t complain that is cluttered and clumsy. Luckily you won’t at least get some error report on this code because I have made sure all the tags and attributes are AMP HTML compliant and none of them miss single attribute value including ‘alt’  even if you don’t add special alternative text to each image you have uploaded, the code will take care of it.

Now we need to give it some styling and make sure the related content is nicely optimized for mobile devices so that it is automatically adjusted to fit in the limited area of the mobile displays.

So copy this piece of CSS code:

<?php global $post; if('post' === $post->post_type){ ?>

a {
   text-decoration: initial;
#relatedposts {

#relatedposts li {
   -moz-box-shadow: 0 0 30px rgba(0,0,0,.09);
   -webkit-box-shadow: 0 0 30px rgba(0,0,0,.09);
   box-shadow: 0 0 10px rgba(0,0,0,.09);

#relatedposts .relatedcontent {
   display: -webkit-flex;
   height: 150px;
<?php } ?>

Then, go to your custom ‘amp’ theme folder and open Style.php file, paste the code somewhere at the bottom of the file and save it and upload it to your server. Make sure there are no  <style am-custom></style> tags in the file any longer because with the release the plugin AMP 0.3 version, these tags are automatically added to the head of the page. If you still have those tags in the file, you gotta remove it. And you can see a php ”if” statement in the CSS code which you can safely remove if you want this code to load on both custom post types and regular post type. With the ‘if’ statement included, this CSS code will only load into regular WordPress ”post” post type . You don’t need to do anything as long as you don’t have custom post type or you don’t want the code on both posts types.

Great! Now you have added beautiful related posts to your each and every amp pages without needing another plugin. However, we need to tweak the stylesheet a little further so that the four related posts fit in on two rows even on smaller screens like of iPhone 5 and visitors won’t have to scroll all the way down to see all the related posts.

So open your Style.php file from the custom amp theme folder and find out this selector .content {  }  and among other CSS properties in the curly braces, you should see the property  ” padding : 16px; “, just change it to  7px , so it looks like this  ” padding: 7px; “.  Save the style.php file and upload it to your server.

Yay! now you have even better related posts for your AMP pages, which fit in on almost all major smartphone screens.

We hope this article really helped you and would love to have some love back by sharing the article on your social sites, forum accounts or linking back and following us on Facebook and Twitter.

WordPress + AMP: How to Add Related Posts to Accelerated Mobile Pages without Plugin

You might also like

Sharing is caring

Add to Flipboard Magazine.

You may also like...