Customize WordPress Header Navigation Bar

Posted by Jeff

on November 24, 2008

Adding too many pages to a WordPress blog that has a navigation bar in the header can really make your Wordpress blog a mess. There are options to control what pages are shown in the navigation bar and even a way to add external links.

First things first and that is the difference between WordPress pages and posts. Posts are part of the blog loop and usually show in chronological order with the newest on top. Pages are static and don’t show in the loop. Links to pages are usually displayed in a sidebar widget and in a navigation bar in the header if the theme has a navigation bar. Pages should be used sparingly unless you are going for a more traditional type website.

The file to edit is typically the header.php file and I usually edit theme files right from the dashboard’s theme editor. On some hosting accounts you may need to make the themes files writable to do it that way. Or can use FTP to download the file to your computer, edit it with a text editor like Notepad or Wordpad and then upload it again. Another option is to edit the file in your hosting accounts control panel. The path to the header.php file is:
WordPressFilesDirectory/wp-content/themes/YourCurrentTheme/header.php

The code to edit the navigation bar is almost always in the header.php file and it is typically very easy to find the proper code. While the navigation bar may have a different name than the example below, the clue is in the part of the code we are going to edit. In the example below the navigation bar is pretty easy to spot <div id=”navbar”> sometimes it is called Menu or whatever the theme coder decides to call it. The example below is first showing a Home link and then all WordPress pages.

<div id=”navbar”>

<div id=”navbarleft”>
<ul id=”nav”>
<li><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order’); ?>
</ul>
</div>

A little added code can either include or exclude any page or pages but the first thing to do is find the page numbers of the pages you want to include or exclude. If you don’t have custom permalinks you can just view the page and look at the URL in the address bar of the browser to get it. If you are using custom permalinks you need to open the page in the WordPress dashboard editor to see the actual page number in your browser address bar. Since the WordPress dashboard menus changes so often anymore I will not give specifics how to edit a page. Lets just say if you can’t figure that out you shouldn’t be messing with the themes files! Once you have the page open in the page editor look at your address bar for the page number. The trailing URL should look like this: page.php?action=edit&post=67. Yeah I know it says post but that is the correct number, in this case 67.

The code to add to the header.php file to include only pages 67 and page 68 will look like the examples below. You can add as many page numbers as you want in a comma separated list, or just one.

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=67,68′); ?>

Look closely at the difference between the first example and the added code in the second. The code added was this &exclude=67,68 with no extra spaces and keeping the ‘ at the end.

To exclude certain pages from appearing in the navigation bar simply use exclude instead in include in the code. The example below will not show pages 67 and 68:

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&exclude=67,68′); ?>

Now what about sorting the order the pages are shown? Well there are options that you can use and these are found on the WordPress codex. But if none of those options work for you you could use the includes code multiple times to set the order on your own. For example this would show page number 67 first then page 1 second:

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=67′); ?>

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=1′); ?>

Did you notice the code for the Home link in the first code example? I bet you are thinking now right? Yes that is the code we can learn from to hard-code external links. This part is very simple just place the code for the external link anywhere within the navigation bar you want the link to appear. In the sample below the Home link is first, page number 67 second, an external hard-coded link and last is page number 1.

<div id=”navbar”>

<div id=”navbarleft”>
<ul id=”nav”>
<li><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=67′); ?>

<li><a href=”http://www.wordpressmax.com/” title=”WordPress Guides”>WordPress Guides</a></li>

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=1′); ?>
</ul>
</div>

Things To Consider:

All WordPress themes are coded differently so your code might look different than the examples above.
Always, always make a backup of any theme file before you attempt to edit it!
These changes are theme specific and will need done again if you switch themes.
Yes it is possible to add a navigation bar to your theme, but please don’t ask in the comments below, that will be a post for another day.
Sorry I can’t “look at” or edit your navigation bar for you unless you want to compensate me for my time. I have tried to help out as much as possible but a few have taken advantage of my time.
More information about template tags for listing WordPress pages can be found here: Template Tags/wp list pages

Similar Posts:

WordPress Guide

If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.

Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!

Comments

Comment by moses on November 25, 2008 @ 5:24 am

thanksfor the article. This is what i’ve been looking for

Comment by Luca on November 25, 2008 @ 1:19 pm

Hey I love this post. I’m fairly new to Wordpress and it always amazes me to see how much can be done with it. I’ve always been afraid to mess around with code but your posts are very clear. I’ll be bookmarking this post for reference.
Thanks gain

Comment by selena on November 26, 2008 @ 2:00 am

I like the wordpress most and this is the good post for those who have been waiting for this including myself.

Comment by Marcus on November 26, 2008 @ 6:14 am

That makes many things possible with wordpress. For example a company website.

Comment by Free PC Games on November 27, 2008 @ 9:38 am

Nice post Jeff, very informative, precise and clear.. Thanx for sharing this post of yours with everyone. Peace

Comment by Directory Submission Services on December 15, 2008 @ 2:29 pm

I was precisely looking for how to add external links to the top menu. I am glad I found it here. Many thanks for sharing this valuable information.

Comment by Adam on May 30, 2009 @ 12:49 pm

I found the ‘Exlude Pages’ plugin very useful

Comment by Brad Mangas on June 17, 2009 @ 10:23 am

Jeff, I have searched for many hours looking for straight forward instruction on customizing navigation bar. Your article is by far the best I have found. And with your help I was successful in adding a external link to my website. Thanks for a great article.
Brad

Comment by Ucuzza on June 22, 2009 @ 6:14 pm

Now I learned where I can find the navbar, however I don’t know how to make a fancy navbar. Any help would be appreciated.

Comment by Juhani Tontti on July 31, 2009 @ 9:10 am

Jeff, you are worth the Nobel Prize of WordPress guidance. Shall I suggest that?

Comment by Mike Taylor on September 3, 2009 @ 2:55 pm

Man, you are a lifesaver. I have looking for something like this for a while. Thanks.

Comment by shawn2 on September 16, 2009 @ 6:57 am

hey thanks for the code !! it works wonderfully !!
i was wondering if a separator can also be inserted b/w pages (for instance something like: “|”)for the footer links…