Tag: Tutorial

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

[php]
if( is_single()) {
[/php]

change that line of code to look like this

[php]
if( is_single() || is_category() ) {
[/php]

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.

[css]
.active_category{background-color:#66FF00;}
[/css]

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

[css]
.current_page_item{background-color:#66FF00;}
[/css]

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

[php]
<div id="nav">
<ul>
<li <?php if (is_home()){echo ‘class="current_page_item"’;}?>><a href="<?php bloginfo(‘url’); ?>/">Home</a></li>
</ul>
</div>
[/php]

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

[css]
.active_category{background-color:#66FF00;}
.current_page_item{background-color:#66FF00;}
[/css]

Put this in your header.php

[php]
<div id="nav">
<ul>
<li <?php if (is_home()){echo ‘class="current_page_item"’;}?>><a href="<?php bloginfo(‘url’); ?>/">Home</a></li>
<p><?php wp_list_pages(‘title_li=’); ?><?php wp_list_cats(‘sort_column=name’); ?>
</ul>
</div>
[/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.