This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
By default, there are only two options of note for indicating the category to which a given post belongs. Nothing, or a text link in the post meta byline.
Why Add Category Icons to Individual (Single) Posts?
Adding a category icon, an image that visually shows the site visitor the category assigned to a single post, can increase time the visitor spends reading your site contents, and is also likely to boost the number of visited URIs per user session.
Also, a category icon looks nice. A text link noting the category is very practical. But an image icon is a design element as well as informative — or it can be.
Adding categorical icons to posts works very well on sites that are not excessively busy with other visuals such as ad blocks or social media on every line.
To clarify what is meant by a category icon associated to a single post, here’s an image showing two single posts in two different categories — apples and pears — where their unique category icons demonstrate the category.
If you use categories to correlate content types and/or related themes, your visitors will benefit from a swift, visual understanding of each post’s general scope.
Examples in the User Guide are relatively simple in the goal of offering basic ideas and starting points. However, your own ideas for a “post assigned to category” image or icon can be far more ornate, larger, smaller, “clickable” — nearly anything you can imagine.
Consider a site with podcasts, videos, interviews, reviews… you can probably imagine category icons on the home page making a statement quickly.
How to Add the Category Icons / Images
First, you need images for each category.
Your category images can be whatever size you feel looks best, and can be realistic photographs, scribbles, icons, or whatever ties your blog together.
The two images below represent a hypothetical situation where we have one category for apples, and another category for pears.
As a general rule, use images that are the same size and resolution (like these).
Each image for your categories should be uploaded to your Thesis /custom/images folder, making later css work a simple process.
In our example, we’ll name our images “post-category-apple.png” and “post-category-pear.png” — to add more images for more categories, extend the naming conventions and upload more images to be used for various categories.
Then we’ll use the category’s custom body class, or part of it, as is explained in the CSS section below.
Category-Specific Icons on Full / Feature Posts
To get our “this image represents this category” routine working, we need a PHP function. In effect, we’re adding a division or “div” that has a class equal to the “nice name” of each category on your site.
Even if you do not have an image assigned on the CSS side ready for every category right away, this lets you easily add category images later.
In the PHP below, the function is limited to the front page (by default, this is the home page) of the site. Keeping it simple, all posts on the front page are “asked” which category they belong to. This code presumes one post belongs to one category, a recommended architecture.
For the PHP side, add this to custom_functions.php
function category_icon_near_post_title(){
if (is_front_page()) { ?>
<div class="cat-post-icons <?php
global $post;
$mycategoryicons = get_the_category($post->ID);
echo $mycategoryicons[0]->category_nicename;
?>"></div>
<?php
}
}
add_action('thesis_hook_after_headline','category_icon_near_post_title');
Now your front page’s posts will be ready to accept an image icon for their respective categories.
Next is assigning the images — in the example, our apple and pear — over on the CSS side. Because categories get unique identifiers, you’ll need to determine your category “nice name” before the category image will be displayed for your posts.
Nearly all browsers have a “view source” option, and that or other tools such as Firebug can be used to locate the classes needed.
This process is covered in more detail in the User Guide entry on custom classes. In short, visit a category page as a visitor would, view source, note the custom body class, and the “nice name” will subtract “cat_” from the custom body class. In other words, you can visit a category page, view source, and look for code such as this:
<body class="custom cat_the-name">
Subtracting the “cat_” leaves us with “the-name” to use as our class selector. Repeat the process for each category — this goes quickly as you get the hang of it.
With your category classes identified, images can now be associated with each post’s category. Change the “FIRST-unique-class-here” text below to your identified category “nice name” and continue this for the “SECOND-unique-class-here” for your second category, with new entries for however many categories you wish to cover.
Add the final result to custom.css
.custom .cat-post-icons {
height:75px; width:75px; float:right; margin:0.5em;
}
.custom .cat-post-icons.FIRST-unique-class-here {
background: url('images/post-category-apple.png') 0 0 no-repeat;
}
.custom .cat-post-icons.SECOND-unique-class-here {
background: url('images/post-category-pear.png') 0 0 no-repeat;
}
This code, when using your own category “nice name” classes, will work for all full or “feature” posts and post excerpts on the front page, as shown below.
Category-Specific Icons on Teasers
What about teasers? No problem. You can make category “this post belongs to” images for your teasers, too.
As a bonus, you can even use different images for the same category in teasers versus full posts — those familiar with teasers will recognize that a smaller category icon or image may look nicer on teasers.
Getting your front page teasers ready for category images leaves your custom.css identical to the previous snippet (in gray above).
The PHP function is nearly the same also, needing only a different function name and hook.
To add category icons for posts to your teasers, add this to custom_functions.php
function category_icons_in_teasers(){
if (is_front_page()) { ?>
<div class="cat-post-icons <?php
global $post;
$mycategoryicons = get_the_category($post->ID);
echo $mycategoryicons[0]->category_nicename;
?>"></div>
<?php
}
}
add_action('thesis_hook_after_teaser_headline','category_icons_in_teasers');
Your teasers should now have “the post’s category” images like so:
As is hinted here, you can choose category post icons for various sections within your site — areas beyond the front page, such as search results — by using appropriate conditional statements.
You can add category association images to full/feature posts only, to teasers only, or to both.
And if you prefer different or differently-sized category images for full posts versus teasers, keep reading!
Different Category-Specific Icons on Teasers vs. Full Posts
Want to use different images for teasers that are in the same category as other full/feature posts? Adding additional lines of CSS — plus changing the image dimensions and calling the new image URLs for teasers (only) gets the job done.
Our goal, comparing this post’s category relationship icon with our previous examples, is to get a look such as this:
The following presumes you’ve implemented all the steps and code prior to this point.
For different category images on teasers, add this to custom.css
.custom .teaser .cat-post-icons {
height:36px; width:36px; float:right; margin:0.5em;
}
.custom .teaser .cat-post-icons.FIRST-unique-class-here {
background: url('images/post-category-apple-small.png') 0 0 no-repeat;
}
.custom .teaser .cat-post-icons.SECOND-unique-class-here {
background: url('images/post-category-pear-small.png') 0 0 no-repeat;
}
Note the added class of .teaser and the changed (36×36 shown here) image dimensions.
This code allows different image URLs and sizes as a post moves over time from “full feature post” to a teaser.
With the various options for titles, byline meta, and ordering of Thesis output, note that your css may need adjusted slightly to get your categorical images aligned to suit your site’s specific needs.
Add your own creativity, and your “assigned category” post icons can just about anything!