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
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->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.