Community Forums › Forums › Archived Forums › Design Tips and Tricks › Category Specific Icons next to Post Title
- This topic has 19 replies, 3 voices, and was last updated 9 years, 9 months ago by mfd.
-
AuthorPosts
-
July 1, 2014 at 7:35 pm #112543mfdMember
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.comJuly 1, 2014 at 8:14 pm #112546TonyaMemberHi,
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 BootcampJuly 2, 2014 at 12:37 am #112580Brad DaltonParticipantTry this http://wpsites.net/wordpress-tips/add-icon-before-or-after-entry-title/
I like that category drop down menu with the icons!!
July 2, 2014 at 12:36 pm #112680mfdMemberHey 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!
July 2, 2014 at 12:47 pm #112684TonyaMemberYou'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 BootcampJuly 2, 2014 at 12:55 pm #112688mfdMemberHmm, 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?
July 2, 2014 at 1:04 pm #112689TonyaMemberI 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 BootcampJuly 2, 2014 at 1:08 pm #112690mfdMemberOK, So that still didn't seem to make the icons show up again..?
July 2, 2014 at 1:46 pm #112696TonyaMemberDo 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 BootcampJuly 2, 2014 at 1:59 pm #112697mfdMemberseems to render correctly:
<h1 class="entry-title" itemprop="headline"><span class="icon-cat-arrow"></span>Testing the icon Category Images</h1>
July 2, 2014 at 2:01 pm #112698TonyaMemberPerfect. 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 BootcampJuly 2, 2014 at 2:31 pm #112715mfdMemberThe 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?
July 2, 2014 at 2:34 pm #112718TonyaMemberWith 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 BootcampJuly 2, 2014 at 2:42 pm #112723mfdMemberI 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; }
July 2, 2014 at 2:47 pm #112724TonyaMemberRight 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 BootcampJuly 2, 2014 at 6:56 pm #112744mfdMemberHooray!!
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)?July 2, 2014 at 7:08 pm #112747TonyaMemberNot 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 BootcampJuly 2, 2014 at 7:19 pm #112748mfdMemberah, perfect...thanks so much, Tonya!
July 2, 2014 at 7:36 pm #112750TonyaMemberYou'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 BootcampJuly 12, 2014 at 2:36 pm #114061 -
AuthorPosts
- The topic ‘Category Specific Icons next to Post Title’ is closed to new replies.