How to Remove Featured Image Thumbnails from Category and List Pages in WordPress

Sometimes you don’t want to show featured image thumbnails in your WordPress blog’s home page, category pages and other list pages. There can be many reasons for not wanting them. Mostly it’s because the image thumbnails make it look a bit weird or even ugly sometimes.

Sometimes you just want a cleaner and simplistic look for your home and list pages. Most of the WordPress themes do not have the option to remove those image thumbnails automatically. They do offer the option to remove the featured images from posts altogether. But that’s not really an option is it?

Here’s what I mean by the featured image thumbnails:

Featured Image Thumbnails

The thumbnails marked in red are the one that we want to be removed from the blog’s home page and list pages.

Procedure

Here’s how to remove the image thumbnails from your WordPress blog’s category and list pages:

  1. Right-click on the image thumbnail and select ‘Inspect’ in Google chrome browser.
    Inspect Image Thumbnail
  2. In the Chrome Developer Tools windows, under the Styles tab, look for the CSS classes of the thumbnail image. According to our blog’s CSS structure, the class is called .content-list .thumbnail-link img.
    Thumbnail CSS property
  3. Now we can simply hide those thumbnail images from displaying in out list pages by adding a custom CSS property to it. The property we need to add is display: none.
  4. To add this property without disturbing the main styles.css file of the blog, we can add it in the Appearance > Customize > Additional CSS section of the blog. This way the main styles.css will remain intact and you will achieve the desired results. Add the property like this:
    Thumbnail Display none

And that is it! Once you click Publish you should be able to see your home page and other list pages without the annoying thumbnail images.

Removed thumbnails list pages

It’s that simple. If you every need to show those thumbnails back again, simply remove the CSS property from the Additional CSS panel and the images will be back.

Spread the Word

You May Also Like

About the Author: Umair

A self-learned Javascript developer specializing in Frontend and Backend frameworks including React.js, Redux, Node.js, Express, MongoDB. He has extensive industry experience as a Tech Support lead and System Administrator. Currently learning Web3, (Solidity, Hardhat, Ethers.js) Smart contracts development, testing and auditing.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.