Use a Default Category Post Thumbnail

In this tutorial I’ll explain how to set the post to use an excerpt, and display a left aligned featured image thumbnail that will display an image based on the category of the post in Twenty Twelve theme.

What I’ve done with this site is used a bit of code that selects an image based on the post category and displays it as the featured image. I can still set one if I want, but I don’t have to. Now one of four images are selected according to the category of the post as the post thumbnail.

**Issues – this works fine for my site, but there is an issue I noticed that may affect yours. If there’s an image at the top of the post content, the thumbnail will not display for some reason, it will however display a manually added featured image as it does by default.

Use a Child Theme

Start off by creating a child theme, if you add this to Twenty Twelve it will be overwritten in an update. You can download a Blank Twenty Twelve Child Theme here.

Images and Category IDs

The code we will be using rely on the image using the same name as the category ID. To find the category ID visit Posts > Categories, hover over any category and look at the bottom of your browser, you should see a URL and within that URL something similar to ID=123, that 123 is your ID. Make a note of each ID number and what category it’s for.

As an example lets say you have a “Tutorial” category and the ID number is 195. Rename the image you want to use for that category to 195.png. Do the same for all categories and images. Images sizes can be whatever you like, I use 140x140px. Remember the size, you’ll need it for later on in this tutorial.

Here are the images I’ve used

When you’re done, put them in a folder (EX: images) and upload the folder to your child theme directory.

Editing the Template

The next step is to add the code to the child theme. Copy content.php from Twenty Twelve to your child theme directory and open it.

Find the line around line 33 that reads

change it to

This will tell your theme to display excerpts instead of a full post. Most people don’t set featured images as large as Twenty Twelves default unless it’s for a photography site or similar where the images would be unique anyways.

Add the Featured Image

In content.php around line 34, just under the code you added earlier, look for

Directly below it add

What this code adds a css class .excerpt-thumb, checks if there’s a post thumbnail already, if there is it displays it, if there isn’t it checks the category the post is in, then displays an image in the directory you’ve selected that matches the category ID.

Next we have to remove the large featured image that is displayed by Twenty Twelve.

In content.php around line 18 find the line that reads

Remove this line, save and close content.php.

Add Image Size to Functions

The last thing we need to do is add a function that will create the image size in case you do want to use your own featured image. I use 140×140 px, you can use whatever size you like, it should match the size of your category images you made earlier.

Create a file and name it functions.php and add this to it.

Save and close functions.php

Refresh your site and you should see your default post thumbnails next to each post displayed as an excerpt.

If the images are not displaying here’s a few things to check first before posting a comment.

  • Check to make sure the image path is correct, the path used in the tutorial is /images.
  • Check to make sure the category IDs are correct.
  • Check to make sure the image names match the category IDs.
  • If you’re using .jpg change the code we added for the thumbnails from .png to .jpg

Let me know how it worked out for you by leaving a comment.

10 thoughts on “Use a Default Category Post Thumbnail

  1. Fermus

    Perfectly explained and very handy info, suggest you remove the categories/ “ in the code <img class="alignleft" src="/images/categories/cat_ID; ?>.png” /> to make it work though! Cheers!

    1. Zeaks

      Post author

      Glad you found it useful. The categories folder is totally optional, I like to keep my file system organized so I placed my images within the category folder.

      1. Fermus

        Yeh, me too, just wanted to save u some time when people start questioning why the images doesn’t show.

  2. hybnost

    Thank you for the valuable info.

    I stuck at category aspect
    how you change that into excerpts from full posts ?

    when we visit

    1. Zeaks

      Post author

      Hi Hybnost, you can make it display excerpts for categories by changing this section of the tutorial to include the is_category() conditional like this.

  3. Rachel Krusic

    Sorry to be one of the people who can not get the image to display but i’m new to programming blogs. I’m building this blog for my niece and she will be using the wordpress interface to upload her images so i don’t know how she will be able to organize the images into different folders like i think you are doing.

    I have the excerpt part working and the resized images are created fine. I have altered my template so that now all the images go into this folder blog/images/categories/

    I have three posts for one category now and all of the thumbnail images are not showing and when i right click to see the image path the code is for all three posts. If the image were displaying it would be the same image for every post.

    I’m not sure why we are using the category id for all the image names since i will have different posts with different images for each category. I don’t want to display the same image for all my posts in the same category. Is there a way to get the images to display using just the real image name?

    Sorry I just don’t understand all of this yet….any help is greatly appreciated.

    1. Zeaks

      Post author

      Hi Rachel, the point of this is to display a thumbnail related to the category the post is in. If that’s not what you want, you might prefer to choose what image is displayed as the excerpt thumbnail instead. This might be what you’re looking for mainly the part that adds the featured image.

      Once you do that, you can select an image for each post instead of an image for each category.


Leave a Reply to Fermus Cancel reply