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.
To create a completely customized header, footer, single page or post etc:
- Navigate to your site’s “wp-content > plugins > amp > templates” folder.
- Here you will find the base templates that the plugin uses. Copy the template you wish to modify.
- Create a folder named ‘amp’ inside your currently active theme folder, put this template there.
- It will override the plugin’s template file. Now customize this file.
Adding custom fonts
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.