How To Remove Featured Images Using CSS Code

Aug 16, 2013

—

In this post, i’ll provide the CSS code which removes featured images from different locations on your site:

You can use this code to remove any images added using the Featured Image module on all edit posts and page screens.

First we’ll take a look at what code to use for child themes running Genesis and then look at non Genesis themes like Twenty Twelve.

Some themes like Genesis also include an option to do this without using code.

The Genesis > Theme Settings > Content Archives enables you to determine if you want a featured image to display on all blog listings page (including home page), custom blog page(other than home page), category and tag pages.

Here’s what the Content Archives look like in Genesis themes:

You can also use CSS code to remove featured images on themes with or without using settings like which Genesis provides.

Note: All CSS code should be added at the end of your child themes style.css file.

Remove Featured Image From Home Page Archives

.home .post-image { 
display: none; 
}

Remove Featured Image From Blog Page Archives

.page-template-page_blog-php .post-image { 
display: none; 
}

Remove Featured Image From One Category Archive Page

.category-web-design .post-image { 
display: none; 
}

Or you can use the category i.d

.category-29 .post-image { 
display: none; 
}

Remove Featured Image From All Category Archive Pages

.category .post-image { 
display: none; 
}

Remove Featured Image From One Post

.post-39428 .post-image { 
display: none; 
}

Remove Featured Image From Tagged Posts

.tag-demo .post-image { 
display: none; 
}

Remove Featured Images Site Wide

.post-image { 
display: none; 
}

Non Genesis Themes

The code for removing featured images or post image thumbnails is different for non Genesis themes.

You can use all the code snippets above in your child themes style.css file however you will need to:

Replace .post-image with .wp-post-image

Example:

.home .wp-post-image { 
display: none; 
}

Other Options

Remove Featured Image From 1st Page of Paged Home Page Archive in Genesis
You can also use PHP code to add or remove post thumbnail images from displaying before or after your post titles.
Genesis: 3 Ways To Remove Featured Images Using PHP Code
Checkbox To Add or Remove Featured Image on Individual Posts or Pages

Comments

12 responses to “How To Remove Featured Images Using CSS Code”

John

August 1, 2014

Hi Brad,

I am using SimplePress theme. One of my pages is a Gallery Page that has to have a Featured Images of the posts. However, once you clicked on any pictures, the Post opens up that has a thumbnail and a full size Featured Image at the top. Could you help me not to show those “Featured Images”. Your feedback is truly and greatly appreciated.

Best Regards,

Log in to Reply
1. Brad Dalton
  
  August 1, 2014
  
  Hello John
  
  Would need to look at the code which does that.
  
  Maybe they are opening in an attachment page which you can change in the code.
  
  Log in to Reply
Abdul

July 10, 2014

Hi Brad,these are great set of code snippets and these are exactly what i was looking for but i have tried these and it’s not working for me.i am using generate child theme and on my home page some posts are still showing featured image.i also turned them off in genesis settings but nothing happened.how do i stop featured images to be shown on blog page?Thanks

Log in to Reply
1. Brad Dalton
  
  July 10, 2014
  
  Hello Abdul.
  
  Blog page, home page or front page?
  
  They are all different.
  
  Try this http://wpsites.net/web-design/genesis-3-ways-to-remove-featured-images-using-php-code/
  
  Log in to Reply
  1. Abdul
    
    July 11, 2014
    
    I was talking about the front page where all latest posts are shown.but your reply gave me a new idea and i tried to edit home.php myself.
    I removed the featured image size & grid image size from home.php and it worked.Thanks again for your reply.
    
    Log in to Reply
    1. Brad Dalton
      
      July 11, 2014
      
      From the grid loop?
      
      Good stuff!
      
      Log in to Reply
      1. Abdul
        
        July 13, 2014
        
        Here is the snippet of code that i edited in home.php.
        [code]
        ‘feature_image_size’ => ‘here was code i removed’,
        ‘feature_image_class’ => ‘alignleft post-image’,
        ‘feature_content_limit’ => 0,
        ‘grid_image_size’ => ‘here was code i removed’,
        [/code]
        as you can see the lines where i had removed code and it removed featured images from my front page.
      2. Brad Dalton
        
        July 13, 2014
        
        Thanks For sharing your code Abdul.
Nick Sheridan

November 29, 2013

Thank you so much for this! i have been searching for a CSS solution for “Remove Featured Image From One Category Archive Page” for SO long, but all I ever found was complex modifications to the functions loop or people who continually misunderstood the question. Not only have you fixed my problem but you’ve helped open up the whole world of CSS category-related conditions for me, so thank you!

Log in to Reply
1. Brad Dalton
  
  November 29, 2013
  
  No worries Nick.
  
  Log in to Reply
Oscar

November 9, 2013

Hey Brad, I am really grateful with this tip, it was really useful to remove some thumbnail images that I did not want to show in my home’s blog posts.

Thank you very much!

Log in to Reply
1. Brad Dalton
  
  November 9, 2013
  
  Thanks for the kind words Oscar.
  
  Log in to Reply