Menus and Navigation bars

For today’s lesson, we’re going to visit the navigation menu. This is quite simple, and exactly the same in WordPress. There’s no difference, because it is theme specific. The example is right above you here on my own layout (look up). Each item on that menu is a Page written in the backend, and all we’ll be doing is styling it to show in a horizontal list.

There is an entry in the Codex on how to do this, but here’s a plain version ready to drop in and prettify.

You’ll need this right under the header area in your theme, but before the content and sidebar.

<div id="navmenu">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>

And the CSS for the stylesheet:

#navmenu ul {margin: 0; padding: 0;list-style-type: none; list-style-image: none; } /* the list-style-type:none gets rid of the dot in each item*/
#navmenu li {display: inline; } /* this is what makes it go horizontal */
#navmenu ul li a {text-decoration:none;margin: 4px; padding: 5px 20px 5px 20px;} /* add some spacing */
#navmenu ul li a:hover {text-decoration:underline; }


A feature of many Premium themes is the same kind of menu, only they’ve used the category tag and made a second strip. Any other CSS you need to add is just looks.

You can also make a similar menu and have it persistent across ALL blogs on your system, regardless of theme. Use the MU Admin bar plugin, just rip out the is_logged_in section and replace the rest with whatever menu code you have. While you could put in the php to switch_to-blog and snag the Pages list from the main blog, I really prefer just to hard code those links in this case. No, it won’t auto-update if you add another page, but it WILL save on resources. The principle for the CSS is the same whether the results are pulled from a function or not.

An example of this in action is the blogs at Gator Country. Click around and see their main site header everywhere.

Tweet This Post