How To Customize WordPress Header Navigation Bar

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 other than asked in comments.

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 theme’s 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.

https://gist.github.com/wpcount/c39fe2c7b2be7fc1cfd7fb039646c6e3#file-menu-php

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 change so often anymore I will not give specifics how to edit a page. Let’s just say if you can’t figure that out you shouldn’t be messing with the theme’s 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.

https://gist.github.com/wpcount/c39fe2c7b2be7fc1cfd7fb039646c6e3#file-menu-pages-php

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:

https://gist.github.com/wpcount/c39fe2c7b2be7fc1cfd7fb039646c6e3#file-list-pages-php

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:

https://gist.github.com/wpcount/c39fe2c7b2be7fc1cfd7fb039646c6e3#file-pages-list-php

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.

https://gist.github.com/wpcount/c39fe2c7b2be7fc1cfd7fb039646c6e3#file-nav-bar-php

Things To Consider:

1. All WordPress themes are coded differently so your code might look different than the examples above.
2. Always, always make a backup of any theme file before you attempt to edit it!
3. These changes are theme specific and will need to be done again if you switch themes.
4. 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.
5. 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.
6. More information about template tags for listing WordPress pages can be found here: Template Tags/wp list pages