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:
Smashing Magazine
Zen Habits
Wandering Goat
Comag Marketing Group
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.
Buy me a latte!
5:11 pm
//
WordPress: How to List Child Pages in Sidebar » Tammy Hart Designs
[...] of the most common things to do with your wp_list_pages, is to use css to create a horizontal navigation. A problem can sometimes occur when you decide later to add another page s a child to an original [...]
6:31 am
//
Pravin Dhayfule
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.
3:59 pm
//
tammyhart
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.
4:01 pm
//
Ben
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?
4:12 pm
//
tammyhart
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.
4:17 pm
//
Ben
Thanks so much! That worked like a champ!
11:37 am
//
WordPress: How to Use Categories as Your Navigation Bar » Tammy Hart Designs
[...] wrote a post a few months back that discusses how to use pages in a horizontal navigation bar. It’s a pretty standard thing to see a horizontal navigation, but a lot of blogs that [...]
9:42 am
//
250 Wordpress Tutorials
[...] 144. WordPress: How to Use Pages in a Horizontal Navigation bar [...]
5:08 am
//
Max
Can you also use posts in a navigation bar?
11:47 am
//
tammyhart
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/
8:04 am
//
Nicola
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
11:12 am
//
James Madson
Thanks for adding the wandering goat’s site to your examples. Nice site & Blog.
4:00 pm
//
Mickey
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.
6:00 pm
//
37 Cool Wordpress Hacks And Tutorials You Should Try |
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
1:12 am
//
37 Cool Wordpress Hacks And Tutorials You Should Try | Afif Fattouh - Web Specialist
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
3:06 pm
//
37?Wordpress???? « Booto'Blog
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
3:06 pm
//
37个Wordpress经典教程 « Booto'Blog
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
10:46 am
//
cam mozaik
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…
7:42 am
//
cam mozaik
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…
8:25 am
//
37?Wordpress????[?] « GoTop’s Blog
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
8:25 am
//
37个Wordpress经典教程[转] « GoTop’s Blog
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
4:21 am
//
37?WordPress????
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
4:21 am
//
37个WordPress经典教程
[...] 4.How to Use Pages In a Horizontal Navigation Bar [...]
7:11 pm
//
NYC Interior design
This works great, thanks for the detailed info.
4:10 am
//
najmol
i need all step by step process access navigation menu plz help me because i am new learner
2:25 am
//
Daniel
Thanks for this , I was recently a reluctant convert to WordPress from hand coding sites, really seeing the benefits now.. but up until now did know see an easy way of automatically creating sub menus without hard coding the links..
11:50 pm
//
Daniel
its ok, no help required !! all working fine from the code you provided here.
3:27 pm
//
tammyhart
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.