{"id":2224,"date":"2017-01-21T13:26:56","date_gmt":"2017-01-21T13:26:56","guid":{"rendered":"https:\/\/ampforwp.com\/?p=2224"},"modified":"2020-04-27T07:55:26","modified_gmt":"2020-04-27T07:55:26","slug":"add-custom-css-in-amp-with-hooks","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/add-custom-css-in-amp-with-hooks\/","title":{"rendered":"How to add custom CSS in AMP with Hooks"},"content":{"rendered":"<p style=\"text-align: justify;\">If you&nbsp;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.<\/p>\n<h2>1. Add CSS in Custom CSS area.<\/h2>\n<p>We have created a custom CSS area where you can easily add your CSS. Check out the below image, it is fairly&nbsp;simple and self-explanatory.<\/p>\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt; Navigate to <strong>AMP Option Panel<\/strong> -&gt; <strong>Design<\/strong> -&gt; <strong>Global<\/strong> -&gt; <strong>&nbsp;<\/strong>In the Advanced section <strong>Paste your Custom CSS <\/strong>and then click on the<strong> &#8220;Save Changes&#8221; <\/strong>button<strong>.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13081\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11.png\" alt=\"\" width=\"1320\" height=\"629\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11.png 1320w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11-300x143.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11-768x366.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11-1024x488.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/01\/11-100x48.png 100w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/a><\/p>\n<h2>2. Add CSS via hooks<\/h2>\n<p>Now let&#8217;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&#8217;s use one of the available hook called &#8220;amp_post_template_css&#8221;, the complete list of hooks is available on our <a href=\"https:\/\/ampforwp.com\/list-hooks-ampforwp-plugin\/\">developer docs page<\/a>.<\/p>\n<p>I will show you an example how to add some CSS. Paste this code at the end of your theme&#8217;s functions.php<\/p>\n<p><script src=\"https:\/\/gist.github.com\/MohammedKaludi\/895e576f6fa98d00721bdc7dd7687bd7.js\"><\/script><\/p>\n<p>Let&#8217;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&nbsp;source code of the site.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-2230\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2017\/01\/Accelerated-Mobile-Pages-Add-Custom-CSS-source-1024x942.png\" alt=\"Check Css\" width=\"1024\" height=\"942\"><\/p>\n<p>CSS is added yay!!<\/p>\n<h2>3.Remove existing CSS<\/h2>\n<p style=\"text-align: justify;\">Let&#8217;s take it one step further, what if you want to completely&nbsp;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.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/MohammedKaludi\/5f0c6bc912b4c3b44019ccd9016e0568.js\"><\/script><\/p>\n<p>The above code will remove all the existing&nbsp;CSS that is added by&nbsp;the&nbsp;plugin.<\/p>\n<h2>Over to you<\/h2>\n<p style=\"text-align: justify;\">Today, we learned something very useful&nbsp;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&nbsp;through this <a href=\"https:\/\/www.ampproject.org\/fr\/docs\/guides\/responsive\/style_pages\">great&nbsp;documentation<\/a> by AMP team, on which elements to use and what to watch out for.<\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>If you&nbsp;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&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":[],"ht-kb-category":[187],"ht-kb-tag":[14,128,130],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/2224"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=2224"}],"version-history":[{"count":7,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/2224\/revisions"}],"predecessor-version":[{"id":15947,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/2224\/revisions\/15947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=2224"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=2224"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=2224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}