How to make the category of your post stand out more

by krike in Tutorials / wordpress on 03 Sep 2009


In this tutorial I will teach you how to make the category of your posts in wordpress stand out more using ribbons.

Our goal

example_ivdesigns

www.iv-designs.org

Let’s get started

First of all you must design your ribbons, if you don’t have time or don’t want to waste time designing ribbons you can always purchase the Web ribbon set at graphicriver.net.

When saving your ribbons make sure that u save them using the name of the category. so if you created a category Icons make sure to save it as Icons_ribbon.png (case sensitive !!).

When finished, upload all the ribbons to the images map of your wordpress theme.

The code

open your index.php and find the openingstag for your post (this could be a partial search!)

The theme at iv-designs.org starts with

<div id="site-<?php the_ID(); ?>">

and in the wordpress default theme

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

After this line add

<?php
$cat = get_the_category($post->ID);
$category = $cat[0]->cat_name;
?>
<div><img src="<?php echo bloginfo('url'); ?>/wp-content/themes/YOUR_THEME/images/<?php echo $category; ?>_ribbon.png" alt="" /></div>

Let’s have a look at this code, first we grab the category of that particular post ($post->ID). This will return an array and it’s the name we want ($cat[0]->cat_name)which we then store in the variable $category.

We then create a new div with class catthumb, and open the image tag with the complete path to the images map of our theme (make sure to replace YOUR_THEME with name of your theme). we then use the $category variable (which contains the name of the category where the post was posted in) to link to the correct image.

the only thing left to do is style it to position the ribbon where we want
add this to your style.css

.catthumb
{
height:115px;
left:1px;
position:absolute;
top:1px;
width:116px;
}

You can always set left and top higher or lower to fit your needs.

Things to keep in mind

  • make sure the height and width is the same as your image.
  • The post div should have (in the css) position: relative; otherwise your ribbon will be positioned absolutely according to your document instead of your post div.

Conclusion!

I hope you learned how to make the category of your post stand out more and how to manipulate your url with variables to make it more dynamic and link to the correct image instead of using a switch to go through all your categories.

Written by krike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisl nisl. Ut interdum libero vitae quam ultricies et lacinia elit aliquet. Praesent tincidunt, sem tempus feugiat feugiat, turpis tellus scelerisque erat, sit amet feugiat neque arcu ac lectus. Sed at mi et elit interdum scelerisque vitae eu felis.

krike has written 77 posts.

  • Chris

    Thanks! i use this now on my website (im working localhost at the moment, when my theme is finished u can see it on my website)