AMP Tutorials

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 to the plugin.

1. Add CSS in Custom CSS area.

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.

You will find this option in the WordPress Dashboard -> Navigate to AMP Option Panel -> Design -> Global ->  In the Advanced section Paste your Custom CSS and then click on the “Save Changes” button.

2. Add CSS via hooks

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!!

3.Remove existing CSS

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.

Over to you

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.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.