Rodrigo Flores > Creating Complex Wordpress Navs, Part 1

Creating Complex WordPress Navs, Part 1

January 24, 2010

Say “Hello World!” to my first technical article! On Part One of this series I will cover how to recreate the top navigation on this site specifically, and, in subsequent posts, I will talk about other nav options…

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:

Log into your WP Admin area
Click on “Edit” under Pages (or under Posts)
Mouse over the page whose ID you need, and
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>

<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>

<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>

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>

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.

Enjoyed This Article? Share It! Discuss It!

4 Responses to “Creating Complex WordPress Navs, Part 1”

says:

February 26, 2010 at 7:01 am

Very Good Website –

Reply
- Rodrigo Flores says:
  
  February 26, 2010 at 10:09 am
  
  Thanks!
  
  Reply
Garen says:

February 10, 2010 at 3:02 am

You did a really good job with this site. I really like it. Very attractive. I am a designer too. Thanks for this information it cleared up some issues I was having with customizing one of my WordPress blogs

Reply
- Rodrigo Flores says:
  
  February 10, 2010 at 6:31 am
  
  Thanks! Just checked out your site. I like the banner style a lot. I am on the run for today, but I will take a deeper look at it later. I am really glad to hear people are finding this articles useful. Part II of this series will be out this week.
  
  Stay tuned & spread the word
  
  Reply