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
1 | if( is_single()) { |
change that line of code to look like this
1 | 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.
1 | .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
1 | .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
1 2 3 4 5 | <div id="nav"> <ul> <li <?php if (is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>/">Home</a></li> </ul> </div> |
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
1 2 | .active_category{background-color:#66FF00;} .current_page_item{background-color:#66FF00;} |
Put this in your header.php
1 2 3 4 5 | <div id="nav"> <ul> <li <?php if (is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>/">Home</a></li><?php wp_list_pages('title_li='); ?><?php wp_list_cats('sort_column=name'); ?> </ul> </div> |
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.
20 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ı