Hide Featured Image Plugin

WordPress has this neat feature where you set a Featured Image for a post. I use this almost all the time.

However, if for some reason(s), you may want to ‘hide’ the featured image from human eyes, but not from computer crawlers such as Pinterest.

This post actually has a hidden Featured Image. It should show up as a thumbnail from the main website. It should show up on Pinterest. And yet, you see a greyed out curved rectangle containing Post information here.

How It is Done

At the time of this writing, I’m using the Color Blog theme as provided by Mystery Themes. (I’m still evaluating themes for this website.)

There is a Hide Featured Image Plugin (v 1.3.1) by ‘shahpranaf’. It works good on WordPress’ backend. Works well with the new Gutenberg editor.

You find that plugin and install it. Then load up the Gutenberg Editor, and start editing a post with a Featured Image. You should find it in the bottom tab of the Document Pane. You click Yes/No to hide the Featured Image.

It should be simple… And yet, it didn’t work for this particular theme. 🤨

The Fix

I had to dust off my rusty PHP skills. I went to the plugin folder for the Hide Featured Image plugin and edited the index.php file. The relevant code looked like this: (Hat Tip to Lilolbear’s Fixing the Plugin 1.2 posting.)

if( $hide ){ ?>
   <style>
   .has-post-thumbnail img.wp-post-image, 
   .attachment-twentyseventeen-featured-image.wp-post-image { display: none !important; }          
   </style><?php

The plugin appears to be hardcoded into the Twenty Seventeen WP Theme. There should be a hook or something similar where the plugin loads in the current theme name and uses that instead. This way, the plugin could work with lots of different themes.

I changed the code to make it work with the Color Blog theme:

if( $hide ){ ?>
   <style>
   .post-thumbnail img{ display:none !important; }
   </style><?php

I tried the Hide Featured Image plugin once again, and it worked! Problem is, it worked too well. 🤔 Not only the Featured Image went missing, so did the Post information box, i.e., date, author, and title.

The Fix, Part Deux!

After researching CSS Selectors to no avail, I decided on a different tack. I used the CSS opacity and height properties to my advantage to hide the Featured Image for this particular blog theme. Here’s the code:

if( $hide ){ ?>
   <style>
   .post-thumbnail img{opacity:0; height:16em;}
   </style><?php

This time, the Hide Featured Image Plugin worked quite nicely for this Color Blog Theme! Setting the opacity to zero ‘hid’ the image from the Post, and I set a minimum height for the Post Information box to be roughly 16 times its base font, a relative unit of measure.

The future…

Hopefully WordPress will integrate the ‘Hide Featured Image’ as a checkbox when a user adds in a Featured Image to a post. There should be a help icon explaining why a user may want to hide it.

With this checkbox being integrated into WordPress, it should work with a lot of themes. If you stumbled upon this Post because you’re having an issue, I hope this information will be helpful in your endeavors. Enjoy.

^{Image Credit by Wikimedia Commons}

Hide Featured Image Plugin