WordPress

A Simple Way to Hide Featured Image inside Post with CSS

44 Replies

Here’s a very simple way to hide your featured image inside your post area, and it does NOT affect your actual featured image on your site’s front-page or the thumbnail image from the list. You are not deleting anything but simply hiding!

This post was originally for the theme “TwentyTwelve”, however, as many people have asked about other recent themes, I have organized the codes for the default WordPress themes from “Twenty Twelve” to “Twenty Sixteen”.

For Twenty Twelve

Copy the code below and paste into your CSS document.

.attachment-post-thumbnail { display:none; }

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.entry-thumbnail { display:none; }

For Twenty Fourteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.site-content .hentry.has-post-thumbnail:first-child { margin-top: 48px; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, margin-top: 48px will fix the issue.

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.hentry.has-post-thumbnail { padding-top: 8.3333%; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, padding-top: 8.3333% will fix the issue.

For Twenty Sixteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }

For any questions, please leave a comment. Enjoy blogging!

Related posts:

  1. CSS Vertical Align Center
  2. CSS: A Simple Way to Set the Table Column Width
  3. Remove Proudly powered by WordPress Theme and Replace with Your Own © Copyright Information
  4. Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme
  5. Circled Number Lists (HTML/CSS)
  6. Resolved! Loading Your Google Fonts Over https (SSL) Sites
  7. Simple JavaScript Redirect Code for HTML
  8. Responsive Google Adsense is Easy!
  9. Quick Start Guide to MailChimp for WordPress
  10. Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme
  11. Download: Simple Parallax Smooth Scrolling Website Template
  12. Freebies: Christmas Responsive Email Template for Business (HTML/CSS)
  13. Make Clickable Link with JavaScript instead of HTML Anchor
  14. Remove Automatic and Tags in WordPress
  15. Migrating Joomla to WordPress
  16. Force an Anchor Tag Not Clickable with CSS
  17. WordPress Appearing Strange Weird Characters / Codes
  18. Download PSD: Photoshop Hatched Slash Diagonal Pattern
  19. Remove automatic <BR> & <P> tags in WordPress
  20. Google, Yahoo and All Major Search Engine Tips

44 thoughts on “A Simple Way to Hide Featured Image inside Post with CSS”

  1. Jeremy Bates

    Hey, I’ve been looking all over for a simple answer to this! I’m using Optimizepress 2 and it worked like a charm! Basically I want the featured image to show beside my post excerpt but not necessarily in the post itself! You helped out a lot, thank you!

    Reply ↓
  2. John

    So i am using Sterling theme , can you help me with “if you are using some other theme than TwentyTwelve, define the class of the image inside your post and replace it with “.attachment-post-thumbnail”.” part ???? i dont understand what i have to do

    Reply ↓
  3. adresyfirm.org

    Excellent blog you have here but I was wondering if you knew of any discussion boards that cover the same topics talked about in this article? I’d really love to be a part of group where I can get advice from other knowledgeable individuals that share the same interest. If you have any recommendations, please let me know. Bless you!

    Reply ↓
  4. nekers

    Hmm is anyone else encountering problems with the images on this blog loading? I’m trying to find out if its a problem on my end or if it’s the blog. Any responses would be greatly appreciated.

    Reply ↓
  5. nekerscom

    Hi there just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Ie. I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d post to let you know. The design look great though! Hope you get the issue solved soon. Kudos

    Reply ↓
  7. song2love

    i’m korean. i don’t speak english very well.

    How about hide featured image to “Underline Theme” ?????????

    plz….

    Reply ↓
  9. Chelsey

    Thank You! Thank You! Thank You! I’ve read so many instructions on the WordPress support site. They have people changing PHP and editing 5 different things and this how easy it is!

    Though for me it was .entry-thumbnail – I just inspected the source to figure that out.

    Reply ↓
  10. admin Post author

    A good thing about WordPress is every page or post has a unique class. If you inspect element this post, there is a bunch of class names on the body tag, which are as below for this current post,

    Body=”single single-post postid-181 single-format-standard logged-in admin-bar custom-background custom-background-white custom-font-enabled single-author customize-support”

    As you might have realized already, the class name “postid-181” is it. If I were to hide my featured image only on this current post, you should add a css line like below:

    .postid-181 .attachment-post-thumbnail { 
display:none; 
}

    This will resolve it. Thanks!

    Reply ↓
    1. admin Post author

      Go to your post and do “inspect element”. Look for the body tag. You’ll get the your post ID (for example, postid-XXX).

      Put below codes in your style.css editor,
      .postid-XXX { display:none; }

      Let me know if this works for you.

      Reply ↓
  14. PiedType

    Fantastic! I’ve been unable to change themes for several years because all my current featured images (hundreds!) show up as duplicates in most other themes I’ve looked at. This looks like it will finally solve the problem, at least with Twenty Sixteen, the theme I’ve considered most recently.

    Now I’m wondering if the same bit of code would solve the problem with other themes as well. Easy enough to test it, I imagine. Thank you!!!!

    Reply ↓
      1. admin Post author

        Here’s the line of CSS to hide the image on top.

        .entry-thumbnail { display:none; }

        If you want to move the image align left below is code you can put it on your CSS file:

        .entry-thumbnail { width: 300px; float: left; margin: 0 20px 20px 0; }

        Reply ↓
  20. AC

    Hello,

    I want to hide the featured image that appears in each post at the top of the post. But i want to keep the featured image (or better said the thumbnail) that appears on my blog page with all the blogs or that appears on side bars, etc. I just do not want it on the post page. I am using the Sydney theme. I did not add the featured image yet because i don’t want to see it at the top of the page. I need to make the changes for this website – this is the post http://oazadesanatate.ro/2016/05/26/musalitsa-planta-care-vindeca-toate-bolile/

    Thank you for your help with the code that i should include and where i should include it.

    Reply ↓
    1. admin Post author

      Glad if this helped! If you want to hide the featured image on posts but not on the thumbnails, add the featured image first and send me the link. I can look over and show you how to resolve the issue. Thanks

      Reply ↓
        1. admin Post author

          Could you try this code add on your CSS file and see if this work?

          .single .entry-thumb { display:none; }

          Reply ↓
          1. AC

            Many thanks for your quick feedback! It worked perfectly! So simple for those knowledgeable and yet so complicated for those like me who don’t know programming…now we trully understand its value

  21. Dustin T

    I’m trying to hide the featured image that shows inside each post without changing how the images function on the homepage – recent news widgets, above each post, etc. I’m using the Colormag theme.

    Thanks in advance

    Reply ↓
  22. Chloe

    Hi there,

    Please can you suggest code for my site? I want to just have text and a gallery when you click on the post.
    Would you also be able to suggest how, on the home page i can make the whole image a link to the post rather than just the text?

    Thanks!

    http://www.chloesharp.com

    Reply ↓
    1. admin Post author

      I’m not quite understand your question. I see a light box pop up with the image when I click on your blocks. What do you need when you click on it?

      Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *