Very Easy Wordpress Theme Hack: Show Category Images
13,696 views -Posted in:
13,696 views
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.
- You’ve modified your Wordpress template code before
- You can modify simple PHP
- You can write simple HTML
- You can make your own graphics
First things first - here’s the code:
<h3><b>Posted in:</b></h3>
<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
echo "<a href\"/category/";
echo $catname;
echo "/\">";
echo "<img src\"/wp-content/cat-icons/";
echo $catname;
echo ".png\" alt=\"$catname category image\" border=\"0\" /></a>\n";
}
?><br />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!
January 8th, 2008 at 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
January 24th, 2008 at 9:47 pm
[...] Imágenes para las categorÃas [...]
January 25th, 2008 at 4:49 am
25 неотÑтойных хаков Ð´Ð»Ñ WordPress
ДинамичеÑкое Ñлайдшоу в шапке — позволÑет крутить картинки в шапке вашего блока, придает динамику; демоверÑиÑ.
Пузырь комментариев — гр…
January 25th, 2008 at 8:52 am
[...] Imagens para categorias. Adiciona imagens para cada categoria do seu blog e são mostradas no post se você preferir. [...]
January 27th, 2008 at 2:48 pm
[...] Imagens para categorias. Adiciona imagens para cada categoria do seu blog e são mostradas no post se você preferir. [...]
March 9th, 2008 at 12:13 am
[...] Show Category Images (Source: [...]
March 13th, 2008 at 12:40 am
[...] Show Category Images (Source: [...]
March 13th, 2008 at 1:51 am
[...] Show Category Images (Source: [...]
March 16th, 2008 at 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. [...]
March 17th, 2008 at 9:40 am
Great hack! thanks
March 23rd, 2008 at 7:40 am
[...] Show Category Images (Source: [...]
April 12th, 2008 at 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 [...]
April 15th, 2008 at 2:02 am
Hi
here is a plugin that do the job :
Category Icons Plugin.
April 19th, 2008 at 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!
April 21st, 2008 at 9:02 am
[...] : JTPRATT’s Blogging Mistakes ( here & here ), Performancing Helping Bloggers [...]
April 27th, 2008 at 9:50 am
[...] 84. No More CSS Hacks. 85. Create a Dynamic Sticky. 86. Styling Individual Posts Using the_ID. 87. Show Category Images. 88. Separate WordPress Comments and Trackbacks. 89. Customize your WordPress Login. 90. Date Image [...]
May 16th, 2008 at 2:26 am
[...] 84. No More CSS Hacks 85. Create a Dynamic Sticky 86. Styling Individual Posts Using the_ID 87. Show Category Images 88. Separate WordPress Comments and Trackbacks 89. Customize your WordPress Login 90. Date Image [...]
June 6th, 2008 at 4:38 am
[...] Hacks84. No More CSS Hacks85. Create a Dynamic Sticky86. Styling Individual Posts Using the_ID87. Show Category Images88. Separate WordPress Comments and Trackbacks89. Customize your WordPress Login90. Date Image [...]
June 15th, 2008 at 3:52 am
[...] Create and show categories image [...]
July 25th, 2008 at 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
July 26th, 2008 at 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
July 30th, 2008 at 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 ?
August 20th, 2008 at 8:26 am
I have not heard about this plugin before, I will have to look into it.
October 8th, 2008 at 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
October 11th, 2008 at 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!
October 11th, 2008 at 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
October 13th, 2008 at 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)
October 14th, 2008 at 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