A site with poor navigation is just as bad as or worse than a site with poor content. Magazine style themes have overcome this barrier using JavaScript dropdown menus. But there is a simpler yet seldom used method that can be used and involves only the use of conditional WordPress tags.

Conditional Navigation

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

In our ongoing exercise to learn the nuts and bolts of a magazine style WordPress theme, we examine what has become by far the most ignored part of a theme design, the navigation menu.

As important as they are, they are often found floating in the header or worse the sidebar and almost never used to its fullest. Today we will attempt to change that. We are dedicating the next few sections just to discuss navigation menus, its varied uses, and the various methods of using it. So why wait, let’s get started.

Why are Navigation Menus Important?

There are three important roles of navigation menus, they are listed below in no particular order:

• It acts as the gateway to sections of the site you want your visitors/users to explore
• When designed correctly, it aids as a visual sitemap
• When used correctly, it enhances usability of your site and helps in SEO

How are Navigation Menus in Magazine Style Themes Different from Regular Themes?

If you notice closely, most regular themes have pages listed in blocks in the header or the sidebar and call it navigation. For all practical purpose, it works, and we are all complacent with it. In WordPress, there are numerous pages that are dynamically created like the archives, category pages, paginated pages, search pages and so on that are traditionally are not considered pages when you create a list using the template tag such as the one below:

	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

In fact, the above tag does not display any child pages! So how do overcome this limitation?

Let’s face it, WordPress is not just a Blogging ware like some might want you to believe, when used correctly, the full potential of the worlds best CMS can power sites big and small alike. The recent trend among high content-high traffic sites are the switch to magazine styled (mostly paid premium) themes to aid in maximizing content exposure. Most all new magazine styled themes worth your time is premium or paid, yet it requires customization and effort from the user to ensure the layout and content stays homogeneous. Is you already run a well established site with custom theme design and need to add functionalities similar to magazine styled premium themes without switching or paying for a new theme, you are at the right place.

How are magazine themes different from regular themes?

Although structurally most themes have either 2 or 3 columns, the similarity ends there. Magazine styled themes are content centric and less bloggy, they offer a platform to easily manipulate data, simplify data access and presentation, and make navigation easy.

What are we attempting to do?

We will not attempt to (re)create a magazine styled theme out of your existing theme, however, we will dissect some magazine themes and learn all the aspects that you can easily add to improve your site’s features and enhance user experience. We will focus on the following three components of the theme.

• Content Presentation – Featured, non-featured, category and asides posts
• Sidebar – DOMtab and tabber JavaScript module
• Navigation – CSS and JavaScript menu

Some of this work will involve JavaScript usage/applications, not to fear, they are all relatively simple, free to download and use and easy to adopt into any theme.

When will the guide be available?

Over the next few days, we will present the “How To” guide in 3 (or more) parts, each focusing on one of the aforementioned components. So stay tuned.

1. Copy your code (HTML or PHP or whatever else) and paste it in the Postable post area (which at first will read “For your copy-and-pasting pleasure.”).
2. Click the “make me friendly” button
3. The code is converted to characters, for example < will be converted to & l t ;
4. Copy the characters and past it on your blog post or comment within code tags
5. That’s it.

In order to demonstrate how it works, I have copied and pasted a piece of code from one of our latest themes below using Postable conversion:

<?php if (have_posts())  >
<?php $postCount=0; ?>
<?php while (have_posts()) : the_post();?>
<?php $postCount++;?>
<div class="entry entry-<?php echo $postCount ;?>">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<p class="meta">
Posted <?php the_time('m.d.Y'); ?> at <?php the_time('g:i a') ?> in <?php the_category(', ') ?><?php if (function_exists('the_tags')) { ?><?php the_tags(', ', ', ', ''); ?><?php } ?> received <strong><?php comments_popup_link('Have your say »', '1 Comment »', '% Comments »'); ?></strong>.
</p>

The code is then displayed in a format that can be copied and pasted and never executed. Works fine to me!

Update: Two other tools of significant use are SimpleCode by Dan Cederholm which I have adopted as part of the comment form on this site and elsewhere and the user submitted Asciible converters!