Category Specific Icons next to Post Title

[mfd]

I would like to add an icon next to each post title, which would change according to category. Similar to this site.

I tried to follow directions from this forum post but to no avail. I have the coding from the directions previously mentioned on this temp site listed below (user/pw are both "denise" for the temp site access).

Any help would be appreciated!

http://test9.moritzfineblogdesigns.com

[Tonya]

Hi,

Here is how I do it within my designs: Gist on GitHub. What this does is:

• Adds a <span class="icon-cat-[category slug]"></span> within the post title's HTML string.
• Places the span in the proper place depending upon if a hyperlink is present or not.

You want to put this in your functions.php file.

Then in your style.css file, you'll add the icon images (via background) there (try to use sprites if you can to help speed things up).

I did something similar to this on this site.

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Brad Dalton]

Try this http://wpsites.net/wordpress-tips/add-icon-before-or-after-entry-title/

I like that category drop down menu with the icons!!

---

Tutorials for StudioPress Themes.

[mfd]

Hey Tonya & Brad-
Thanks for help from both of you! I started with Tonya's suggestion and it worked perfectly, so I didn't even get to your suggestion, Brad....but might use it in the future for the menu icons!

Thanks for your help!

[Tonya]

You're welcome. Here's a tutorial I wrote up for it too.

I did make one mistake in the code and forgot a closing '>' on line 14 of the first <span>. I updated the Gist and the tutorial for the correction. Please update your code too.

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

Hmm, It seems that after I updated the code, the icons aren't showing up anymore. ?? When I put the old code back in, they show up. Thoughts?

[Tonya]

I think I need more coffee (of course I don't drink coffee LOL). I put the '>' in the wrong place (has to be after the " and not before). Sorry about that. I corrected it again:

$icon = sprintf('<span class="icon-cat-%s"></span>', $category->slug);

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

OK, So that still didn't seem to make the icons show up again..?

[Tonya]

Do me a favor. Using either Firebug or Chrome Dev Tools, right click on the page title and then look at the HTML. Make sure that it rendered properly:

<h1 class="entry-title" itemprop="headline"><span class="icon-cat-uncategorized"></span>Hello world!</h1>

Obviously the title will be different and the 'uncategorized' will be whatever the category slug is for that post's category. What I'm looking for is to ensure that after the category slug it ends in "></span>.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

seems to render correctly:
<h1 class="entry-title" itemprop="headline"><span class="icon-cat-arrow"></span>Testing the icon Category Images</h1>

[Tonya]

Perfect. Then you are good to go. Your icon class is .icon-cat-arrow in the style.css file.

Enjoy your day 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

The icon class has been set to that all along, and the image did show up with the old code. It still is not showing up with the new code. If i place the old code back in the custom functions, the post image show up. I am working on this site.

Should I just stick with the old code since it is working?

[Tonya]

With the old code, is it rendering the same as what you provided above, i.e.

<h1 class="entry-title" itemprop="headline"><span class="icon-cat-arrow"></span>Testing the icon Category Images</h1>

If yes, then something is odd. Please post your style.css for the .icon-cat-arrow for me and I can see what's happening.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

I just put the old code back in and here's what I get:
<h2 class="entry-title" itemprop="headline"><a href="http://test9.moritzfineblogdesigns.com/?p=128" title="Testing the icon Category Images" rel="bookmark"><span class="icon-cat-arrow" <="" span="">Testing the icon Category Images</span></a></h2>

So apparently it's an h2...hmmm

Here's my css:

.icon-cat-arrow{
	background: url('/wp-content/themes/lifestyle-pro/images/icontest2.jpg')no-repeat;
}

[Tonya]

Right the old code rendered improperly as you see after icon-cat-arrow" there's an extra <="". So put in the new code.

The problem is you need to add the following to your style.css file:

.icon-cat-arrow{
	background: url('images/icontest2.jpg') no-repeat 0 0 transparent;
        width: 0px; /* put in the icon's actual width */
        height: 0px; /* put in the icon's actual height */
        display: block;
        margin-right: 10px; /* adjust to your needs */
}

Please make sure that you put in the actual width and height of the icon image.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

Hooray!!
So, last question and then I'll stop bugging you! LOL...the icon shows up above the post title--what is the best way to get it to the left of the title (and have the title scoot the the right a bit)?

[Tonya]

Not a problem.

Add float: left; to the .icon-cat-arrow styling.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

ah, perfect...thanks so much, Tonya!

[Tonya]

You're very welcome 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

Tonya-
I'd love to revisit this with one more question... When a post has multiple categories, such as this one, if the category with the icon is not first ALPHABETICALLY, the icon will not show up.

Is there a workaround for this?

[Author]

Posts