Very Easy WordPress Theme Hack: Show Category Images

Posted by jtpratt |04 Jan 08 | 52 comments

I’m going to show you how to add some simple PHP code to your WordPress template and make linked images appear instead of text for your categories in posts. All you need to know is simple PHP, some basic HTML, and how to make your own graphics.

**UPDATE** May 2008
As the last comment at the end of this page shows there is now a Category Icons WordPress Plugin you can download to install to manage your category icons right in your dashboard. If you prefer to hack your theme, the code below will work just fine! The cool thing about the plugin is that they give you ways to do one or multiple category icons, but also a methods for putting icons with your categories in the side bar as well! I’m always very grateful when a good plugin come along! Now back to the original post…

Have you ever wanted to hack WordPress and just make it do something you always wanted it to do? I think of things I want it to do all the time but don’t always have the hours to devote to finding the answer. I’ve searched for PHP code snippets for WordPress and tutorials and how-to articles as well and haven’t seen much that really helped me. Until today – when I read the tutorial page at WPDesigner today. I didn’t get exactly the code I needed, but pretty close. I just needed to hack it a bit to get it to do what I wanted.

First, this WordPress tutorial hack assumes a few things.

  1. You’ve modified your WordPress template code before
  2. You can modify simple PHP
  3. You can write simple HTML
  4. You can make your own graphics

First things first – here’s the code:


Posted in:

category_nicename; echo ""; echo "\"$catname\n"; } ?>

I hacked this code from this tutorial page on WPdesigner. The code they had was only good to display one category per post. I hacked it because my blogs all have posts assigned to multiple categories. Also, I wanted the images to all be linked so people can just click them and go right to that category page. Let’s look at the pieces of this code you might need to modify.

In line 1, you might want change “Posted in:” to alternate text like “Filed under:”, etc.

In line 5, if your permalink structure is different than the default, you may need to change /category/ to what you are using.

In line 8 change /wp-content/cat-icons/ to wherever you will be storing your category icons in your site.

In line 10, if you are using gif’s or jpg’s change .png to your graphic file format.

Now all you have to do is create one image for every category you have an place them in the folder you just created on the server. Make sure that the graphics are named exactly as your categories, and if your categories have multiple words just add a hyphen in between each word. That’s it! All you have to decide now is where you want these category icons to appear, before or after your post – and add them into the appropriate place. I placed mine just after the title of the post on my single post pages – as you can see at the top of the post on this page. You can hack this category icon code a hundred other ways to do what you want. I think in the future I’m going to use it to replace the text category links in my sidebar. The only caveat to this (and the code hack above) would be the fact that if you don’t have an image a text link will display (in FF, or broken image in IE). So – if you create new categories in the future, make sure you create a new image for each.

My Blogging Mistake for this post is that I didn’t decide to customize and hack my WordPress Theme before now to create my own layout. Do you have a question or a new way to hack up this wordpress category icon PHP code? Comments and post it now!


52 Responses

  • The Smorgasbord/ 08 Jan 08 @ 10:40 AM

    This was very easy to do – thanks for the code and the tip!

    The Smorgasbord’s last blog post..Convert Vinyl Records to MP3

  • Blogbuster: блоги, blogs, blogging, RSS, Wordpress, социальное/ 25 Jan 08 @ 4:49 AM

    25 неотстойных хаков для WordPress

    Динамическое слайдшоу в шапке — позволяет крутить картинки в шапке вашего блока, придает динамику; демоверсия.
    Пузырь комментариев — гр…

  • Blog Verde » 25 Hacks pra dinamizar o Wordpress/ 27 Jan 08 @ 2:48 PM

    [...] Imagens para categorias. Adiciona imagens para cada categoria do seu blog e são mostradas no post se você preferir. [...]

  • Wordpress Tutorials/Hacks « The house of software freeware/ 13 Mar 08 @ 1:51 AM

    [...] Show Category Images (Source: [...]

  • Mastering Your WordPress Theme Hacks and Techniques/ 16 Mar 08 @ 6:43 PM

    [...] 10)Show Category Images- How to add some simple PHP code to your WordPress template and make linked images appear instead of text for your categories in posts. [...]

  • letrodectus/ 17 Mar 08 @ 9:40 AM

    Great hack! thanks =

  • paidnetpedia.com/ 12 Apr 08 @ 12:18 PM

    [...] sticky”- When we need to have certain articles ’stay at the top’ longer than others. 10)Show Category Images- How to add some simple PHP code to your WordPress template and make linked images appear instead [...]

  • Submarine/ 15 Apr 08 @ 2:02 AM

    Hi

    here is a plugin that do the job :

    Category Icons Plugin.

  • Remkus/ 19 Apr 08 @ 10:47 AM

    That is a very nice Hack! I realize there is a plugin now, but I think I am going to just edit this in one of my projects. Thanks for writing it down!

  • What is Category Icons ? « Category Icons/ 21 Apr 08 @ 9:02 AM

    [...] : JTPRATT’s Blogging Mistakes ( here & here ), Performancing Helping Bloggers [...]

  • Erika/ 25 Jul 08 @ 12:02 PM

    I’m always a fan of wordpress hacks! I’m weary of plugins because of compatibility, but (almost) nothing can be incompatible with good ol’ fashioned semantic code. :)

    Erikas last blog post..Miami Web Design

  • Tom Sawyer/ 26 Jul 08 @ 1:39 PM

    This is some good information even if I’m getting it late. This is one of reasons our page is one of my tabs when I open Firefox.

    Tom Sawyers last blog post..Inspirational Professor Dies; Inspiration Continues

  • Submarine/ 30 Jul 08 @ 2:31 PM

    Hi !

    Here is the new address of Category Icons website :
    http://www.category-icons.com

    Submarines last blog post..What’s new in 2.0.6 ?

  • wisdom/ 20 Aug 08 @ 8:26 AM

    I have not heard about this plugin before, I will have to look into it.

  • Becky of Love Astrology/ 08 Oct 08 @ 12:29 PM

    Thanks for the tutorial. I’m going to give this a go, wish me luck!

    Becks x.

    Becky of Love Astrologys last blog post..The Gemini Horse

  • Tom/ 11 Oct 08 @ 6:48 PM

    Any idea how to make the category based images appear right where the date is.

    My website isn’t chronological and really doesn’t need dates for anything. I figured that having the category image right there would be a neat idea.

    Thanks in advance!

  • TechnoSamrat/ 11 Oct 08 @ 11:57 PM

    I’m using the Category Icons WordPress Plugin and it is very simple….

    TechnoSamrats last blog post..WebVideoCap – Download Videos From Google Video, YouTube, Yahoo Video, iFilm and Metacafe

  • admin/ 13 Oct 08 @ 8:22 AM

    @Tom – sure, all you have to do is hack your theme in Design mode, adding the code right where you want images to appear (and on each theme page you want to use them on)

  • Blogging for Profit/ 14 Oct 08 @ 8:57 PM

    OMG!
    I’ve missed so much useful tricks and tips how to hack my WP installation. Now, I want to collect this info for me to do as what you’ve done. I’ll be around, man

    Blogging for Profits last blog post..Decorating Home Office With Rugs

  • What is Category Icons ? | Category Icons/ 08 Jan 09 @ 3:42 AM

    [...] : JTPRATT’s Blogging Mistakes ( here & here ), Performancing Helping Bloggers [...]

  • xaer8/ 23 Jan 09 @ 10:55 AM

    Currently doesn’t really works in my site. Maybe i put it the wrong way. Anyway, thanks for giving such a useful article. Will figure it out until it works!

    xaer8s last blog post..JotForm – Easiest Form Builder

  • xaer8/ 23 Jan 09 @ 11:17 AM

    Just figured it out. You forgot to put “=”. That’s why its not working.

    xaer8s last blog post..JotForm – Easiest Form Builder

  • Supermance/ 10 Feb 09 @ 8:53 PM

    thx for this, im gonna try to customize my new blog now … =;;

    Supermances last blog post..6 Konsep Laptop Terbaru 2009

  • Vrbo/ 16 Feb 09 @ 6:50 PM

    Thanks again, after I install by WP and get it up and running I am coming back to this page to convert my links! Awesome information I found on this site will be back more often!

  • Wordpress Tricks and Hacks « Online Free Applications Software Tips Tools Wallpapers/ 22 Apr 09 @ 2:49 PM

    [...] Create and show categories image [...]

  • Blogger Rise/ 28 Apr 09 @ 3:26 AM

    thanks..Now I`m goint to make my own category images

    Blogger Rises last blog post..Easy SEO tips

  • Richard Brown/ 06 May 09 @ 6:56 AM

    Hi
    Thanks for the hack. What I was hoping for was something slightly more than this. I am having a go…. I was hoping to show categories as 75×75 boxes that were clickable. i.e. Under Projects we would have:
    Cat1 Cat2 Cat3 Cat4 (As links to child cats). When we go to child cats we get the same… then when we click on the child cat we display posts as images and links to full content.
    Any ideas?
    Rich

    Richard Browns last blog post..Transport news for Lostwithiel residents

  • Effective Classroom Management/ 29 May 09 @ 5:44 PM

    Very nice – they add a touch of class to your blog. Nothing like a few images to spruce things up a bit. Thanks for sharing this hack.

  • Business Gas Prices/ 03 Jun 09 @ 8:21 AM

    Very nice blog, Thanks for sharing this hack.

  • Phone Franchise/ 08 Jun 09 @ 7:27 AM

    Yes, images certainly bring a blog to life. What is it they say, “a picture tells a thousand words”.

  • reusable bags/ 04 Jul 09 @ 1:45 AM

    Excellent! I was always thinking that my posts are missing something. Now, they will be more colourful and pleasant to read. I am really thankful.

  • Marc/ 04 Jul 09 @ 4:43 PM

    How can I got about changing this to work for TAGS instead of categories?

    Thanks!

  • Driver Genius/ 21 Jul 09 @ 6:58 AM

    Just be careful when you upgrade your blog. Hacks to the code are difficult to maintain!
    .-= Driver Genius´s last blog ..Driver Genius – Professional Driver Management =-.

  • admin/ 22 Jul 09 @ 10:33 AM

    Actually that’s not true at all – hacks to code are made in your theme files and can be kept for YEARS with no problems at all many times. When you upgrade WordPress it upgrades core files – not your theme files.

  • Conveyancing/ 31 Aug 09 @ 3:14 AM

    using the Category Icons WordPress Plugin is very simple I salute you sir for this great tool!

  • Passive Income Blog/ 06 Sep 09 @ 11:02 AM

    Indeed a very useful post, and a very useful hack, really.
    Hope to keep reading useful hacks like this… showing an image can be a tremendous plus!
    .-= Passive Income Blog´s last undefined ..If you register your site for free at =-.

  • Pokemon Trading Cards/ 07 Sep 09 @ 10:51 PM

    Thanks for your hack. I will implement this on few of my blog to see how is working.
    Thanks again.
    .-= Pokemon Trading Cards´s last blog ..Pokemon Trading Cards – The Base Set 2 =-.

  • Auto Motor Car/ 09 Sep 09 @ 8:57 AM

    emm, very simple, no need to learn php deeply :)
    .-= Auto Motor Car´s last blog ..Subaru Exiga MPV CBU To Launch in Indonesia =-.

  • Mike/ 12 Sep 09 @ 4:03 AM

    I like this hack..I gave up WP hacks sometime ago since I crashed my site with the stroke of a key…Amazing how much you can unlesh or destroy!

    Mike.
    .-= Mike´s last blog ..Scissor Lift Table Guarding For MFG Plants =-.

  • Teen Blogger/ 30 Oct 09 @ 7:22 PM

    Great Post.

    I think this post will help everyone on how to do this hack. Just be careful not to mess anything up

    keep up good work.

  • inAm/ 13 Nov 09 @ 1:13 AM

    I was looking for this category image plugin. Thanks :)

  • Ryian Crusher/ 22 Nov 09 @ 6:47 AM

    This post should allow most anyone to perform this hack now. I too would recommend not to mess it up!

    Ryian
    .-= Ryian Crusher´s last blog ..Light Bulb Crusher Machine =-.

  • Quick Home Sale/ 27 Nov 09 @ 4:10 AM

    Can I ask a quick question?

    This post is about having images as links rather than text… Does Google like this methodology for building links – or to put it another way – does Google prefer this method?

    Cheers in advance, James
    .-= Quick Home Sale´s last blog ..An independent review of the Find a Property Website =-.

  • admin/ 29 Nov 09 @ 9:02 PM

    It doesn’t matter – it’s still a link

  • music town/ 28 Dec 09 @ 12:24 AM

    I am having a go…. I was hoping to show categories as 75×75 boxes that were clickable. i.e. Under Projects we would have:
    Cat1 Cat2 Cat3 Cat4 (As links to child cats). When we go to child cats we get the same… then when we click on the child cat we display posts as images and links to full content.
    .-= music town´s last blog ..Accomplish all the glorifying intentions related to music =-.

  • Ian@ Loans/ 05 Jan 10 @ 5:21 AM

    Hi and thanks for sharing this useful info… Sometimes I wonder how in the world wordpress came to big the blogging standard worldwide… are there other platform comparable to wordpress anyway?
    .-= Ian@ Loans´s last blog ..4 Reasons to Consolidate your Student Loans On or Before July 1st 2006 =-.

  • horde levelling guide/ 11 Jan 10 @ 3:43 PM

    This simple PHP code has helped me a lot. This is not difficult to do. Thanks for the step by step guide to help me out here!

  • Bixby Homes/ 29 Jan 10 @ 5:36 AM

    Thanks for the detailed explanation. I know there is a plugin available ready made with wordpress now, but I still would like to go by your instructions. That way I can tweak the settings a little more and finally can brag about my PHP skills. Thanks for your kind help. This definitely helps lots of webmasters.

    Regards,
    Alan Rosson
    .-= Bixby Homes´s last blog ..Claremore Braces for Major Ice Storm =-.

  • Javi A./ 01 Feb 10 @ 4:22 AM

    Thanx a lot for this hack !!!
    I’m gonna try it in some hours.
    Your code is the only thing I need or I need to know anything else?

    Thanx again !

  • blu-ray ripper/ 26 Feb 10 @ 12:49 AM

    why use a hack? they already have a plugin for this

    -Andy
    .-= blu-ray ripper´s last blog ..Blu Ray Ripper by AVCWare =-.

  • admin/ 26 Feb 10 @ 1:10 PM

    because the more plugins you use, the slower your blog is.

  • Dennis/ 21 Mar 10 @ 1:47 PM

    Great Tip. I used it on one of my company blogs and it looks great. I’m adding you to my RSS feed ;)
    .-= Dennis´s last blog ..Industrial Curtain Track =-.

You must be logged in to post a comment.