Wordpress Category Menu Integration with wp_list_pages();

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;}
Post a comment
  1. Gadget Newz

    [...] Wordpress Category Menu Integration with wp_list_pages(); | [...]






Real Time Web Analytics ^