Customize WordPress Header Navigation Bar

Posted by Jeff

on May 14, 2010

Here is an older post from November 2008 that should still be relevant today for tweaking the navigation bar on WordPress themes that have one. Sorry but I will probably not answer any questions about your specific theme.

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 you 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…

Jeff Replied:
September 16th, 2009 at 5:51 pm

Why not try it?

Comment by FubarThemes on September 22, 2009 @ 9:15 am

YOU ARE A CHAMP! Thanks for this properly detailed explanation.

Saved my life.

Comment by David Cary on December 12, 2009 @ 1:13 pm

Related Post Request:

How to Remove All Navigation in Top Bar, but Only on Custom Page Templates.

The idea here is create custom landing pages that focus attention on a single action… (ex: request download, opt-in, etc). From a marketing standpoint, you do not want any other clickable distraction on the page. However, you want to keep consistent design elements.

Whole themes are being designed and sold for just this purpose. Example: http://www.squeezetheme.com But wouldn’t be simpler to create custom page templates with no navigation that already have your site’s look and feel??

Thanks much!

Jeff Replied:
December 12th, 2009 at 2:16 pm

It can get tricky trying to explain that on a generic basis. It could be done by leaving off the nav bar code but then that may throw off other elements of the theme. Since all themes are coded so differently it can get complicated.

Comment by sapphire on April 11, 2010 @ 5:44 am

I’m trying to add just one category to the top nav of my site. I know it should be simple but for some reason have not come across anyone who’s discussed it.

Currently the top nav has the list of pages, which is fine. I want to add one category so that it’s easier for people to find the posts concerning the topic.

Have you seen anyone write a tutorial on it? Or you perhaps?

Thanks!

Jeff Replied:
April 11th, 2010 at 7:29 am

Its a matter of adding the correct code to pull the category you want. I found what you needed by searching “Add Categories to WordPress Navigation Bar”.

Comment by Baggio on April 20, 2010 @ 12:31 am

Excellent reference! I’ve done some PHP before, but haven’t touched it in ages, and this is a really nice refresher + guide to show novices like myself how to edit code…(got rid of an annoying ‘double’ home page on my site).

A million thanks, Jeff!

Comment by Anthony from Indianapolis Real Estate on May 10, 2010 @ 1:19 pm

Jeff, thanks for sharing. Something that I have found to be invaluable in doing my WordPress theme edits is the free Firebug plugin for Firefox. If you aren’t already using it I’d highly recommend checking it out.

Jeff Replied:
May 11th, 2010 at 8:13 am

I use it a lot too.

Comment by Mark @ Organic SEO Basics on May 14, 2010 @ 11:10 am

Thanks for the information, Jeff. This is a good reminder. I have had this very issue in the past. Too many links in the upper link bar screwed up the outlay of my blog and made it look horrible.

Comment by Sarkari Naukri on May 15, 2010 @ 6:41 pm

Jeff, this is something I was looking for a longer time.

Honestly, you helped me to show a way to customize my website which is hosted on wordpress.

This code is really useful and I hope you will be providing much more information in Future.

Thanks!!

Comment by Andrew@BloggingGuide on May 17, 2010 @ 2:22 am

Thanks for sharing this again. Your old posts never loose their gleam..they’re still useful today as they were before.

Comment by Russian Bride Olga on May 17, 2010 @ 2:21 pm

Hello! I love this post. I’m 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.

Comment by Photo Contest on May 19, 2010 @ 7:09 am

I found the ‘Exlude Pages’ plugin very useful. I am a php developer. I like your post and in future i would expect from you more interesting post. Thanks for sharing.

Comment by dog sitters on May 20, 2010 @ 11:03 am

Just learned how to use the navbar, but wondering on how to make is fancy?

Comment by GündEm on May 21, 2010 @ 1:26 pm

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

Comment by Novalja appartamento on May 22, 2010 @ 5:50 am

My friend is using wordpress for creating a Blog… he says it’s easier and faster.

Comment by Dave on May 22, 2010 @ 9:48 pm

I’ve been looking to update my header information on my blog. Your post was very helpful Thanks

Comment by Andrea on May 23, 2010 @ 4:38 pm

I’ve been trying to change the blog title font on one of my sites, and I’m about to either pull out my hair or throw the computer out the window. I downloaded a template and followed the instructions on how to customize the header. I can change the header the way I want it, but I can’t figure out how to add it to the template. I save the header.php file with the name that I’m supposed to, but it doesn’t change the file once I activate the theme. I hate to use the default font because it doesn’t look professional.

Jeff Replied:
May 24th, 2010 at 7:35 am

Keep trying and learning or pay someone to do it for you.

Comment by tech tips on May 26, 2010 @ 1:12 pm

Jeff thanks a lot dear , I was searching for this for he last three days and finally I found your blog .You done a good work.

Comment by Website Designers London on May 27, 2010 @ 1:48 am

This is a really cool website. Are you using WordPress as your main platform? I ask that because your website looks a little different…

Jeff Replied:
May 27th, 2010 at 7:59 am

Yes it is all WordPress.

Comment by McGonagall on May 27, 2010 @ 7:52 am

I was seeking to add links to external top menu. I’m glad I found here. Thank you very much for sharing this valuable information.

Comment by ezel izle on May 27, 2010 @ 4:49 pm

thnx..This is a good reminder. I have had this very issue in the past. Too many links in the upper link bar screwed up the outlay of my blog and made it look horrible.

Comment by Engineering Jaipur on May 28, 2010 @ 4:43 am

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

Comment by sanal şirket on May 29, 2010 @ 11:38 am

I found the ‘Exlude Pages’ plugin very useful. I am a php developer. I like your post and in future i would expect from you more interesting post. Thanks for sharing

Comment by Meesan | Gaming PC on May 30, 2010 @ 12:46 pm

I find all your pages very helpful. I stumbled across this site about a week ago and bookmarked it. I recently came back and looked at all your info…absolutely awesome. I have more than i ever needed to know about wordpress here. Amazing guides and great advice. I can’t really say what i find super useful because it all is! But i would have to say like others the Exclude pages plug in is super useful. Thanks for the awesome guides!

Comment by tuning on May 31, 2010 @ 8:26 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.tnkss admin

Comment by Missouri Website Host on June 1, 2010 @ 4:07 pm

Thanks for the code- it will be well used by me!
My friend prefers Joomla! to WordPress, claiming it’s too hard to configure. I’ll be sure to show him this post and prove him wrong

Comment by Effective Forum on June 2, 2010 @ 10:04 pm

Awesome Tutorial dude. Will use it in my wordpress blog.
Thanks for it.

Comment by donnie@web design chattanooga on June 3, 2010 @ 12:04 am

I think the new navigation system (from Woo) will make navigation a lot easier in version 3.0, but this is still relevant in my mind.

Comment by Russell on June 3, 2010 @ 9:01 am

Comment by Free Movies Online To Watch on June 3, 2010 @ 12:16 pm

Thanks for this Jeff, I own a few WordPress sites which have a few pages and had no idea how to fix the headings, this is one post which I have bookmarked!

Comment by MT on June 5, 2010 @ 8:51 am

Thanks for this. I started my blog site (www.biketrackdays.net) just yesterday and got stumped on the menu bar. Will hit it again next week. Thanks again.

Comment by Neil on June 5, 2010 @ 6:01 pm

Many thanks – used this code and it worked a treat. Made me feel like a programmer Well actually I am a programmer, just not a PHP one!

Neil

Comment by Hover Coupon on June 6, 2010 @ 2:26 pm

Thank you. I’m trying to design my own WordPress theme and this is very helpful. It’s confusing but nice guides like this tend to make stuff much easier! Thanks!

Comment by Business Website Solutions on June 7, 2010 @ 9:49 pm

Hi Jeff,

Good post! I wish could have found something like this when I first started messing around in WP. After many hours later and numerous site rebuilds, I have the hang of wordpress and have become quite the expert.

Ryan D
CEO
My Biznez Inc.
Affordable website options for your business

Comment by Phil on June 8, 2010 @ 8:23 am

Great tutorial man..I was thinking how to exclude page from appearing in the navigation. It’s so simple and I did not have the idea. Thank you very much..

Comment by Michelle on June 9, 2010 @ 9:17 am

Hi Jeff,
I love your posts. I don’t have a lot of wordpress experience but with most for most of my questions I found the right answer here.
Kiss

Comment by externe festplatte 1tb on June 11, 2010 @ 1:33 am

i love how much your posts helps noobs like me. thanks for taking the time and helping guys like me!

Comment by Matthew on June 11, 2010 @ 5:46 am

Hi Jeff, thanks for making sense of WordPress for me. Still getting to grips with it but it’s a little clearer now so good work!

Comment by Blogging for Profit on June 12, 2010 @ 7:22 am

This is a good information for every wordpress users. But I think, things changes this time because their already wordpress themes that are already customized this kind of features.

But anyway, this is a good one though.

- Felix Albutra

Comment by Jocuri 3d on June 14, 2010 @ 7:22 pm

Now with the WordPress 3.0 launch this thing will get easier. You can create a menu directly from the admin side.

Comment by dovo straight razor on June 15, 2010 @ 8:09 pm

Thanks for posting this jeff, I really needed this done to my blog.

Comment by Tirupati Hotels on June 16, 2010 @ 5:50 am

Thank you for you great post. This is very helpful to me b’coz im trying to design my own WordPress theme. Awesome Post.

Comment by web technology on June 16, 2010 @ 9:56 am

Your post really shows the flexibility of wordpress. 3.0 should make it a full CMS

Comment by Shops in Kingston on June 16, 2010 @ 3:35 pm

Thanks for such informative post. i was looking for it from last 2-3 months. You make my task easy, I’m so happy to have your blog. Thanks a lot, keep on like that. From now I’m a regular user of your blog.

Comment by dwi on June 18, 2010 @ 12:29 pm

I am new WordPress and appreciate all the tips and help i can get. Thanks for the detailed tutorial on how to customizing the navigation bar. Especially useful were the code snippets.

Comment by Hypnosis on June 19, 2010 @ 3:21 pm

I’ve not switched over to WordPress 3.0 yet so this advice is very helpful for me.

Comment by wordpress bulletin on June 22, 2010 @ 12:02 pm

thanks, i got an idea how to customize a drop down navigation

Comment by Steve on June 23, 2010 @ 3:17 am

Hi, great post & very useful, but I was wondering how you would go about sorting a nav bar or menu bar alphabetically but still keeping the home page 1st.

So in effect excluding the home page, but sorting all other pages.

Jeff Replied:
June 23rd, 2010 at 8:13 am

Add the links manually.

Comment by Kids Rolling Suitcase on June 24, 2010 @ 12:19 am

Hey thanks for sharing this. On one of my wordpress blogs I had made one of the pages a static page so I could have a welcome message on the front page. The only thing was that when I did that I had “home” and the name of my static page in the nav header, but they went to the same place so it was kind of weird. So, I had to do away with the static page and do a sticky post, but with this little tip I could do it the way I had it originally. Thanks!

Comment by domestic electricians leeds on June 24, 2010 @ 8:24 am

you have no idea how appreciative i am for this. MANY many thanks! cheers!

Comment by Affordable Web Design on June 25, 2010 @ 7:30 am

Great subject… on larger WordPress sites… like in excess of 50 pages, the nav bar can get over-crowded quickly if it is not organized properly. As you suggested it can make the whole blog look like a mess. I saw a few commenters mention the various exclude plugins and you gave some solid examples of the exclude in php code for the programmers out there. On the newer Studio Press premium themes now there is a really nice dashboard feature to allow you to control the nav bar and the subnav bar all from one place. So cool. On bigger sites I land up making a text file with a list of every post and page and their ID numbers to get the nav and subnav bars organized. When I add pages or posts to the site I update my master list of pages. This way it’s easy for me to generate an exclude list. On a lot of sites I will use pages on the nav bar and post categories on the subnav. OK Regards – Mal

Comment by Plastic on June 25, 2010 @ 7:31 am

It looks complicated… however, I’ve got to admit you’ve done a nice job of bitesizing the info, I think I’ll be able to follow this for my blog!

Comment by CNC on June 25, 2010 @ 9:45 am

Don’t worry Plastic, I’ve followed and works great, thanks Jeff!

Comment by Western Pa Health on June 25, 2010 @ 1:57 pm

I don’t usually fool around with headers, but this makes it easier. As always, I’m afraid I’ll do something to my blog and never be able to fix it!

Comment by Toy Fire Truck Addict on June 25, 2010 @ 6:29 pm

I’ve done my fair share of tinkering with the code in a few of my wordpress blogs in order to clean up that Header Nav bar. After all this time and effort I had yet to get one to look the way i wanted it, Until now. I am greatly appreciative for this little guide.

Comment by Michelle Jorkis on June 25, 2010 @ 10:45 pm

I recently moved to WordPress.com to WordPress.org. I am using Thesis as a theme. Do you recommend this coding for navigation item will work for all the themes. I am currently developing custom theme for my existing blog. What do you suggest shall I wait till my new design is completed and then apply this technique or apply this technique now.

Jeff Replied:
June 26th, 2010 at 7:04 pm

All themes are coded differently, this post is a basic guide but your particular theme may vary. As far as when to work on your theme… sorry I can’t think for you too.

Comment by Jef on July 2, 2010 @ 5:21 pm

Great post. I’ll be doing the move from org to com pretty soon and I’ve been using posts like this to get everything ready. Thanks.

Comment by shabana on July 3, 2010 @ 10:09 am

hey jeff ! thanks for sharing the above code for navigation toolbar i have been working with it for a longtime and has made my wordpress theme look good .

Comment by Indiana Anthem Rates on July 4, 2010 @ 2:49 pm

I have had one of my blogs for a while and I think my navigation bar was all bogged down because of that.

I’ll get around to trying this shortly. I’m hoping that will give it a more uncluttered look.

Comment by kale kasa on July 5, 2010 @ 7:43 pm

Don’t worry Plastic, I’ve followed and works great, thanks Jeff!

Comment by Charleston Fishing Charters on July 5, 2010 @ 11:35 pm

Thank you sooo much for this post, it helped a ton. Keep on doin what your doin!

Comment by Pandora beads on July 6, 2010 @ 4:03 am

The code is useful. Thanks Jeff! I’m learning it now!

Comment by Purushyottam Ghosh on July 6, 2010 @ 6:05 pm

Thanks for the article. I have been trying to do the same for a while but without much success. The step-by-step advice helped me immensely, though a few things you mentioned don’t tally with the theme I use (different themes are coded differently, so no surprise). Thanks again

Comment by Compare Web Hosts / Compare Web Hosting on July 7, 2010 @ 8:38 am

Just what I was after, I’m a web-design noob and this was explained well, thanks.

Comment by fadf on July 9, 2010 @ 9:17 pm

Recently, I have been learning exlude Pages , read the article, benefited a lot.

Comment by Sheing@gift cards on July 11, 2010 @ 8:15 am

I’m not a WordPress expert. This has been very helpful to a neophyte like me. Keep it up!

Comment by The Real PERSON on July 15, 2010 @ 11:07 am

Hey jeff, I like your tutorial for customizing the header. I have just started using WordPress, therefore it is helping me a lot in my website. Keep posting such good tutorials.

Comment by lansing movers on July 16, 2010 @ 5:51 pm

Thanks for the informative post and for actually replying to your readers’ comments. That’s something I don’t see very many blog owners doing and that makes me frustrated. Keep up the good work and I’ll continue coming back here to learn more about customizing my WordPress sites.

Comment by iPad Case on July 18, 2010 @ 9:33 am

Thank you very much for sharing. I would really like to customize my wordpress header navigation bar soon and fortunately, I have stumbled on your blog.

Keep it up!

Comment by Gutiar Scales on July 20, 2010 @ 2:13 am

Best solution I found yet thanks.

Comment by Woom on July 20, 2010 @ 4:12 am

Backup is very important for any work with the site. Thanks for explanation)

Comment by Virginia Criminal Lawyer on July 20, 2010 @ 6:16 am

Thank you for sharing,… have managed and uses wordpress once for my blog, and I find it hard customizing it..but now that I have these details on how to do it, think I’ll have to give it a try for my other site…the codes that you have posted where useful and for sure that could give me a big help.. thanks a lot.

Comment by Charlotte Lawyers on July 21, 2010 @ 3:10 am

I been searching on how to customize my blog Header Navigation Bar, I am thankful that I found this post. Thanks for this article. I tried it, very amazing thanks..

Comment by Greg Tsioros on July 21, 2010 @ 5:39 pm

I am a novice and have been wondering whether customizing the navigation bar is possible. Thank you for the great, detailed post on how to get the navigation bar I want. Also refreshing to know is that this process remains the same after two years. This convinces a beginner like me that perhaps I didn’t get into the blogging game too terribly late.

Comment by Steve Marino on July 22, 2010 @ 6:08 am

Wow, thanks for sharing. This issue has been driving me mad (actually, nearly literally) and the bigger my blog has got, the more of a mess it seemed to look.

Comment by Justin on July 22, 2010 @ 9:28 am

How is it that I’ve never been able to find the answer to this header dilemma I’ve faced for years. I have a few blogs I’m in the process of attempting to fix with your suggestions/methods; I hope they work, and I’ll let you know if they do. Maybe I’ll have to hire you for your services. Thanks!

Comment by oil filled heater on July 23, 2010 @ 1:24 am

I was what I was looking for on how to add external links menu. Late to the party but glad I made it.

Comment by Start Getting Website Traffic on July 23, 2010 @ 3:46 pm

Yep… thats about sums it up and it’s not that difficult… but remember… Things To Consider number 2!

Comment by Thomas on July 23, 2010 @ 6:24 pm

I followed your tutorial and it worked perfect. The personalized navigation bar was exactly what my blog was missing. I’m so glad you took the time to make this available.

Comment by Fred the Super Cleanse Colon Detoxifier on July 27, 2010 @ 6:33 am

Sounds like an interesting tutorial site. I am for one needs more learnings for wordpress, especially on header navigation. I hope to learn more on this.

Comment by Layanan SEO on July 28, 2010 @ 4:14 am

sounds like i have to try this one
Thanks for putting together this great post – some very good points here that all bloggers can start implementing.

Comment by Nasif on July 30, 2010 @ 3:24 pm

Looks complicated… Can I apply this method to change navigation menu in thesis theme ?

Jeff Replied:
July 30th, 2010 at 5:02 pm

Only way to find out is to try.

Comment by 4-Bang on July 30, 2010 @ 3:28 pm

Hi Jeff…. you are worth the Nobel Prize of WordPress guidance. Shall I suggest that? thanks for sharing…

Comment by chatjo on July 31, 2010 @ 7:40 am

hey jeff ! thanks for sharing the above code for navigation toolbar i have been working with it for a longtime and has made my wordpress theme look good .

Comment by Andi Faizal on July 31, 2010 @ 2:49 pm

This article is awesome. I have been looking for this explanation. I really afraid to add many page, because my header look bad. That is why I just put one link into it. Thanks for the info.

Comment by mido on August 2, 2010 @ 3:46 pm

really looks more easier with your code thanks

Comment by Free Tennis Betting Tipst on August 3, 2010 @ 8:07 am

Thanks for this, I find the whole editing of wordpress themes beyond daunting as I have very little HTML knowledge, but it seems at least a task a human can attempt now!

Comment by Jim Durrey at Hotels Bowral on August 4, 2010 @ 8:32 am

I’d say this thread is an oldie but a goodie, I’m new to wordpress and am looking to expand my knowledge. Cheers on the pointers here.

Comment by Reg Parker @ Sydney Home Cleaning on August 4, 2010 @ 8:36 am

The level of customisation available to WordPress is remarkable – I love it.

Comment by Narmadi on August 5, 2010 @ 5:47 am

Thanks for sharing a useful information, anyway how if we are not using header navigation? Will it affect to our blog SEO?

Jeff Replied:
August 5th, 2010 at 7:26 am

I don’t think the navigation bar has any effect on SEO.

Narmadi Replied:
August 5th, 2010 at 10:41 pm

Thanks for the response

Comment by Payroll software on August 9, 2010 @ 1:47 pm

I just did it to my new blog, it’s a great tips for a company blog to make it “more” like a company website. Though it has nothing to do with SEO but appearance is always an important element of a web page.

Comment by News Archive on August 10, 2010 @ 5:55 am

thanks for sharing this usefull information. i just set up a blog on my site and have been trying to customize it. this will really help me. thanks again

Comment by Kurt on August 11, 2010 @ 12:45 pm

Thanks so much for this! You saved me some serious headaches! Starting a new blog and I needed to customize the header navigation.

Comment by cyberadszone on August 12, 2010 @ 2:45 am

I just learned how to use wordpress, and thank you Jeff for this helpful information. I’ll try it later.

Comment by make money adsense on August 12, 2010 @ 6:16 am

I love wordpress too, there’s so much you can do with it. Thanks for the tip Jeff, going to try it now with my latest blog.

Comment by Wrestling PPV on August 14, 2010 @ 7:59 am

Wow !!! Excellent reference! I’ve done some PHP before, but haven’t touched it in ages, and this is a really nice refresher + guide to show novices like myself how to edit code. Thank you for this great article

Comment by Billy on August 16, 2010 @ 5:34 pm

Thank you for the extremely thorough and informative post. I am often looking for new ways to customize the look of my blog. A step-by-step tutorial like yours is precisely what I have been looking for. I am looking forward to your post about adding a navigation bar.

Comment by Jane @ Diet Rankings on August 17, 2010 @ 11:05 am

I didn’t realize that it’s possible to customize the navigation bar. Thanks for the detailed tutorial I will try it for myself

Comment by Electric on August 19, 2010 @ 11:20 am

Thanks for the post.
As you know Adding too many pages to a WordPress blog that has a navigation bar in the header can really make your WordPress blog a mess and this solution is efficient

Comment by Photo backdrops on August 19, 2010 @ 7:23 pm

Hm, I tried to do this but everything got messed up. Not sure if I made a mistake or if it just doesn’t work with the theme I’m using. I’ll try it again but now I have to figure out how to revert back to the original version of the code…

website design chester Replied:
December 22nd, 2010 at 9:29 am

I know it is a bit late but…If you are not 100% sure what you are doing with code it is advisable to make a local backup/copy while you are making changes. If you mess up you can just copy and paste from the unedited copy and this will save any headaches.

All the best.

Comment by Smart on August 24, 2010 @ 12:34 am

Awesome post buddy Now I can customize Blog Navigation

Comment by Concord Plumbers on August 24, 2010 @ 4:26 am

I am a wordpress user and I appreciate you sharing this it really improved my site and manage to learn many thing with your blog articles as well! keep up the good work!

Comment by Johnny on August 26, 2010 @ 2:52 pm

even though you were very detailed in this article i think i still rather just hire somebody like you to do it for me.

Comment by crib bedding sets on August 28, 2010 @ 8:24 am

Oh my gosh! Thank you for the tip about pages. I’ve been going ballistic with making a lot of pages..and well, never thought about using it sparingly. Thank you so much! Will work to make the navi bar better next time.

Comment by Alice in Wonderland Costumes on August 31, 2010 @ 5:59 pm

This is really good info. I’m not sure if this is common or not because I do not have a lot of experience with that many WP templates but one I just started using has a very easy to use menu option under the appearance which has an option to customize a menu below the hearer and a footer menu. It has made customizing and adding certain things to this site extremely easy. I don’t think all themes have this though so your walk through is very nice. Thanks!

Comment by Web Design Calgary on September 3, 2010 @ 4:17 am

I’ve been searching the net for this particular code for a long time. Some of my sites were done using the WordPress platform and I’m having a hard time customizing it because of it’s limited features and tools. So glad that WordPress has come up with this latest method in customizing the header navigation bar.This is a great help pal. Continue sharing info like this. Thanks a lot.

Comment by Aer conditionat bucuresti on September 6, 2010 @ 11:55 am

really looks more easier with your code ! thanks !

Comment by Austin Electrician on September 7, 2010 @ 5:02 pm

Thanks for your help! You definitely pointed me to the right php to edit in the header.php file.

I am really looking for a way to make page navigation that will add an additional specialty page navigation option once a person ventures down a certain category funnel.

Comment by Janish j on September 7, 2010 @ 5:53 pm

Nice post Jeff, very informative, precise and clear.. Thanx for sharing this post. I am looking for the same since long..

Comment by Nikki | Professional Writing Services on September 9, 2010 @ 1:56 am

Hi Jeff,

Thank you for explaining this to us. While the theme I’m using has an easy way of arranging the nav bar, it still helps to know the code mechanism behind this. We really can’t tell when or where the knowledge of such can come handy.

Comment by kiscope on September 13, 2010 @ 7:28 pm

I’m 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.

Comment by Lisa | remote pc access software on September 15, 2010 @ 12:10 am

I tried using drupal and I’m so glad i changed to wordpress. it is so much easier to use (my opinion).

I find that having 4-5 menu items in the header works for me and keeps the page very clean.

Enjoy,

Comment by Justin on September 19, 2010 @ 8:55 am

I usually getting trouble with CSS while customize the wordpress header navigation bar, especially if it’s rendered in IE.

Comment by Tony on September 21, 2010 @ 3:54 am

I love wordpress. I just started using it earlier this year (nw to blogging) and I love it.

Comment by your business book on September 22, 2010 @ 3:43 pm

very informative post
I followed step by step and ‘well done’
thanks a lot man

Comment by Yoga DVD on September 23, 2010 @ 9:10 am

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

Comment by ann smith on October 5, 2010 @ 11:52 am

Hi ! I have been wondering how to customize wordpress, as what I’ve seen to some blogs. Thanks for sharing the codes. This is very helpful !

Comment by storage beds on October 6, 2010 @ 8:31 am

I just started using has a very easy to use menu option under the appearance which has an option to customize a menu below the hearer.

Comment by Online brokerage companies on October 7, 2010 @ 11:07 am

I have had this very issue in the past. Too many links in the upper link bar made my blog look horrible. Your article gives me clear understanding how to control what pages are shown in the navigation bar. Thanks!

Comment by Tony on October 7, 2010 @ 1:57 pm

I’m a big fan of WP for my blog. Changing the navigation bar up has definitely helped.

Comment by Mommy D on October 7, 2010 @ 7:09 pm

THANK YOU! I have subscribed to your RSS feed. It’s really difficult to find instructions for things like this that are written for the regular user! Loving your blog!

Mommy D

Comment by gazete başlıkları oku on October 9, 2010 @ 4:27 pm

’ve done my fair share of tinkering with the code in a few of my wordpress blogs in order to clean up that Header Nav bar. After all this time and effort I had yet to get one to look the way i wanted it, Until now. I am greatly appreciative for this little guide

Comment by Sarkari Naukri on October 9, 2010 @ 11:59 pm

Jeff, thanks for sharing. Something that I have found to be invaluable in doing my WordPress theme edits

Comment by Naukri on October 10, 2010 @ 12:02 am

Word Press is ultimate for blogging on the Internet. Nice post Jeff, very informative, precise and clear.

Comment by Moist Heating Pad on October 19, 2010 @ 3:09 pm

Hey Jeff, thank you for the code, it worked beautifully without a hitch!

Comment by CNC on October 21, 2010 @ 6:01 am

I usually hardcode the whole template of the wordpress blog, as so far I’ve only used as one area of a bigger website. Obviously being keen to keep the transition as smooth as possible between website and blog. I do use the tags down the right side though, which allows for continual expanding without breaking the design.

Comment by Webmaster Club on October 28, 2010 @ 5:26 am

yeah, a CSS is new for me…
i usually play with php…

thanks for sharing…

Comment by Wood Chippers on October 29, 2010 @ 7:40 pm

Well, I am quite fine in CSS and still doing practicing for PHP. But am sure soon I will be master in both.

Comment by acne tips | Treatment on October 30, 2010 @ 9:21 am

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. I have had this very issue in the past. Too many links in the upper link bar made my blog look horrible. Your article gives me clear understanding how to control what pages are shown in the navigation bar. Thanks!

Comment by Amit on November 2, 2010 @ 5:30 am

I have used wordpress for blogging ,but never changed the look and feel of the inbuilt theme.After reading this post, i have the idea to change the look and feel of my blog.So this information is useful for me.

Thanks

Comment by Selecting a builder on November 3, 2010 @ 8:24 am

Thank you for the excellent thorough and informative post. This information is timely for me as I’m working on a new blog that will launch in December and I’m going to use what I learned here. Very helpful. I look forwward to your future post.

Comment by web designer Chico on November 9, 2010 @ 10:13 am

Really great work. The code will make it easier and simpler to have a great personalized header navigation bar.

Comment by Monitors on November 11, 2010 @ 1:22 pm

Awesome!! Thank you so much for this. I placed the external link code you gave into my navigation bar and it worked perfectly. Looking forward to reading more posts from you

Comment by Amish Crafts on November 11, 2010 @ 8:40 pm

The code was exactly what I was looking for. Thanks Google and thanks to the author.

Comment by ganhe dinheiro on November 13, 2010 @ 3:35 pm

wordpress is very good. once you learn to use does not care about anything else. very good this tutorial. I’ll add a navigation bar on my blog

Comment by Miraj Patel on November 17, 2010 @ 6:23 pm

The codex is great to keep up with the latest WordPress functions and how to use them. The trend in WP themes seems to be towards allowing non-programmers to customize too though, so eventually even things like these might not require any technical knowledge.

Comment by Female Dating Help on November 17, 2010 @ 8:06 pm

Is the header shown on the website an example of the output produced by the code given?

Jeff Replied:
November 17th, 2010 at 8:36 pm

Yes it is.

Comment by Printable Coupons on November 18, 2010 @ 5:49 pm

That’s the one thing about WordPress, there are some consistencies when it comes to the code, but you have to pay close attention when making changes, because the themes will get you every time!!

Comment by Printable Coupons on November 18, 2010 @ 5:51 pm

I appreciate this code. The header has always been a source of aggravation for me, and your tip just helped me.

Comment by Jay Ajay on November 19, 2010 @ 9:27 am

I have just got into WP blogs and having a fair amount of knowledge in php programming I have found WP easy to customize. I have done some tweaking of fonts and colors for my blogs using standard themes so that it looks and feels somewhat different form most who use these themes.

Comment by Britt Phillips on November 20, 2010 @ 12:54 pm

WordPress is the platform of choice for not only blogs but websites in general. Marketers such as myself have certainly embraced WordPress.

Comment by Finallyfast on November 21, 2010 @ 1:25 pm

Jeff, thanks for the great information. I’ve been looking for straight forward instruction on customizing navigation bar to no avail until I stumbled on your post. This post is by far the best I have found. And with your help I was successful in adding a external link to my website. Thanks.

Comment by AJ@ANI on November 23, 2010 @ 12:53 pm

I was precisely looking for how to add external links to the top menu. This code is really useful and I hope you will be providing much more information in Future. Now with the WordPress 3.0 launch this thing will get easier. You can create a menu directly from the admin side.

Comment by Uego on December 3, 2010 @ 8:37 am

Excellent article! I’ve done some PHP before, but haven’t touched it in years so this is a nice refresher and guide to show rookies like myself how to edit code

Comment by Alter on December 5, 2010 @ 2:39 am

Thanks for your examples. Im working alot more nowadays with sprited CSS and wordpress themes, but love new/old tricks like this.

Comment by online tutoring jobs on December 10, 2010 @ 9:48 am

I appreciate this code. The header has always been a source of aggravation for me, and your tip just helped me. WordPress is the platform of choice for not only blogs but websites in general. Marketers such as myself have certainly embraced WordPress.

Comment by Brilliant Canvas on December 23, 2010 @ 5:39 am

I’ve used WordPress a couple of times in setting up a blog, I’m no CSS and php expert but I found it very confusing editing to create your own template from scratch! Editing a bought template helped me out no end…. integrating your tips shouldn’t prove too troublesome however!

Comment by DeWayne on December 24, 2010 @ 8:59 pm

Super information on using wordpress! The code is extremely helpful. Thanks for taking to the time to make this post.

Comment by best PC rpg on December 25, 2010 @ 12:22 pm

I signed up for training courses in web design and guess what…? The teacher teach us how to make sites with dreamweaver and TABLES! There’s no trace of CSS at all!

Comment by SELinux Guy on December 26, 2010 @ 7:34 pm

Thank you for sharing your thoughts Jeff. The code was exactly what I was looking for. I am looking forward to read more posts from you.

Best wishes.

Comment by Warner Robins Real Estate on December 27, 2010 @ 1:14 am

Exactly what I’ve been looking for. Thanks for breaking this down into understandable chunks…much appreciated!

Comment by Graphic Design Cleveland on January 7, 2011 @ 3:53 pm

I too have purchased a wordpress template and have had problems editing it. Thanks for this post, it should help me out some.

Comment by Steve on January 12, 2011 @ 11:40 am

Thanks for bringing this old article to our attention again. Your step-by-step directions for customizing my header were quite helpful.

Comment by Aer conditionat on January 16, 2011 @ 4:04 pm

WordPress is magic…. you are magnificent ! Thanks for share Jeff

Comment by Toto on January 18, 2011 @ 1:35 am

i was used WordPress a couple of times in setting up a blog, I’m no php expert but I found it very confusing editing to create your own template from scratch!

Comment by Bedashree on January 20, 2011 @ 8:59 am

WordPress is the best platform for creating blogs .Thanks for providing with the code. It will be of great help.

Comment by Andy on January 23, 2011 @ 11:29 am

Thanks for the interesting post. But I edited the code to include only the main pages within my header menu:

But it does not work, giving me a syntax error:

Parse error: syntax error, unexpected ‘=’ in /wp-content/themes/greenpoint-milanda/header.php on line 73

Do the code maybe no more work that way with WordPress 3.0.4?

Comment by Andy on January 23, 2011 @ 11:51 am

Hahaha! I found the solution, very simple:

The addition, depth=1, tells the tag to only generate the first level of menu items. All subpages are ignored.

So, problem solved!

FinallyFast.com Replied:
January 26th, 2011 at 4:48 pm

Hey Andy, I’m actually having a similar problem with my blog. When you say you used depth=1 do you mean in the CSS file? I know there is a depth attribute for positioning in CSS, right?

Comment by webmaster on February 1, 2011 @ 11:23 am

Nice article, I must say you gave life to my wordpress blog, as I was bred by classic header navigation.
thanks

Comment by 3D LCD on February 1, 2011 @ 4:46 pm

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

Comment by John on February 5, 2011 @ 5:03 am

Wow.. Now, I can give a different and look which I want to my navigation bar. I always hated that tradition navigation bar, now I’m gonna customize it !

Comment by manage your money on February 7, 2011 @ 3:46 am

The header has always bothered me, and your tip helped me. WordPress is the platform of choice for not only blogs but sites in general.

Comment by sohbet on February 10, 2011 @ 9:14 am

hey jeff ! thanks for sharing the above code for navigation toolbar i have been working with it for a longtime and has made my wordpress theme look good .

Comment by matet Bruslee on February 16, 2011 @ 2:30 am

thanks for the additional information jeff

portable solar panels

Comment by Rory on February 22, 2011 @ 2:45 pm

A lot of people forget to make a backup of their theme file before they start editing it. Good point and something that can’t be stressed enough. This is something that I’ve stupidly forgot to address also.

Comment by Billy on February 23, 2011 @ 10:40 am

I recently set up my website using wordpress so I would have more control over content. I didn’t realize with simple code manipulation I could have such control over the navigation bar. Great clear and concise post, thanks.

Comment by Smink on February 27, 2011 @ 1:39 am

Thanks i had huge problems with my header!

Comment by Calvin on March 1, 2011 @ 11:26 am

I’ve always been afraid to mess around with code but your posts are very clear.. Great post !

Comment by Air Zimbabwe Flights on March 5, 2011 @ 9:46 am

Just started using wordpress, been almost like two months, lot to discover . Thankz for the help really appreciate it , keep up te good work Jeff and best of luck

Comment by Tony Hurley on March 7, 2011 @ 10:22 am

I have used this countless times and each time it’s fool proof and I find myself singing your praises for sharing the simple code.

Comment by Implant Dentures on March 10, 2011 @ 4:53 am

Thanks for sharing the nice article. I have been looking the google for this info and i wanted to say thanks to you for the post. Also, just off topic, how can i find a copy of this theme? – Regards.
…………….
Nic

Jeff Replied:
March 10th, 2011 at 5:44 am

This is a custom theme based on WP_Premium 1.0.

Comment by Računovodstvo on March 12, 2011 @ 1:31 pm

Great article Jeff!
Keep up the good work

Comment by research fuel economy on March 13, 2011 @ 3:31 am

WordPress, my web developer friend tells me I need to get on board. I didn’t know where to start, now I do!

Comment by NYC Wedding Photographer on March 17, 2011 @ 4:31 am

I have recently created an account for WordPress and I know that there are lot’s of things I should learn. Reading this article will help me a lot on customizing my own page to make it unique and looks different from ton’s WordPress user’s.

Comment by Peter the accountant on March 17, 2011 @ 8:42 am

Thanx for the code,i tried it and it work. Thanx again

Comment by Peter the accountant on March 17, 2011 @ 8:43 am

I tried it and it works,thanx!

Comment by David on March 17, 2011 @ 1:57 pm

We had this issues with our drop down, too many pages and it was not functional. This is a great solution thanks for the information.

Comment by John on March 24, 2011 @ 12:45 am

hey great article.

been trying to customize the word press header for ages

the article helped a lot

thanks

Comment by Cheerleading Shoes on April 5, 2011 @ 3:08 pm

Been looking for resources on how to customize my header nav bar. Finally found one here. Great help dude. Thanks a lot!

Comment by Jante 17 on April 8, 2011 @ 5:32 am

this post is so old and still usefull. thanks

Comment by Vijay on April 10, 2011 @ 3:12 am

Hi Jeff,

good to know how to play around with navigation bar and nice explanation

Comment by Buhth on April 18, 2011 @ 3:49 am

you have made it possible to customize the header of a friend’s blog. thanks

Comment by Remote Support on April 18, 2011 @ 9:20 am

Hello Jeff,

I was searching how did I customize my header navigation bar, then I found your post. I have used it and It is really working. I am very happy. Thanks for sharing this kind of valuable post.

Comment by Noah on April 25, 2011 @ 2:30 pm

This documentation is way better than the wordpress official documentation.

You can also edit these inside of wordpress it self using the built in editor. It’s not ideal for power users, but it does let beginners get started as long as they are making simple changes one at a time they should be fine. That way they don’t have to worry about FTPing in and grabbing the file and then editing it.

Mattress Specialists Replied:
May 10th, 2011 at 12:33 pm

Hi thought Noah’s comments were really useful, it is best to take it slowly and this encourages beginners, as it can be quite daunting at first. This site does help and gives really easy instructions

Comment by digital copywriter london on April 26, 2011 @ 10:25 am

Finally got one to solve my problem. I was looking for such kind of blogs. Thanks

Comment by New Roofs Calgary on April 27, 2011 @ 2:47 am

Thanks for sharing this! Definitely better than other guides on the Internet especially compared to WP documentation. So much more comprehensive and easier to understand.

Comment by Alobar on April 28, 2011 @ 6:33 am

Perfect! Thank you for this great resource.
I’ll try to move the whole navbar as an outside php file to include it and this way have the ability to customize only this small file.

Comment by Barcelona Hen Party on April 29, 2011 @ 8:02 am

I have a wordpress blog now, but I can’t figure out how to get readers into there! I have been using myspace and it’s been great, subscriptions like crazy, but a lot of them don’t have wordpress…so no leads there. Besides, I am posting the same info to both, so it’s not much of a point of them getting one. How can I increase my wordpress readership? I already utilize tags, but I still only got about 89 views in two weeks.

Comment by ibiza weekends on May 4, 2011 @ 1:25 am

Comment by nonoy on May 5, 2011 @ 7:51 am

I hadn’t been able to find the include and exclude codes on my Dream weaver theme. Guess i just publish the pages privately. Thanks a lot for this post anyway.

Comment by arbeit webcam on May 10, 2011 @ 3:16 pm

I always end up beeing tired of cooding myself – thanks to wordpress its popularity, i always find a piece of code that helps allows me solving my problems

Comment by Pulseras personalizadas on May 12, 2011 @ 10:31 am

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

Comment by Edgar@project management on May 14, 2011 @ 8:25 am

I’m going to try this code right now as i’ve been looking for a working one for a while. Thanks for sharing this valuable info.

Comment by Lisa on May 17, 2011 @ 1:41 am

I’m using Weaver 2010 right now for my new work-at-home site. Your post has been really helpful to me. Thanks. I’m definitely a WordPress newbie.

Comment by Jhonny Carr on August 8, 2011 @ 7:48 am

I’ve tried this tips and works on me.

Comment by RD Web Design on August 24, 2011 @ 3:34 pm

I use the WordPress 3.0 menu management system now. Much more powerful and easier to manage.

Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.