While making the redesign for this blog I wanted to highlight the category in the navigation when browsing the specified category as well as keeping it highlighted when on the a single post added to that category ( you’ll notice that the navigation is highlighted if your on this page ).
I searched high and low and eventually found a simple plug-in, by adding a small piece of code to the plug-in I could achieve this, follow the steps below and you should beable to get your categories highlighted too when on a single post.
What we want to Achieve:
Add a Home page link to the navigation and highlight current page.
Highlight the current category
Highlight the current category even when on single post
Step 1: Download The Plug-in
Download the plug-in: Here (zip) From: Screenshine
Step 2: Uploading and Editing the Plug-in
1. Upload the plug-in to your Wordpress plug-ins folder.
2. Go to your Wordpress admin panel “Plugins” and “Activate” the plug-in
3. Look at your “Currently Active plugins” and click “Edit” for the “Show Active Category plugin”
4. Scroll down past the copyright information until you find this line of code
if( is_single()) {
change that line of code to look like this
if( is_single() || is_category() ) {
Click “Update file” to save the changes
Step 3: CSS for Highlighting Current Category
Go to your theme CSS file normally called “style.css” and add this line of code below.
.active_category{background-color:#66FF00;}
NOTE: you can style this how you want it will style the current category and the category when on a single post using the plug-in.
Step 4: CSS for Highlighting Current Page
To highlight your “pages” all you have to do is add this line of code to your CSS file, This css class is actually built in to Wordpress
.current_page_item{background-color:#66FF00;}
NOTE: you can style this how you want it will style the current page
Step 5: Add a Home Page Link
You can have a home page link in your navigation take a look at what i have, This hard codes a “Home” link in to your navigation and adds the class “current_page_item” when on your index page, this is styled with css as in Step 4
All Code For The Navigation
So this is a summary of what we’ve done, if you’ve uploaded the plug-in, activated it and edited the code, you can test the code below, copy and paste
Put this in your style.css
.active_category{background-color:#66FF00;}
.current_page_item{background-color:#66FF00;}
Put this in your header.php
All this code adds the home page link, all your pages and then all your categories to your navigation, if you’ve added the CSS styles to you Style sheet these things should be highlighted when on the current page, category and single category post.
Questions
So hopefully you’ll find this useful, let me know if you get it working or get stuck in the comments below ill try my best to help you but obviously i cant help you with the plug-in as I did not make it.
34 Comments
Nice tutorial. I could have used this a couple weeks ago :) Definitely getting stumbled and delicious tagged.
Mike
STUMBLED!
Nice navigation effect.
Geoserv´s lastest blog post..Looking for cheap hosting?
Thanks for tutorial. nice to meet you !
Danh ba web 2.0´s lastest blog post..Những trang web có trang lỗi 404 (Error 404 Page) thú vị và đẹp mắt nhất !
Thanks for the walk-through for another very handy tool in the Wordpress ensemble.
Tracey Grady´s lastest blog post..Design checklist: What clients should provide their designer
very nice tutorial:) nice work Max!!!!!!your really doing great.
Ronald
NaldzGraphics´s lastest blog post..30 Free High Quality .PSD Files to Grab Part:2
Sorry - why to use a plugin? WordPress give the class current-cat for a active category and this is easy to format with css.
I think, it is better to use the standard-class of wordpress. This makes easy to share Themes and ideas.
West regards
Frank´s lastest blog post..Secure Include Plugin In WordPress
@ Frank - current-cat would only work when you are browsing the actual category, not when you are on the single post page, that is why i could not highlight the category using the built in class, even though it shows when on the category page.
This is a handy snippet, thank you!
Best advice…..on wordpress
thank you for sharing it with us
Nice work, this is definitely a great enhancement for usability & accessibility.
Matt´s lastest blog post..Which Layout is for me?
Nice Post. im thinking of doing this in my blog also. thank for sharing
insic´s lastest blog post..Zend Framework Blog Application Tutorial - Part 6: Introduction to Zend_Form and Authentication with Zend_Auth
Nice post.Thanks..
iddaa´s lastest blog post..DALE CAVESE
hi, great plugin, and this *almost* fixes a problem i have. however, i need a way to include categorys/posts into a page, so it appears in the admin side site tree. i see your navigation menu lists all the static pages, then follows with category links, which makes me assume you are unable to reorder your navigation in the admin. what i need to do is have menu items in this order PAGE | PAGE | CATEGORY | PAGE . is this possible with your plugin? many thanks
Great tutorial and it works brilliantly.
Amanda Evans´s latest blog post..Some Excellent Freelance Writing Posts
very interesting, thanks
categorized bloggs makes archiving highly organized. visual details will make it even more organized. when we do blogging for our customers, we always emphasized on categories so our customer can easily appreciate our works.thanks.
Great info - thank you.
Thank you very much… this is what i’ve been looking for
Hi
This is fantastic - thanks. Do you know how this could work so that the single post ancestor category (eg category “news” where a single post in category “press releases” with a parent category of “news”) picks up an active class - this way it would keep my expanding lists expanded when in a single post. Thanks!
This post thanks
povilli´s latest blog post..Msn Polat Alemdar Avatarları
Thanks for the good tutorial.
I can’t get it to work and desperately would like this feature for a website I’m currently working on (and on future websites).. I can’t imagine that I’m doing anything wrong - does anyone know if this works with WP 2.7? Does anyone know how to fix it for 2.7? It seems like it should already built into WordPress… an essential feature for me. (Using the SuckerFish menu.)
Thanks!
@Kmedia - i would suspect that suckerfish already has this but im not sure you may want to look on there web site for support, and im not sure if this plugin runs well on wp2.7 either.
Thanks for the reply Design Shard.
The Suckerfish CSS does define the active state but for some reason WordPress isn’t reading and/or displaying it. The menu works perfectly with my non-WordPress pages.
Since I’ve seen throughout my exhaustive searches that highlighting the current category was capable up through version 2.6, I have to think that it’s a bug with 2.7.
I’d also think there needs to be a PHP if statement somewhere around the wp_list_categories HTML checking whether that category is actually active in order to trigger the css change. I just don’t know much about how WordPress works (or PHP programming for that matter).
This is killing me.. :/
Nevermind.. As stated before, I’m using the SuckerFish menu and WP’s /%category% permalink structure setting.
For anyone who has struggled with highlighting WordPress’ current category link as much as I have, below is what worked for me (I had to abandon the “wp_list_categories” function in my navigation and use the following instead):
[sourcecode language='css']
<a href=”http://www.website.com/category/blog-page”>
[/sourcecode]
Repeat the above for each category. It took about 2 days to figure it out.. but I’m now one of the happiest people in the world! And no plugin needed! :)
Cheers!
Sorry.. the code was stripped from my post.. I thought [sourcecode language='css'] would keep it. :/
Thanks,
i’m in the middle of redesigning my site and this article helped me in the menu design
kmedia, can you figure out a way to share your solution? I’m trying to do this in Wordpress 2.7 and it’s killing me too…
Hey, this is a great post. Now I know how to optimize my site. Thanks for sharing how to find dofollow blogs! :D Greatly appreciated. In return, if you need any assistance in article submission, let me know! I do not want to spam my url here, so contact me personal at my personal email: josephwhenry@gmail.com
Fantastic, very useful, thanks a lot
How can I add the class to the li instead of the a?
Just to bump this topic up to the author, how can I add the class to the li instead of the a?
@Russel - you should have a class current-cat on the li ? you may not need the plugin, check your source code when on a category page etc, you may want to ask at http://wordpress.org/support/ the support forums , as i wont have time to look in to this at the moment, sorry.
Fair enough, thanks for getting back to me! I did just style the a in the end, it was just to keep all my styling the same :)
No problem though, thanks very much!