Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Customized Navigation Bar in WordPress

Customized Navigation Bar in WordPress

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.

How To »

The Template Tag, wp_list_pages(), displays a list of WordPress Pages as links. It is often used to customize the Sidebar or Header. So now the code of the top nav bar will look like this:

<ul id="pagenav">
   <li class="<?php if ( is_home() ) { echo 'current_page_item'; } ?>"> <a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>">Home</a></li>
</ul>

You can simply edit the header.php file and exclude any page id you want, you can also include the pages you want.

Creating Two-Tiered Conditional Navigation in WordPress »

A common navigational scheme, parent pages on top and child pages (if they exist) on bottom as seen at the top of this post.

How To »

Darren Hoyt goes through a nice solution to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.

post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>

And then he show us how to use CSS to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.

Use breadcrumbs

Breadcrumbs are great for so many reasons: usability, SEO, etc. In terms of plugins, there are many options, my favorite is Yoast’s Breadcrumbs, because it’s easy to implement. Another breadcrumbs plugin, gives you a new template tag called breadcrumb_trail() that you can place anywhere in your theme. Once that’s done, it’ll display a hierarchical menu of where the current visitor is on your site. It’s quite useful if you have more than a few pages or posts.

 


Leave a comment