Creating a Category Menu Bar for Your Site
Navigation Bars are great for visitors. They make it easy for users to find information quickly. Since they may wish to explore posts in certain categories, you may want to feature your categories in a navigation bar format.
When I was looking at some forums to see if any one had suggestions on how to create a “category menu bar” in a WordPress theme, I found no help. I spent some time looking through my javascript for a menu bar. I read through the WordPress codex for ideas. I began combining bits of code to come up with this bit of of poetry to create category menu bars.
Add this function to your functions.php
function cat_menu_items1()
{
$homeMenuItemCaption =
<<<EOD
Home
EOD;
$showHomeMenuItem =
null;
$isHomeSelected = null;
if ('page' ==
get_option('show_on_front')) {
$pageOnFront = get_option('page_on_front');
$pageForPosts = get_option('page_for_posts');
if
($pageOnFront) {
$page = &
get_the_category($pageOnFront);
if (null != $page)
$homeMenuItemCaption = apply_filters('the_title',
$page->single_cat_title);
$isHomeSelected =
is_page($page->ID);
} elseif
(!$pageOnFront && $pageForPosts) {
$page = &
get_the_category($pageForPosts);
if (null != $page)
$homeMenuItemCaption = apply_filters('the_title',
$page->single_cat_title);
}
}
if (null === $isHomeSelected)
$isHomeSelected = is_home();
if (true === $showHomeMenuItem || 'page'
== get_option('show_on_front'))
echo '<li><a' .
($isHomeSelected ? ' class="active"' : '') . ' href="' .
get_option('home') . '"><span><span>'
.
$homeMenuItemCaption .
'</span></span></a></li>';
add_action('get_the_category',
'art_header_page_list_filter');
add_action('wp_list_categories',
'art_list_pages_filter');
wp_list_categories('title_li=');
remove_action('wp_list_categories',
'art_list_pages_filter');
remove_action('get_the_category',
'art_header_page_list_filter');
}
This sets up the function to be used on the site. I use Artisteer to create my preliminary templates, so you will notice some references to some functions generated by that program.
Next we need to call the function into action. I want this to be in my header area, so I open up the header.php. I place the following bit of code into the header in the appropriate location:
<div class="nav">
<ul class="artmenu">
<?php cat_menu_items1(); ?>
</ul>
<div class="l">
</div>
<div class="r">
<div>
</div>
Finally, I have to go to my stylesheet to get it to look right. This is a bar with a step down menu for the subcategories to make everything look clean. This is styled for a green theme, so you will have to change the look to fit with your site.
This code includes everything for the menu bar and submenu items.
/* begin Menu */
/* menu structure */
.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.artmenu, .artmenu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.artmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.artmenu li:hover
{
z-index: 10000;
white-space: normal;
}
.artmenu li li
{
float: none;
}
.artmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.artmenu li:hover>ul
{
visibility: visible;
top: 100%;
}
.artmenu li li:hover>ul
{
top: 0;
left: 100%;
}
.artmenu:after, .artmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.artmenu, .artmenu ul
{
min-height: 0;
}
.artmenu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.artmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.nav
{
position: relative;
margin: 0 auto;
width: 894px;
height: 35px;
z-index: 100;
}
.artmenu
{
padding: 8px 4px 0px 4px;
}
.nav .l, .nav .r, .nav .r div
{
top: 0;
position: absolute;
z-index: -1;
overflow: hidden;
height: 35px;
}
.nav .l
{
left: 0;
right: 0px;
}
.nav .r
{
right: 0;
width: 0px;
}
.nav .r div
{
width: 894px;
right: 0;
}
.nav .l, .nav .r div
{
background-position: left top;
background-repeat: no-repeat;
background-image: url('images/nav.png');
}
/* end Menu */
/* begin MenuItem */
.artmenu ul li
{
clear: both;
}
.artmenu a , .artmenu a span
{
height: 27px;
display: block;
}
.artmenu a
{
cursor: pointer;
text-decoration: none;
margin-right: 2px;
margin-left: 2px;
}
.artmenu a
{
background-image: url('images/item-left.png');
background-position: left top;
background-repeat: no-repeat;
}
.artmenu a span
{
background-image: url('images/item-right.png');
background-position: right top;
background-repeat: no-repeat;
}
.artmenu a span span
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 13px;
color: #253A22;
padding: 0 7px;
margin: 0 6px;
line-height: 27px;
text-align: center;
background-image: url('images/item-center.png');
background-position: left top;
background-repeat: repeat-x;
}
.artmenu a:hover
{
background-position: left -27px;
}
.artmenu li:hover>a
{
background-position: left -27px;
}
.artmenu li:hover a span
{
background-position: right -27px;
}
.artmenu a:hover span
{
background-position: right -27px;
}
.artmenu a:hover span span
{
color: #F4F5EF;
background-position: left -27px;
}
.artmenu li:hover a span span
{
color: #F4F5EF;
background-position: left -27px;
}
.artmenu a.active
{
background-position: left -54px;
}
.artmenu a.active span
{
background-position: right -54px;
}
.artmenu a.active span span
{
color: #000000;
background-position: left -54px;
}
/* end MenuItem */
/* begin MenuSubItem */
.artmenu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 23px;
width: 218px;
overflow:hidden;
line-height: 23px;
margin-right: auto;
background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
border-color: {PassiveBorderColor};
}
.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul
a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu
ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 23px;
color: #41683C;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 13px;
}
.artmenu ul ul a
{
margin-left: auto;
}
.artmenu ul li a:hover
{
color: #000000;
border-color: {HoveredBorderColor};
background-position: 0 -23px;
}
.artmenu ul li:hover>a
{
color: #000000;
border-color: {HoveredBorderColor};
background-position: 0 -23px;
}
.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
color: #000000;
}
.nav .artmenu ul li:hover>a span, .nav .artmenu ul
li:hover>a span span
{
color: #000000;
}
/* end MenuSubItem */
Good luck with it. Play around to see what you can do.
Tags:
GOOD!!! I had a small addition for those who want to add home button also along with the categories
If you want to display “HOME”, then you have to use the following in the function.php
____
function cat_menu_items1()
{
$homeMenuItemCaption = <<post_title);
$isHomeSelected = is_page($page->ID);
} elseif (!$pageOnFront && $pageForPosts) {
$page = & get_post($pageForPosts);
if (null != $page)
$homeMenuItemCaption = apply_filters(‘the_title’, $page->post_title);
}
}
if (null === $isHomeSelected)
$isHomeSelected = is_home();
if (true === $showHomeMenuItem || ‘page’ == get_option(‘show_on_front’))
echo ‘‘
. $homeMenuItemCaption . ‘‘;
add_action(‘get_the_category’,
‘art_header_page_list_filter’);
add_action(‘wp_list_categories’,
‘art_list_pages_filter’);
wp_list_categories(‘title_li=’);
remove_action(‘wp_list_categories’,
‘art_list_pages_filter’);
remove_action(‘get_the_category’,
‘art_header_page_list_filter’);
}