One of the first things I do when I create a new WordPress Theme design, is to remove the page listing from the sidebar, and give it more prominence in a horizontal nav bar. Even if you use WordPress as a blog, putting your pages in the header area of the layout makes them stand out more as “look at me for more info” links, than the standard blog information does.
Move the navigation to the header
The first step is to open up your sidebar.php template and find this snippet of code:
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
Cut it out and then place it within your header.php where you’d like it to be. Most likely, you won’t be wanting the “pages” header, and you’ll also need to put it inside an unordered list with an id or class that you can use for styling it from within the css, so your code should now look like this:
<ul id="nav"><?php wp_list_pages('title_li='); ?></ul>
Cause the pages to list horizontally
Now open up your stylesheet (style.css) and begin styling the nav id. Most people will want their list items to float left so that you don’t lose the ability to use block item styling like borders and dimensions that you would if you just told them to display inline. Here is a good basic setup to get you started:
ul#nav {
height:25px;
border:1px solid #ccc;
background:#eee;
margin:1em 0;
padding:0;
}
ul#nav li {
list-style:none;
float:left;
border-right:1px solid #ccc;
line-height:25px;
padding:0 10px;
}
Yay! Now your header includes a horizontal navigation bar.
Taking the style to the next step
Of course you have unlimited possibilities as to the appearance of your navigation bar. Depending on your design and styling capabilities you can really jazz up the look of a simple list of pages. Here are some great examples to give you some inspiration:
My Site Navigation
Smashing Magazine
Zen Habits
Wandering Goat
Comag Marketing Group
ASI Distribution
Child Pages
If you use a lot of child pages on your blog, you are probably seeing a few errors. There are two solutions for this. One, is using suckerfish dropdowns, and the other is listing the child pages in the sidebar only when you’ve chosen a particular parent page.
If you do use my sidebar solution, be sure to exclude showing them in the header.php template by adding an additional parameter to your code like this:
<ul id="nav"><?php wp_list_pages('depth=1&title_li='); ?></ul>
If all of this seems too much for you, or you just want a quicker way to get to the designing, then you might enjoy using my imageless theme as a basis for your customization.
This code works great.
Thanks for sharing.
How to display only parent pages in this navigation bar.
Also how to provide drop down facility for this horizontal navigation bar.
To only show the top level posts, be sure to add the variable “depth=1″ into the options like shown in the very last code snippet.
The link to suckerfish dropdowns explains how to use css to make perfect dropdowns with nested lists. By default, WordPress nests the lists just like you need them to in order for that technique to work.
Love this! This is great. I do have a question. When I lose the child pages by using the code snippet at the bottom of the post – I get a title for the list. I have a “Pages” sticking out like a sore thumb. How do I get rid of that?
There was an error in the code I had displayed, and I’ve fixed it now. Make sure that the “&title_li=” is left in there blank.
Thanks so much! That worked like a champ!
Can you also use posts in a navigation bar?
Max,
You could use the same basic css here, and then create a custom loop that uses an unordered list for each post. Custom loops: http://weblogtoolscollection.com/archives/2008/04/13/define-your-own-wordpress-loop-using-wp_query/
The site is dev at the moment, so if you contact me I can give you the access but I’ve added
to my header.php and it’s messing around with the page links at the top of the page. Can you help please.
Nicola
sure, why don’t you drop me a note with my contact form with more details, and I’ll see if I can help you out.
Thanks for adding the wandering goat’s site to your examples. Nice site & Blog.
Thank you for this. Theres no plug ins or anything else I’ve seen. Word press has a tutorial on how to make your own navigation – but I wanted something that would update as you add new pages. Thank you.
Thanks a lot! I am just learning Information.
And php and this was very easy to follow and helped a lot.
You really took time to explain every little bit.
Thanks again…
Thanks a lot! I am just learning Information.
Php and this was very easy to follow and helped a lot.
You really took time to explain every little bit.
Thanks again…