Adding Default Category Thumbnails to Boilerplate 3.0

Now that I’m more or less settled into the new WordPress Theme, it’s time to start documenting the changes! :)

This time around I’m building the modifications the right way and using a Child Theme to tweak the main theme: Boilerplate 3.0. (If you’re looking for ways to tweak thumbnails in Mystique, I have a post on how to hack the old version 2.4.2 here.)

The following code will add a thumbnail of the post’s featured image or the default category icon. I only use it on the front page, but it can be used with any of the loops.

Always make a copy of the file before you start editing so that you can replace it if something goes wrong!

Step 1 – Create the Category Thumbnails

The code uses the category_nicename to look up the default icons, so you will need to create a 64×64 jpg icon for each top level category.

Example: category_nicename = “custom-models-com” then category icon = “custom-models-com.jpg”

I stored my icons in the wordpress/wp-content/icons/ folder, but you can stick them anywhere you’d like– just remember to change the filepath in the code.

Step 2 – Thumbnail Code

The code below will use the Featured Image as the thumbnail, but if that doesn’t exist it will pull the default category icon that you created in Step 1. Below is the entire code, I’ll break it out step-by-step afterword.

1
2
3
4
5
6
7
8
9
10
11
12
< ?php
	if (has_post_thumbnail()) {
		the_post_thumbnail();
	} else { 
		$category = get_the_category();
		$print_string = '<img width="64" height="64" src="http://www.martha.net/wordpress/wp-content/icons/';
		$print_string = $print_string.$category[0]->category_nicename;
		$print_string = $print_string.'.jpg" class="attachment-post-thumbnail wp-post-image" alt="';
		$print_string = $print_string.$category[0]->cat_name.'" title="'.$category[0]->cat_name.'">';
		echo $print_string;
  	}
?>

In Lines 1-3 has_post_thumbnail checks to see if the post has a Featured Image. If so it uses the_post_thumbnail to create the HTML code.

This is what the code that is created by the_post_thumbnail looks like:

<img width="64" height="64" src="http://www.martha.net/wordpress/wp-content/uploads/2011/04/The-Wolves-We-Are-Icon-64x64.jpg" class="attachment-post-thumbnail wp-post-image" alt="The Wolves We Are" title="The Wolves We Are - Icon" />

If there is no Featured Image, then the code creates the HTML as follows in Lines 5-11, based off the example given by the_post_thumbnail.

		$category = get_the_category();

get_the_category pulls the information about the category for the current post.

		$print_string = '<img width="64" height="64" src="http://www.martha.net/wordpress/wp-content/icons/';
 
</pre/>
 
The first line sets up the IMG tag with the WIDTH, HEIGHT, and the path to the image file.
		$print_string = $print_string.$category[0]->category_nicename;

The next line adds the category_nicename for the current post.

		$print_string = $print_string.'.jpg" class="attachment-post-thumbnail wp-post-image" alt="';

This line adds the .jpg to the image name and then adds the class and begins the ALT value.

		$print_string = $print_string.$category[0]->cat_name.'" title="'.$category[0]->cat_name.'">';

This line fills in the ALT and TITLE values with the cat_name and then closes out the IMG tag.

Thus at the end, $print_string equals

 

Step 3 – Where to Put It

I have the thumbnails in the index loop only, so I created a copy of the Boilerplate file loop.php and copied it into the Child Theme folder as loop-index.php.

I inserted the above code after the in-between these two lines, so that it comes right after the ARTICLE tag opens, but before the ENTRY-TITLE.

<article id="post-<?php the_ID(); ?>" < ?php post_class(); ?>>
 
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="< ?php printf( esc_attr__( 'Permalink to %s', 'boilerplate' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">< ?php the_title(); ?></a></h2>
</article>

Step 4 – How to Style It

Add img.wp-post-image to your style.css (Stylesheet) file under the Childtheme in order to modify its CSS.

I’ve only got the basics set here, but you can add any modifier that you would to a normal img. If you are having problems with the placements, sometimes it helps to a border to the various elements so that you know where each piece falls.

img.wp-post-image{
 float:left;
 padding:2px;
 margin:2px;
}

Code Limitations

The size of the thumbnails is hardcoded and to be more useful it should probably be determined within the code. The thumbnails aren’t linked and there’s no way to change the category thumbnails from within the dashboard.

At some point I’ll have to go back and write a proper plug-in to manage these, but for now it works and that’s all I’m looking for! ;)

Posts From this Day in Ages Past

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge