CSS Temple

How to add Style to the Current Page Item in WordPress Navigation By: Vladan | under: Wordpress | October 20, 2011 | Tags: CSS trick, wordpress | 5 Comments

After converting HTML to WordPress I was realized that I need different style for current page item in WordPress navigation. Actually it is normal to highlight current page item, but in older WordPress versions I was using plugin for that.

Now, there is no need for plugin since WP have option for creating custom menu. After several attempts to highlight current menu item, I decided to look into code and find out is there any extra class for that. The extra class is “current-menu-item”. By using that class I can change CSS and highlight current page item.

When you create custom menu in WP administration the title of the menu is you ul id.

The HTML code for that will look something like this:

<ul id="menu-main-nav" class="menu">
     <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="http://css-temple.com/">Home</a></li>
     <li id="menu-item-20" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20"><a href="http://css-temple.com/category/wordpress/">WordPress</a></li>
     <li id="menu-item-44" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-44"><a href="http://css-temple.com/category/htmlcss/">HTML/CSS</a></li>
     <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://css-temple.com/about/">About</a></li>
</ul>

So in CSS you basically have this:

#menu-main-nav {
	font-size:13px;
	color:#34393e;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:bold;
}

#menu-main-nav li {
	float:left;
}

#menu-main-nav li a:link,
#menu-main-nav li a:visited {
	color:#34393e;
	text-decoration:none;
	line-height:20px;
	display:block;
	padding: 14px 15px 10px 15px;
	background:aqua;
}

#menu-main-nav li a:hover {
	text-decoration:underline;
	color:#f1f8ff;
	background: #333;
}

#menu-main-nav li.current-menu-item a:link,
#menu-main-nav li.current-menu-item a:visited {
	background: #333;
	color:#f1f8ff;
	text-decoration:none;
}

#menu-main-nav li.current-menu-item a:hover {
	text-decoration:underline;
}

You can also add filter into functions.php file to add class that you want or you can just use “current-menu-item” and by using that kind of thinking you will reduce functions.php file, because either way you need to put some style into CSS.