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.
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
How To Create A Custom WordPress Page Template
There may be times when you want to create a blog page or that looks different than a normal page. Or Perhaps you want to use WordPress to run your entire website but want the main page of your domain to look completely different than a typical blog. This is an easy way to customize WordPress that can be very easily accomplished by creating a custom WordPress page Template.
Add Link To A Custom WordPress Footer
One of the easiest ways to customize WordPress is to add links to the footer of the themes template. You could add the link to any website you want and if your blog is part of your website adding a link to the homepage of your site will help your search engine rankings as well. This is a little WordPress Guide that will help interlink your website. Instructions with video…
How To Really Screw Up Your WordPress Blog
I get a lot of requests for help with WordPress blogs that are not working properly, look terrible or worse don’t show up at all. I have seen and have had to backward engineer some really interesting things for some people. So in my typical sarcastic style here is what to do if you really want to screw up your WordPress blog.
WordPress Version 2.9 Is Ready Or Is It?
Just before Christmas WordPress version 2.9 was released. If you haven’t already upgraded, and since this isn’t really a security release, I might suggest you wait for version 2.9.1 before doing so.
Burn Your WordPress RSS Feed At FeedBurner
Although your WordPress blog has a built-in RSS feed you may want to enhance it with FeedBurner. Here is an older how-to guide on burning your RSS feed with FeedBurner. From what I can tell it is still very much the sme as it was back when the post was mad originally.
Remove WordPress Blog Title And Description
There might be a situation when you have a custom WordPress theme or just a custom header and want to remove the WordPress blog title and or the description. There are several right ways to do this and one very very wrong way.
How To Add Images To A WordPress Post
Inserting images into a WordPress post is fairly easy to do, but you must be careful and make sure that the images are properly formatted, and the right size.
WordPress Blogging With An iPhone
The WordPress team has developed an iPhone app for WordPress that lets you write posts, upload photos, edit pages, and manage comments on your blog from your iPhone or iPod Touch.
WordPress 2.8.5 Another Security Release
Most of you that frequent your self-hosted WordPress site should be well aware of the new version, 2.8.5 now available. As with all incremental security releases, it is recommended that you upgrade as soon as possible.
