If you want to modify the output of the AMP pages and want to add custom CSS into your AMP design, then there are two ways you can do that. Add it via custom CSS area built into the plugin or use hooks to add custom CSS or completely overwrite the CSS that has been added in the plugin.
We have created a custom CSS area where you can easily add your CSS. Check out the below image, it is fairly simple and self-explanatory.
Now let’s get our hands dirty with the code, and the CSS via code, we have a number of hooks and filters available in AMPforWP plugin, let’s use one of the available hook called “amp_post_template_css”, the complete list of hooks is available on our developer docs page.
I will show you an example how to add some CSS. Paste this code at the end of your theme’s functions.php
Let’s check if the CSS is added or not, hit Ctrl+U in Windows or Option+Command+U in MAC ( for chrome browsers) to view the source code of the site.
CSS is added yay!!
Let’s take it one step further, what if you want to completely overwrite the CSS added into the plugin. As we just learned how to add custom CSS in the above section of the post, so I will just show you how to remove the built-in CSS.
The above code will remove all the existing CSS that is added by the plugin.
Today, we learned something very useful and with above code snippets, we can do a lot to our AMP sites and make them beautiful as they should be, but you also have to keep in mind that there are few limitations with CSS too in AMP, so please go through this great documentation by AMP team, on which elements to use and what to watch out for.
Please do let me know what you guys did with your AMP site and did this article was helpful to you? Please do let me know that in the comments section.
Happy AMPing 🙂