Remove Featured Image With AMP On WordPress Post CSS



Remove Featured Image AMP Post

What Is AMP?

AMP is Accelerated Mobile Pages. It’s a way to build mobile pages that render super fast, which helps with Google ranking, and helps your viewers to see your content quicker. Unfortunately AMP is a visual disaster. Using YOAST, which is what TheBLACKMedia uses, you can do some cosmetic changes, but one important change is to remove featured image.

AMP removes your theme’s style.css, fonts, and HTML, and can cause your website front visual to change from your basic mobile theme and style, to a boring text and white background. One of the things AMP does is re-ads your featured image, if previously removed with a plugin, which doubles if you already have an image atop a post [see screenshots below].


Remove Featured Image On Post

There are two great AMP plugins. AMP from Automattic which is a WordPress company, and AMP for Wp-Acclerated Mobile Pages. With the second plugin, there’s a simple button for remove featured image, but with AMP from Automattic, there’s not.


Screenshot Without CSSScreenshot With CSS


These instructions are specifically for YOAST users, who use AMP, and YOAST glue plugin. We use AMP from Automattic because it caused less issues with our site breaking with certain plugins we used, so if this is your case, simply follow these steps to remove featured image.


  • Download And Install AMP
  • Download And Install Glue For YOAST SEO & AMP Plugin
  • In Your Dashboard Visit YOAST SEO
  • Click AMP In YOAST SEO
  • Click Design
  • Scroll Down To Extra CSS
  • Copy And Paste The Following Code And Press Save Changes At The Bottom

.amp-wp-article-featured-image {
display:none;
}

How Did We Create This Code?

The CSS code { display:none; } is used to not display many things, its a basic code you can find readily on Google. The issue was trying to find the name for the AMP featured image, which is a different name from the theme’s featured image. So using Safari’s Inspect Element feature by left clicking on an AMP page, we found the following line within the Head tag and AMP style tag, and used the featured image code added with the display none code and it removed it easily!


© 2017 Tahir Register 
TheBLACKMedia On Twitter

2 comments Add yours

No Gossip, No Rumors, No Negativity!