• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
  • Skip to footer navigation
  • Services
  • Our Themes
  • Start a WordPress Blog
  • WordPress Hosting
WPArena

WPArena

WPArena covers all things related to WordPress: Themes, Plugins, Tutorials, Guides, Deals and Beginner tips.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Deals
WPARENA » Tutorials

How To Customize WordPress Header Navigation Bar

TwitterFacebookWhatsAppGoogle+BufferLinkedInPin It

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.

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.

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:

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:

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.

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

You Might Also Like These Posts:

  • Understanding WordPress API Key – The Global Dashboard Confusion
  • How To Install WordPress With Simple Scripts
  • How To Clean WordPress Database
  • The Power of WordPress Custom Fields
  • WordPress Settings Not in the Settings Menu
Editorial Staff

Editorial Staff

Editorial Staff at WPArena is a team of WordPress experts led by Jazib Zaman. Page maintained by Jazib Zaman.

Previous Post Highlight Features of WordPress 3.0
Next Post Document Sharing Plugins for WordPress

Reader Interactions

Leave a Reply Cancel reply

Thank you for choosing to leave a comment on WPArena. Please bear in mind that all comments are moderated according to our comment policy. Your email address will never be published but is required. Do NOT use keywords in the name field. First name is fine with us. Lets have a meaningful conversation and respect others opinions.

Primary Sidebar

Over 40,000+ Readers

Get fresh content from WPArena

Recent Posts

  • Careers That You’ll Actually Want To Be Stuck With For Life
  • What Marketing Do Customers Take Notice Of?
  • Ad-Maven Review: One of the best monetization tools out there
  • Four Best WordPress Plugins for Content Marketers
  • CometNine Review – A lesser known web host with great features

Our Services

WordPress
Installation
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store

Footer

About

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections. The site design is updated at regular intervals with more features. Look here.
You can read more about WordPress Arena here.


WPArena Marketing Material

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Deals

  • Clickright Theme 30% OFF
  • Hostgator Coupon
  • ionMag Theme 30% OFF
  • OIO Publisher 20% OFF

More Deals »

© 2019 · WordPress Arena · All Rights Reserved.
We are not affiliated with Automattic or WordPress.

  • About
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact