Creating Complex WordPress Navs, Part 1

This nav is made up 2 sections: a main nav, and a subnav.

In this case, I didn’t have that many top pages, so I hard-coded the main nav and used the get_permalink() function to link to the right pages. The only thing you need is to know the IDs of the pages you want to target. To find out:

  1. Log into your WP Admin area
  2. Click on “Edit” under Pages (or under Posts)
  3. Mouse over the page whose ID you need, and
  4. Look at the status bar at the bottom of the browser.

The ID will be the last element in the URL (e.g. “…&post=65″).

The same technique also works if you want to find out a particular post’s ID.

The Main Nav

Below is the xHTML/PHP code for the hardcoded main nav, showing only one item. The one thing to note about it is that when you don’t use a function like wp_list_pages(), you also have to add the current_page_item class manually.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="nav">
<ul>
    <!-- icon -->
    <li <?php if($post->ID == 6) { echo "class='current_page_item'"; } ?>>
        <a title="<?php echo get_the_title(6); ?>" href="<?php echo get_permalink(6); ?>">
            <img title="<?php get_the_title(6); ?>" alt="Portfolio"
src="<?php bloginfo('template_url'); ?>/img/icons/portfolio-nav.png"  />
        </a>
    </li>
    <!-- text -->
    <li <?php if($post->ID == 6) { echo "class='current_page_item'"; } ?>>
        <a title="<?php echo get_the_title(6); ?>" href="<?php echo get_permalink(6); ?>">Portfolio</a>
    </li>
</ul>
</div>
<!-- end nav -->

The Subnav

For the sub-navigation, I didn’t want dropdowns. Rather, I wanted the child pages to stay on only when you are on a particular section or on one of its child pages. So, I used conditional statements and the wordpress function wp_list_pages(). Within the function’s arguments, I filtered out the pages that belong to that particular section with the “child_of” parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php // check for current post and parent
global $post;
$cID = $post->ID;
$cParent = $post->post_parent;
?>

<div id="subnav">
<?php if($cID == 5 || $cParent == 5) : ?>
    <ul>
        <li<?php if($cID == 5) { echo ' class="current_page_item"'; } ?>><a title="Home"
            href="<?php echo get_option('home'); ?>">Home</a></li>
        <?php wp_list_pages(array(
                'title_li' => '',
                'sort_column' => 'menu_order',
                'child_of' => 5
                )
            ); ?>
    </ul>
<?php endif; ?>
</div><!-- end subnav -->

The CSS

Nothing surprising here, the li elements are floated left against each other. And both nav blocks are placed on the page using absolute positioning relative to their parent elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#nav-wrap {display: block; width: 570px; height: 48px; position: absolute; top: 41px; left: 384px;  }

#nav { display: block; }

#nav ul li {
    float: left; height: 48px; line-height: 62px; font-size: 17px; margin-left: 10px; margin-right: 10px;
    font-family:  SansationRegular, "Sansation Regular", "Century Gothic", Verdana, sans-serif;
    display: block;
}
    #nav ul li a { color: #999; } #nav ul li a:hover { color: #666; }
   
    #nav li.current_page_item a { color: #000; }
   
    #nav li.current_page_item a:hover { color: #000; }
   
    #nav .icon:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }

#subnav { display: block;  }

#subnav ul { margin-left: 30px; }
   
#subnav li { float: left; margin-right: 14px; display: block; margin-top: 28px; font-size: 13px; }

    #subnav ul li a { color: #999; } #subnav ul li a:hover { color: #666; }
   
    #subnav li.current_page_item a { color: #4773BE; }
   
    #subnav li.current_page_item a:hover { color: #6894D2; }

Final Notes

I am very aware that this was probably “too much work” for this nav and very similar effects can be achieved using much less code, yet by doing it this way you can have full control over exactly how you want elements to behave. Not to mention, most of it will work even if javascript is disabled. Last but not least, the tooltip effect on the icons is a simple implementation of jQuery Tools. Just include their library and follow their excellent tooltip documentation.

Also, note that for SEO purposes, how you display your navigation is almost irrelavant as long as you don’t change the permalink structure of your URLs. If you have to do so, then you will experience the burden of having some links displayed in Google search results with broken links until a Google bot recrawls your site.

All said, on the next article in this series, I will build a very similar nav using the WP_Query object and you will learn a lot about implementing WordPress custom loops.

Stay tuned.

break

Current (First!) Poll

Which of the following do you think will have a greater impact on your final decision of hiring a particular web designer? (Pick two)

View Results

Website Designed & Developed by Rodrigo Flores © 2010