Add Related Posts To Amp Pages In WordPress

0 585



We Welcome You! For coming to read this Article on Amp Related Posts, Before we start this Tutor, we will like to introduce to you, what you need to know about Amp Pages In WordPress or As a Website a Whole on the Internet facility, so without taking much of your time, let’s start by telling you all about it.

What is Amp or Amp Pages?

AMP Simply Means Accelerated Mobile Pages, also it is Google-backed project with the aim of speeding up the delivery of content from mobile end, through the use of stripped down code known as AMP HTML.  AMP is a way to build web pages for static content (pages that don’t change based on user behaviour), that allows the pages to load (and pre-render in Google search) much faster than regular HTML.

So with the little explanation of Amp above, i know you have known it now, so let’s begin.

Adding Amp Pages to Your Sites.

First we will Introduce to you the Amp Pages plug-in, we are using on NgmTechnology, so keep reading as it will be mentioned. The Plugin Name is BetterAmp, and this Plugin was Built By the Popular WordPress Theme, that is on the Market Now, Called: Publisher WordPress Theme, Which one of Our Website NgospelMedia is also using the Theme. 

Read More:
1 of 197

To add Amp Pages to your isn’t that hard, is just a simple task that anyone can undertake, here you do not need to be a developer before you can do so, all you to do is to follow the steps Bellow:

Steps To Add Amp Pages Plugin To Your Websites.

  • Click on Plugins=>Add New=> To Install it to your Website. 
  • When the Page has finished loading, at your right hand side of your computer, you will see a search box there, use it to type this keyword: BetterAmp, see screen shot:  After typing the Keyword, in the box, you will just have to wait for like 4 seconds, and the plugin will load, just click on “Install Now” See Screenshot.  as you can see, ours is showing “Active”, this is because it is already in-use in our website, so what you will do is to click on the install button and wait for up-to 4 to 5 seconds, then you click on “Active” button. then you have added Amp Pages to your Website.
  • Note: That is not the end of it, but you can on your own design it, or you leave it as default it came. And maybe in few days from now, we will write article on “How To Design Better AMP Plugin“, for it to look so Gorgeous in every of your visitors eye.

So you now i think you have installed Amp Pages too your Website, so lets begin in Adding it “Related Posts” because this plugin don’t have a related post on it, but in due time, i think in the next update of the plugin, the Plugin Author Better Studio, will do so.

Steps To Add Related Posts To All Amp Single Pages.

  • First we need to install a Plugin called: “WordPress Related Posts” By Sovrn, zemanta, Fellow the Steps on adding or installing “BetterAMP Plugin” Above. But in these now, you have to Search for “WordPress Related Posts” in the Search Box, or you can click on the link to download it and install it manually on your website.
  • By Now you might have installed Related Posts Plugin to your website, so lets begin the setup to integrate it to your BetterAMP Plugin.
  • Visit the Setup on: Settings=>; WordPress Related Posts, the click to open the page, please see below screen shot to understand where you are going.  
  • When the page has opened, you do the following settings i will drop the screenshots below. 
    Add Related Posts To Amp Pages 05 Your Related Posts Title and number of posts to display
    Add Related Posts To Amp Pages 05 Your Related Posts Title
    Add Related Posts To Amp Pages 06 To Open Advance Settngs
    Add Related Posts To Amp Pages 07 Follow the Red High lighting here
    Add Related Posts To Amp Pages 08 Uncheck Any Checked Setup here, and use it as you see it on the screen shot
    Add Related Posts To Amp Pages 09 Check only what you see here, to avoid comflects in your desktop theme
    Add Related Posts To Amp Pages 09 Check The part if you want

    Add Related Posts To Amp Pages 10 Finaly, Save your settings
  • Finally, we are not done yet, we have to implement it to the BetterAMP Plugin, by editing Single.php files in: /wp-content/plugins/better-amp/template Or you can follow the screen shot below.  Note: Yours might look different, due to we are not using the same hosting providers.
  • Now Right Click on the file, let us edit it and add the related posts code inside, for it to show on our mobile Amp Pages. 
  • Add this Code to It: 
     
     <div></div><?php wp_related_posts()?><div></div>
     Before the following Codes in your Single.php Betteramp plugin. 
     
      <?php
    
     better_amp_enqueue_block_style( 'post-terms' );
    
     the_tags(
     '<div class="post-terms tags"><span class="term-type"><i class="fa fa-tags"></i></span>',
     '',
     '</div>'
     );
    
     $cats = get_the_category_list( '' );
     if ( ! empty( $cats ) ) {
    
     ?>
     In other Words, i mean, it must come first before the above code, thene save and close.
  • You have successfully added related posts to your amp pages. visit your website, by adding /amp/ at the end. e.g: https://www.yoursiteurl.com/amp/ and view your site to see the related posts on it. that’s all.

Please if this article has helped you, you can support us by sharing it to your friends on social media sites.



Related Articles: More from author

Leave A Reply

Your email address will not be published.