In the previous article, Lucid Gen showed how to setup AMP in WordPress methodically for those who are just starting to use AMP. In this article, Lucid Gen will add a trick to add custom CSS to AMP in WordPress. Help those with CSS skills to be more customizable with AMP pages.
Add custom CSS to AMP in WordPress
If you use the AMP plugin by AMP Project Contributors, add the following code in your theme’s functions.php file. Then replace .amp-wp-title{color:#00f} with your CSS.
//Custom CSS for AMP
add_action( 'amp_post_template_css', function() {
?>
.amp-wp-title{color:#00f}
<?php
} );
If possible, use a Child theme so that the code to add custom CSS to AMP is not lost when updating the original theme.
Add custom CSS to AMP for WP
If you are using the AMP for WP plugin, you can add custom CSS to AMP easily. Go to AMP > Design > Global and add your custom CSS to the Custom CSS section.
Note when adding custom CSS to AMP
- If you’re using a caching plugin, check and clear the cache to make sure the newly added CSS works when the user visits and let Google index your new AMP look.
- Please optimize your CSS before adding it to AMP, paste your CSS into the CSSO page to get the compressed CSS snippet.
- Visit your AMP page on a phone to see how your CSS actually impacts the look and feel of your AMP page. Sometimes it looks good on the computer, but on the phone, it doesn’t work.
Conclusion
By adding custom CSS to AMP, you can customize your AMP page to be as close to the original page as possible. Please rely on the website interface on the phone to add custom CSS for the font, color, font size, spacing, … for your AMP page. When you have an AMP page that is close to the original, you will prefer using AMP (because there are many advantages).
