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

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

change it to

<?php if ( is_search() || is_home() ) : // Display Excerpts for Search and Homepage ?>

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

<div class="entry-summary">

Directly below it add

<!-- Conditional thumbnail for categories -->
<div class="excerpt-thumb">
	<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())) : ?>
		<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
		<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>
		</a>
	<?php else :?>
	<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
		<img class="alignleft" src="<?php echo get_stylesheet_directory_uri(); ?>/images/categories/<?php $category = get_the_category(); echo $category[0]->cat_ID; ?>.png" />
	</a>
	<?php endif;?>
</div>

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

<?php the_post_thumbnail(); ?>

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.

<?php

// Add 140x140 image size 
add_image_size('excerpt-thumbnail', 140, 140, true);

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.

21 thoughts on “Use a Default Category Post Thumbnail

    1. Zeaks

      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.

      < ?php if ( is_search() || is_home() || is_category() || is_archive()  ) : // Display Excerpts for Search and Homepage ?>
  1. 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

      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 http://zeaks.org/tutorials/display-excerpts-in-twenty-twelve-theme/ 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.

  2. Alejandro

    And if I need to use ramdom images to a specific category, what line I have to introduce to ramdom images from a folder? For ex.: health1.png health2.png health3.png etc.. Thank you!

    1. MUshir

      so I need to remove featured posts thumbnails? OK got it! one more suggestion how about editing the code to get thumbnails by category slug I think it will be more easy and the images name will make more sense like this :

      
      
  3. Zeaks

    Use pre instead of code to post code.I haven’t tried it like that but if it works for you great. I found it easy to rename the images to the related categories myself.

    I don’t actually use this for my site anymore, I removed featured images completely in an effort to speed up this website.

  4. MUshir

    OK here it goes:

    <a href="” title=”” rel=”bookmark”>

    <a href="” title=”” rel=”bookmark”>
    <img class="alignleft" src="/images/slug; ?>.png” />

    now rename thumbnails by category slug and you are ready to go!

  5. Zeaks

    Maybe visitors cannot use pre tags, you can link your code from pastebin.com and I see what you’re saying now, (had to look over the tutorial code before I understood) your way does make it easier. Thanks for sharing!

  6. Hier

    That’s a really useful tutorial. By the way I like that you found a way to monetize your website by selling Wp-Themes. I hope your tutorial does not lead to issues due to file permissions. Anyways it is helpful to avoid having no thumbnail if the author forgets to set one.

Leave a Comment

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

*
*