Customize AMP pages on WordPress

Tuesday, 27th March, 2018

So Google’s Accelerated Mobile Pages project is gaining momentum. If you are using this AMP plugin made by Automattic on your WordPress site, it comes with a standard design for all the post types.

But if you are not satisfied with the layout & need to customize your AMP page design to make it stand out from the rest then here is how you can do that.

This is the relevant documentation for the above plugin, keep it handy, the customization page has code snippets you can use to insert elements in common header & footer.

To create a completely customized header, footer, single page or post etc:

  1. Navigate to your site’s “wp-content > plugins > amp > templates” folder.
  2. Here you will find the base templates that the plugin uses. Copy the template you wish to modify.
  3. Create a folder named ‘amp’ inside your currently active theme folder, put this template there.
  4. It will override the plugin’s template file. Now customize this file.

Adding custom fonts

You can add custom fonts from Google Fonts & more, font icons such as FontAwesome to your AMP pages in the <head> section by adding following code in the theme’s functions.php:

Adding custom CSS

You can add custom, internal CSS to the <head> section of a AMP page, but it is better to keep all those CSS rules in a CSS file inside the theme folder & then include that file’s contents in the <head> using the PHP include() function inside functions.php as follows:


If you have any comments or questions regarding this post then please email me, I would love to hear from you.