Implementing Flexible Website Navigation with WordPress 3.0 | 2

Implementing Flexible Website Navigation with WordPress 3.0 [con't]

Step 4: The Code

As I mentioned earlier, using WordPress 3.0, you can build a decoupled menu structure with very little code. As this is a theme-related customization, you will need to add the code to the theme. We will be editing the following files: functions.php, header.php, sidebar.php and styles.php. (Note: In the example, I use WordPress' default theme called TwentyTen.)

If programming (in PHP) is not your forte, just copy and paste the code in the right file and things should work for you. And if PHP is one of the languages you speak, then you will appreciate the simplicity of this solution.

functions.php

Add the following lines of code at the end of the functions.php file in the theme directory:

function GetMenuItemsAsArrayForMenu($menu_name) { $menus = wp_get_nav_menus(); foreach ($menus as $m) { if ($m->name == $menu_name) { $menu_items = wp_get_nav_menu_items($m->term_id); break; } } $array = array(); if ($menu_items) { foreach ($menu_items as $mi) { $item = array(); $item['id'] = $mi->ID; $item['object_id'] = $mi->object_id; $item['url'] = $mi->url; $item['title'] = $mi->title; $array[] = $item; } } return $array; }

This function takes the name of the menu and returns its items as an array. We will be using it in the header.

header.php

Open the header.php file and look for the following line:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Note: If you are not using TwentyTen, then you will have to find the part of the code that is generating the HTML for the top-level links and comment it.

Replace that line with the following code:

<div class="menu-header"> <ul id="menu-primary-navigation" class="menu"> <?php $menu_items = GetMenuItemsAsArrayForMenu('Primary Navigation'); $post_primary_id = get_post_custom_values('primary_menu_id', $post->ID); $post_primary_id = $post_primary_id[0]; foreach ($menu_items as $mi) { if ($post_primary_id == $mi['id']) $active_classes = "current-menu-item page_item page-item-".$mi['object_id']." current_page_item"; else $active_classes = ''; ?> <li id="menu-item-<?= $mi['id']; ?>" class="menu-item menu-item-type-post_type <?= $active_classes; ?>"><a href="<?= $mi['url']; ?>"><?= $mi['title']; ?></a></li> <?php } ?> </ul> </div>

In a nutshell, this code generates the top-level links, adding a class to the menu item that is the top-level link for the current page.

sidebar.php

In the sidebar, we want to show the secondary links. This is achieved with the following lines of code:

<div id="secondary-links"> <?php $secondary_menu = get_post_custom_values('secondary_menu'); if ($secondary_menu) wp_nav_menu(array('menu'=>$secondary_menu[0])); ?> </div>

Add the above code at the top of the sidebar.php file.

That's it! In the browser, go to the URL where you have installed WordPress and see the navigation in action. There is one last thing that needs to be done though.

style.php

Add the following CSS at the end of the styles.css file so that the secondary links appear properly and the current page is styled differently.

/* Secondary Level Navigation -------------------------------------------------------------- */ #secondary-links { float: right; width: 239px; border-left: 1px #999 solid; } #secondary-links ul { list-style: none; } #secondary-links ul li a, #secondary-links ul li a:visited { text-decoration: none; font-size: 14px; line-height: 28px; color: #5e673a; } #secondary-links li.current-menu-item a { color: #a12a2a !important; }

WordPress 3.0: Blog Platform to Full CMS

Many people consider WordPress a content management system (CMS) and I do too, but with an asterisk. Why? Because it is primarily a blogging tool. While there are several plugins to help you take it beyond just a blog, the backend interface and the navigation system is extremely blog-centric.

With the release of WordPress 3.0, I can definitely see a shift in the positioning of the tool. With the introduction of custom menus and custom page types, I am ready to erase the asterisk and move WordPress toward the top of my CMS list. The options that CMS products such as Drupal and Joomla offer may be superior to WordPress, but WordPress has the advantage of an easy-to-use backend interface.

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both