×

How to show Post Categories in Different colors

default single post image

Showing post categories in different colors can enhance the CTR (click through rate ) of your website but it is not implemented in the same way as we used to see this.

post categories in different colors

Most WordPress themes use <?php the_category();?>   to display all the listed categories but all of them appear in the same color scheme as we define in  its parent class /id .

You are requested to open your single.php file and replace <?php the_category();?>  tag with the following code.

[php]

<?php

$categories = get_the_category();

$separator = ‘ ‘;

$output = ”;

if($categories){

$i=1;

foreach($categories as $category) {

$output .= ‘<span class="colorcode-‘. $i%4 . ‘"><a  href="’.get_category_link( $category->term_id ).’" title="’ . esc_attr( sprintf( __( "View all posts in %s Category" ), $category->name ) ) . ‘">’.$category->cat_name.'</a></span>’.$separator; $i++;

}

echo trim($output, $separator);

}

?>

[/php]

NOTE : if you will see the above code properly then you will come to know that, I have divided my variable $i by 4 and the same number of color codes added in my style.css, if you want more color codes in your theme then just increase this number.

Now the main hack in this case is its  CSS( cascade style sheet). Open your style.css file and add as many as colors you want to use in your theme. I have divided all my colors in 4 so I am going to define four color for my site.

[css]

.colorcode-1 { background : teal; color: white;}

.colorcode-2 { background : red; color: white;}

.colorcode-3 { background : blue; color: white;}

.colorcode-4 { background : green; color: white;}

[/css]

That’s all. Thanks Rahul kashyap for asking this wonderful question.

rakesh

The Whole concept was developed by the man you are watching here. I am rakesh Kumar Serial Niche Blogger and SEO Enthusiast. find me onfacebookandon twitter.. Developed popular WordPress theme for Wallpapers and funny Image WordPress theme. Love SEO optimized WordPress theme Designing and Customization.

Latest posts by rakesh (see all)

Related Posts

10 thoughts on “How to show Post Categories in Different colors”

  1. Thank you, Rakesh!

    I would like to keep the same color for a specific category.
    For example, I would like to show “Astrology” always in teal – no matter if it’s the 1st, 2nd or third category shown.
    Is that possible? How could I do that?

    Thank you,

  2. Hi Rakesh,
    It looks very interesting idea to show categories in different colours…You have explained the method to do this in very simple way…

  3. Hi Rakesh,

    I was seeking for this stuff from long time. I want to change the color of categories. As it doesn’t seem that much effective. I want to add different color of each category. I hope this will work. We all know that appearance of a website is really important in every aspect. Bloggers should concentrate at the design of their blog. I had searched for many themes and finally got one but as I said I want to redesign it’s categories view.
    Thanks for sharing this post.

    ~Ravi

    1. Besides blog design they should also concentrate on the SEO issues of any designed theme. Most of the time developers are not designers and designers are not developers thus if you are able to use another programmers code inside your program then it is always a win-win situation for you. Thanks Ravi for adding your voice here. Keep in touch for such wonderful ideas. ;) ~rakesh kumar

  4. hello sir ji,

    thanks you have solved my problem. it is Awesome tutorial for me and now i will use this technique in my next theme :)

  5. Again Rakesh ji, bad at coding. Any WordPress plugin to do so? Seems pretty good idea to give a visual tweak.

    1. NO issue Anchit, If you want this hack in any of your WordPress theme, let me know i can do this for you. But as per my knowledge this is not available on the net as a standalone plugin, so till then we have to do it manually.

Leave a Reply

Your email address will not be published.

+-