Clicky

  1. Home
  2. Developer Docs
  3. Hooks
  4. How to add custom CSS in AMP with Hooks

How to add custom CSS in AMP with Hooks

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.

Check Css

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.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on April 27, 2020

    Are you still looking for a solution?

    Then fill out the below form and we will reach out to you within a few hours.

    Was this article helpful?

    Related Articles

    Comments

    1. Unfortunately when I added the code to my functions.php file, the whole theme crashed. I had to remove it via FileZilla… what could be wrong?

    2. Hi.
      How I Change text-align Title In Single Post to center?
      now it is right.
      and How I Change text-align content In Single Post to justify?

    3. 3.Remove existing CSS
      The above code will remove all the existing CSS that is added by the plugin.
      This snippet is not working.

    4. why the display in the front is different when you are connected or not to the back office

    5. when i am applying css with “!important” in this function, then aumatically “!important” is removing from the css……thats why i cant overwrite css without !important.

    Leave a Comment