Possible to replace category names with a designated image or icon?

  • Author
  • #1346120

    For my blog (thestyle theme), I have various categories based on locations (Italy, Germany, Japan etc). I would like to replace the text word of the category with a photo and text– so instead of just clicking on a text category “Italy” the user could click on an image I select representing Italy (with a title as well).
    Is there any way to do this?

    The blog I need help with is souvenirfinder.com.



    Yes. You’d do this in the Text editor of each post and manually add the image for each category or tag, manually add the link as well, and use Custom CSS to hide the tags and categories that automatically display on your theme.


    I’m very new here and not technically oriented so forgive me if I am not being clear.
    To clarify, I only need to change the category words to category images within the main category area (currently in the sidebar)– I don’t need to do so on individual posts. I just want it to look nicer for the user to select a pretty picture than just a text word.

    This is a separate question, but is it also possible to move the main category area from the side bar to under the header? Again, it would be more visually pleasing to have little photos representing categories right under the header.

    Also, I have no understanding of how CSS works at all– the best I can hope for is if someone has something like this ready and I can copy and paste it. Thanks for any tips!



    You can follow my instructions and create a Text Widget with the icons that link to the categories and put that in your sidebar. But now you say you want a widget but NOT in the sidebar?

    You could do it if you had the custom design upgrade and a knowledge of CSS editing.

    You would in that case NOT use the existing Category widget, because it would be redundant. You can’t configure the Category widget to show images.


    To replace text of a category link in the sidebar with an image, you can use a CSS image replacement technique. For each image you want to replace, you’ll need:

    * Image URL
    * to figure out the class name for the parent element

    In the categories widget, each list item has a class name in the HTML that is unique. Since you want to use a different image for each list item in this scenario, then you will need to lookup the class name for each one in the HTML source. Right-click on one of the list items and select the “Inspect Element” option. That should pull up a panel that shows you the HTML for what you clicked on and all of the CSS that applies to it on the right. Here is an example from your site:

    <li class="cat-item cat-item-2620 current-cat"><a href="http://souvenirfinder.com/category/portugal/" title="View all posts filed under Portugal">Portugal</a>

    See how it says “cat-item-2620” in the class list? That “cat-item-2620” name with a dot in front of it can be used to target just that part of the HTML with CSS.

    Here is an example of the image replacement technique. I used a WordPress logo in this example and the class for Portugal:

    .cat-item-2620 a {
    	display: block;
    	text-align: left;
    	text-indent: -9999px;
    	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
    	width: 32px;
    	height: 32px;

    Update the url() value to whatever image you’d like to use. make sure the image is small enough to fit.

    Repeat the steps above for each list item you want to replace with an image. So basically, copy the example above and replace the “.cat-item-####” and the url() values for each list item and at each block of CSS to your Appearance → Themes → Customize → CSS panel.


    This is a separate question, but is it also possible to move the main category area from the side bar to under the header?

    Because of the way TheStyle theme is coded, this is actually not a simple task. I tried to figure it out using absolute positioning, but I couldn’t get sidebar to stay put and still move one widget from it all the way over to the left. Here’s what I came up with so far:

    #content {
    	padding-top: 130px;
    #sidebar {
    	position: static !important;
    #categories-3 {
    	position: absolute;
    	left: 0;
    	top: 0;
    	max-width: 70%;
    #categories-3 ul {
    	padding-right: 35px;
    #categories-3 ul li {
    	background: none;
    	float: left;

    I think it might work better if you put the categories which is in the footer instead of the sidebar. If you want to give that a try and reply back here, I will take another look at CSS to see if it easier to work with that way.


    Thanks so much for the detailed response. I will play around with it this weekend and see how it goes, and report back here on my results. I am not 100% tied to putting the categories under the header, again, I need to see how it will look. So much trial and error!

    I am not necessarily staying with the TheStyle template– as a beginner, I am not sure which template will work best for me just yet. I am also considering switching to simfo or suburbia.


    I am not necessarily staying with the TheStyle template– as a beginner, I am not sure which template will work best for me just yet. I am also considering switching to simfo or suburbia.

    Ah, cool! Keep in mind that CSS is theme-specific. So when you switch, the previous CSS goes into a revision that you can look up later if you need to and then if you wanted to make modifications to new theme you picked, you would need to write new CSS rules.

    I’m partial to Suburbia. I think it looks slick. If you like image grids, you might also like Hatch. Check out the examples listed at the bottom of http://theme.wordpress.com/themes/hatch/



    This is a separate question, but is it also possible to move the main category area from the side bar to under the header?

    You don’t have to literally move it: you remove the Categories widget and create a custom top menu instead.


    That’s a great idea! @franciskristin, the CSS would be different if you wanted to do that, but I bet it’d work better than the widget is working in this particular theme. Maybe add one category link as a test?


    Thanks for all the replies. I had no idea there were so many possibilities, which is exciting but overwhelming at the same time.

    I made by site public again so you guys can take a look and help me with some recommendations on theme, layout or anything else (I plan to return it to private until I am ready to actually roll out the blog).


    I am not really sure what is going to work best at this point. My site is focused on interesting souvenirs. This is what I am trying to do:

    -Build content from my own, but most importantly, from user submissions. I need to make user submissions, which will be primarily photos of souvenirs, as obvious and easy to do as possible. The contact form did not allow photo uploads so I found something on a site called jotform and added that. Not sure if this is the best option.

    -Have a streamlined, clutter free blog that will focus on interesting souvenirs with some commentary behind it. I have thrown up a bunch of content for now as placeholders to see how it would look, but it is not ready at all, it is a rambling stream of consciousness mess– this is why I am keeping it private for now as I am mortified to think of anyone reading it in this condition. As far as format, I am struggling with whether this should be a grid or some other format. So many choices!

    -I also need the site to be easily searchable so a user can quickly find souvenirs by region or type. I don’t want it to look too “blog” like overall, if that makes sense. That’s why I was trying to figure out what to do with the categories to give them more of a polished and less blog-like look.

    To top it off, I am totally tech illiterate. I do want to learn but it’s hard trying to figure out how to do everything at once (and what can even be done).

    Thanks for any ideas.


    Not wanting something to look like a blog is hard to give advice on :) but I think the themes you picked out to try sounded great! Maybe try experimenting with each one using the “Live Preview” links in the Appearance > Themes page.

    Also, this showcase is a great place to look at what other users have done with their blogs: http://theme.wordpress.com/customize/

    About searching, just make sure to include all the relevant text in your post and searching on your blog should pull the relevant posts right up.

    WordPress.com doesn’t have an option for using jotform. Maybe you could accept submissions by email? Or, you could add people as authors. Authors need to be invited and once they accept they will be able to add posts and images. You can read more about user roles at http://en.support.wordpress.com/user-roles/

    If you link your blog in the forums, it will likely get some clicks, so you can turn it back to private for now if you’d like.

    I think, to get started, you should concentrate on writing a couple really solid content examples and then spend a little time picking out the theme you like best. You can always switch themes at any time later.


    Thanks for all the great tips.

    One more question (I promise!): I agree I think I should put up a couple of solid posts then play with it more. Can you refer me to a help page that explains how to “unpublish” my posts, but keep them there for later reference?

    Thanks this forum is great!


    One way would be to make the post private. See http://en.support.wordpress.com/posts/post-visibility/ for details.

    Another way would be to change the post back into a draft. You can do that from the same Publish box on the edit post page.


    thank you all set!

The topic ‘Possible to replace category names with a designated image or icon?’ is closed to new replies.