Tutorial: Wordpress Posts in Different Categories with different Themes

So no simple layout this week, but I thought I might start showing some goodies which I have in many of my designs which some of you might be wondering how it is done, and how you too can put it into your page.

So while if you are following the tutorials for the quick and easy HTML lessons which make no sense but somehow you have been learning from them, then you will have to wait a week for the simple layout tutorial, but for now if you are a little bit ahead of the class, we will learn how to do the coloured categories.

So I think it should be noted firstly before we go all crazy with the design and code of things, you will need the following in your functions.php

function category_id_class($classes) {

global $post;

foreach((get_the_category($post->ID)) as $category)

$classes[] = $category->category_nicename;

return $classes;

}

add_filter(‘post_class’, ‘category_id_class’);

add_filter(‘body_class’, ‘category_id_class’);

So what this does it identifies what the category slug is then gives it an id which allows us to retrieve it using CSS and of course HTML and be able to customize the end product.

Now I have been using this as a technique to get the categories ID to give it a different appearance for posts depending on the categories. However it can be used for many other things. If you use it for something different, I would like to see what your take was on it.

Now in the index.php or home.php or whatever section your posts are generated in I’ve got:

<div class=”title-<?php the_ID(); ?>” <?php post_class(category-X); ?>></div>

Per element which uses this technique. With title in this case been what the base ID of the element is called. I use it for it is easier for naming conventions, however if you want you can just have the class as the category. Also I’m not too sure what the other PHP does, I think it calls the function. It’s been awhile since I initially used this technique, so I’m not too sure what it does. If any readers stumble upon what it does, or if it’s part of something else, just let me know in the comments section.

Now for the title section I have the following CSS tag.

.CATEGORYNAMEHERE{

}

If you wish you can add a range of elements such as background colour, padding, font, essentially the usual suspects.

Also remember to define the hyperlinks in the CSS at some stage as well.