How To Hide Featured Image On Single Wordpress Posts And Pages Content?

The 'featured image' feature in WordPress is a way to assign a separate image to be displayed as post thumbnails in post feeds such as recent content, related content, category posts, etc. But there are times when a developer may want to hide the featured image on individual posts and pages, show on some posts and not on others. In this post, we shall see how to hide featured image on WordPress single posts and/or pages content.

It is ideal and advisable to always add a Featured Image on WordPress websites so that post teasers in post feeds have thumbnails. It looks better. Otherwise, if a Featured Image is not set, then the theme will decide what to be shown. If a default image for Featured Image is set, then the default image will be displayed.

As mentioned above, the Featured Image is displayed in thumbnails of posts in Feeds / Teasers - which is desired by most. The Featured Image is also by default displayed at the top of the post or page content. This may sometimes not be desired - that is - 

• Thumbnails via Featured Image: keep
• Display Featured Image at the top of the post or page content: hide

Where we may want to "hide featured image"?

1. Hide the thumbnails on post feeds [not desirable]
2. Hide Featured Image from ONLY SOME single posts / pages displayed in the post / page content at the top [using a plugin]
3. Hide Featured Image from all single posts / pages displayed in the post / page content at the top

We'll be discussing only the 2 and 3 from the above, as 1 is mostly desired.

Hide/Show Featured Image from ALL/SOME on single posts / pages displayed in the post / page content at the top

Using Plugin:
 

We can hide featured image from all posts or only a few using the "Hide Featured Image" plugin. This plugin allows to show or hide featured image from single post page. It supports custom post types also.

To hide featured image on all single posts

To hide featured image on all single posts, it can be set in the "Hide Featured Image" settings.

• Go to ‘Hide featured image’ setting page ( Plugins > Settings > Hide Featured Image).
• Select the option(YES/NO) to hide featured image for all posts or pages.
• Click Submit.

To hide featured image from single post or page

To hide featured image on a single posts, it can be set in the "Hide Featured Image" option provide in the post edit form.

• Open the post/page in edit mode.
• Select the option(YES/NO) to hide featured image and update.

 This option overrides the setting applied in the main "Hide Featured Image" settings.

Hide Featured Image Plugin Link
[Update: The plugin is no longer on WordPress 4.9.1]



Without Plugin (using CSS)

If we want to hide Featured Image from ALL single WordPress posts and pages without any plugin, we can do so with CSS also. If you are not familiar with CSS code, then you may use the above plugin discussed. 

To hide Featured Image from all WordPress posts and pages, we need to - 

• Find the CSS element for the Featured Image of single post / page, it's CLASS or ID
• Then, using CSS, hide the Featured Image from being displayed

 
Find the CSS element for the Featured Image of single post / page

 

To  find out the element (CLASS / ID), of the Featured Image, we can use the INSPECT ELEMENT tool in our web browser. The Inspect Element tool is a part of most browsers' Developer Tools.

• Open any post from the website being developed
• Bring the mouse cursor on the Featured Image displayed at the top in the single post content
• Right-click on the Featured Image and click on "Inspect Element"
• A new Inspect Element window will open and the select Featured Image code will be in view / focus / highlighted. When we select certain section of the code with the mouse, the respective elements on the page in another widow is highlighted. [Search YouTube videos how to use the Inspect Element if not clear]
• The code depends and would vary from theme to theme.
• In the inspect element window, there would usually be two separate areas - one for the elements and the other for the CSS styles. As we highlight certain elements, the corresponding CSS code is displayed.
• Find out the CLASS or ID of the Featured Image.

 In the example below, the CSS CLASS for the Featured Image is "entry-thumbnail" as seen in the right-hand side window. CSS CLASS begins with a dot (.) and CSS ID begins with a hash (#) in CSS code.

Now that we have found out the CSS CLASS for the Featured Image which is "entry-thumbnail", the next thing to do is to hide the Featured Image using a little bit of CSS.

• Open the style.css for the WordPress website and search for "entry-thumbnail".
• Before the closing brace of "entry-thumbnail", add the line: display: none;

Example:

.entry-thumbnail {
......................;......................;
display: none;

}

• Save the style.css
• View the post/page again. The featured image should not be visible now.

Note: 

1. The CLASS/ID of the Featured Image would generally be the same for posts and pages. But in some theme it may not be (very  unlikely though). Just to ensure, do the same exercise for the feature image on Pages too.
2.  Where you put the "display: none" CSS code is up to you and we shall not get in to the details of that but the options are:
1. Directly in the style.css of the WordPress theme (not recommended as it will be lost when the theme is updated).
2. In the style.css of the CHILD THEME (okay)
3. In WordPress > Appearance > Child Theme  > Customize > Additional CSS (if the them supports). 

Always use a Child Theme if you make changes to WordPress files and themes.

Sumber http://techubber.blogspot.com/

Share this post