How to Setup AMP Page in WordPress?

If you aim to dramatically improve the performance of your mobile web, then you are in the right place. Here in this article, we will show you how to set up the AMP Page for your mobile website. Of course, this will load your mobile phone web pages fastly.

Accelerated Mobile Pages

The Accelerated Mobile Pages (AMP) is an open source initiative which aims to make the web a better place for all. It creates mobile-friendly content by serving cached and fast rendering HTML pages. Of course, it will improve the overall score of your website and you find the improvement in mobile traffic and its user-friendliness. In short, it will improve the mobile experience of your visitors. Here in this accelerated mobile pages tutorial, we will show you the different steps to install and setup AMP Page for your WordPress account.

How to add AMP in WordPress?

Using Wordpress Plugin, you can add the AMP Page easily. Of course, it will increase one more plugin to your list but it worth to install it. A manual way for creating AMP page is a long and tedious job and will require technical knowledge for the same. So it is better to install AMP WordPress Plugin by Automattic.

By simply installing this plugin on your website it will start creating AMP pages. Just install the plugin and wait for 2 to 3 days, AMP articles will start appearing in the search engine.

In the above-attached image, ‘AMP logo’ indicate that Accelerated Mobile Pages is enabled on your site.

How to change the background color?

You can change the text and background color from ‘Setting Page’ of the AMP Plugin. Setting Page will appear under the Appearance tab of the Dashboard. You can even change the theme from the same page.

How to add a footer to the AMP theme?

After installing the WordPress Plugin to your site, ‘Powered by WordPress‘ will start appearing at the bottom of the AMP Page. To change this you need to modify the footer of the AMP theme. Below is the code of for our AMP footer file

<div>
<a href="/">LoveUMarketing</a> <a href="/questions/" target="_blank">Ask a Question</a>
</div>

This file will appear under the Plugins tab. Visit Plugins>Editor>AMP>footer.php to edit footer of your AMP theme.

How to remove Whitespace from the footer?

After installing the Plugin, you will start to observe White Space immediately below the footer. To remove this whitespace, you need to edit the ‘style.php’ file. Just delete or comment out the below code line from the file

.back-to-top {
/*bottom: 1.275em;*/

This file will appear under the Plugins tab. Visit Plugins>Editor>AMP>style.php to remove the whitespace from your AMP theme.

How to add Adsense Code to AMP Page?

After installing AMP Plugin you will start to observe that Google Adsense Ads are not appearing on your AMP Pages. This is because your normal Adsense code will not work on AMP Pages. To show Adsense ad on your AMP Page, you need to add below code to your ‘single.php’ file appearing in AMP Plugin folder. To show proper ads on your mobile site, ensure the new ad unit created must be responsive in nature.

For showing ads on the top of the screen: Add below Adsense Code below the “<article class=”amp-wp-article”>”

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-4800XXXXXXXXXXXX"
data-ad-slot="19XXXXXXXX">
</amp-ad>

For showing ads on the bottom of the screen: Add below Adsense Code above the “<?php do_action( ‘amp_post_template_footer’, $this ); ?>”

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-4800XXXXXXXXXXXX"
data-ad-slot="19XXXXXXXX">
</amp-ad>

Remember, due to website cache you may not able to see the changes immediately.Please wait for some time or flush out the cache to see the changes made to your AMP site.

At last, If we had missed something or you are facing any problem, feel free to contact us. You can share your problem or feedback in below comment box. We will be happy to help you out.