Anatomy of a Magazine Style Premium WordPress Theme - Part 3.2 “Conditional Navigation Menus”

As the tutorials run longer than we prefer, we have broken section 3 into 3 sub-sections, you can find sub-section 1 regarding second level menu here.

The navigational aspect of a site, especially one that is database driven, should have menus that are dynamically generated just like the rest of its content, but is seldom the case. The reason is not the lack of information or techniques, but rather the developer underestimating the role of effective navigation to the success of a site. A site with poor navigation is just as or bad or worse than a site with poor content.

Magazine style themes have overcome this barrier using Javascript dropdown menus. The other simpler yet seldom used method involves the use of conditional WP tags and some styling.

Conditional Navigation

We will use the same theme we created during the last tutorial. As you can see it has conditional page tags built in, just like any of our other themes.

When you dice it, we will find that aside from the usual page tag which looks like this:

1. wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);

You will notice we added the conditional tag code within the same div, which looks like this:

1. <?php global $notfound; ?>
2. <?php /* Creates a menu for pages beneath the level of the current page */
3. if (is_page() and ($notfound != ‘1′)) {
4. $current_page = $post->ID;
5. while($current_page) {
6. $page_query = $wpdb->get_row(”SELECT ID, post_title, post_status,
7. post_parent FROM $wpdb->posts WHERE ID = ‘$current_page’”);
8. $current_page = $page_query->post_parent;
9. }
10. $parent_id = $page_query->ID;
11. $parent_title = $page_query->post_title;
12. if ($wpdb->get_results(”SELECT * FROM $wpdb->posts WHERE post_parent = ‘$parent_id’ AND post_status != ‘attachment’”)) { ?> <li>Subpage:</li> <?php wp_list_pages(’sort_column=menu_order&title_li=&child_of=’. $parent_id); ?>
13. <?php } } ?>

If you look closely, all the conditional code requires is that if the page you are on has child pages, it will be displayed right next to a text called “Subpage:”.

All you need to do is add this code within the same div as the main menu (either in the header or sidebar). That’s it. So there you have it, the conditional navigation.

See the original post here: