Here is a bit of code that you can use to put a category dropdown menu that allows for complete customization. I have wanted to put a category drop down menu in the middle of wp_list_pages(); for a while and this does the trick for me. Basically, if you want a navigation structure like this: About (regular page) Category (with children) Services (regular page) Products (regular page) This method also allows you to use your existing CSS for your wp_list_pages(); Meaning that you don't have to use an additional set of rules for your category menu
View Demo Let's take a look at what the final markup in your header.php file will look like:
<ul id="nav">
<!-- This bit of code just manually places the homepage first, kinda handy -->
<li class="page_home<?php if (is_home()) : ?> current_page_item<?php endif; ?>"><a href="<?php bloginfo('home'); ?>" title="Home">Home</a></li>
<!-- Here is wp_list_pages(); with your first regular page in the menu -->
<?php wp_list_pages('include=2&title_li='); ?>
<!-- Here is the category dropdown that follows the style of the wp_list_pages();
This function will need the normal Category Name, and it's ID. Note You can use this AS MANY TIMES AS YOU LIKE. If you had multiple categories that needed a dropdown placed in between other pages in your main navigation -->
<? category_drop_down_menu('Blog Category', '5'); ?>
<!-- Here is wp_list_pages(); with your other two regular pages in the menu -->
<?php wp_list_pages('include=3,4&title_li='); ?>
</ul>
Looks simple enough, right? So in order to get the category menu to look the same, I just looked at the source code of the page without the menu and copied its structure. I next needed to place the function's arguments so that it will work properly. Here is the php for your functions.php file.
<?
//The $title and $cat are what you wrote as your arguments from the header function
function category_drop_down_menu($title, $cat) {
//in order to get the main category link i just take the $title and remove a bunch of characters
$find = array(" ", ", ", " & ", "'");
$replace = "-";
$str_title = str_replace($find, $replace, $title);
?>
// Here is where you build the top level nav/category item. Notice that we are just using the output of wp_list_pages(); and replacing with category info. Note. if you have changed your default category slug, ie to something like "topics" you need to change it here.
<li><a href="/category/<? echo $str_title; ?>"><? echo $title; ?></a>
<ul> // This <ul> starts the dropdown
// Here is where we use the $cat argument to figure out what children to show in the dropdown menu
<? $categories = get_categories('child_of=' . $cat . '&hide_empty=0');
// Here is where we cycle through all the children (this will build dynamically as you add/subtract/modify children of this category
foreach ($categories as $cat) { ?>
// This builds the <li>'s. Note. if you have changed your default category slug, ie to something like "topics" you need to change it here. So for each child category found i just place the slug ($cat->slug) and the category name ($cat->name)
<li><a href="/category/<? echo $cat->slug; ?>/"><? echo $cat->name; ?></a></li>
<? } ?>
</ul>
</li>
<?
}
?>
The last bit of code needed is the basic CSS for styling your dropdown
#nav {
background: #000000 no-repeat;
height: 45px;
position:relative;
list-style:none;
float:left;
}
#nav li { float: left; }
#nav li a {
text-decoration:none;
display:block;
float:left;
font-size:0.85em;
line-height: 2.1em;
padding:0.2em 0.4em;
color:#FFFFFF;
margin:0 0.32em 0 0.32em;
text-shadow:0 1px 1px rgba(0,0,0,0.25);
}
#nav li a:hover, #nav li a.active { text-decoration: none;}
#nav .current-cat a, #nav .current_page_item a {} // You could place styles here if you wanted the current page to look different. ie bold, or another color
#nav li ul {width: auto; clear: left; background: #f0eee8;border: #382d16 solid 2px; z-index: 500; margin: 20px 0px 0px 0px; padding: 5px;}
#nav li ul li {display: block; clear: both;}
#nav li ul a {padding: 5px 5px 5px 3px; font-size: 0.95em;line-height: 12px;color: #504630;text-align: left;height: 16px; width: 100%;}
#nav li ul a:hover {color: #504630; text-decoration: underline;}
#nav li:hover {visibility: inherit; /* fixes IE7 'sticky bug' */ }
#nav li ul {position: absolute;left: -999em;}
#nav li:hover ul {left: auto;}
#nav li:hover ul {left: auto;}
Matthew A Price
^