We released another new advanced WordPress theme called MixedTape at HeadsetOptions. I originally posted the release notes here but decided to move it over to the site for distribution and support purpose.

This advanced theme includes user customization options page that allows design customization from within WordPress admin panel, Google Adsense placeholders , widget sidebars, threaded/nested comments, SEO codes (titles and tags) and more. Demo the theme and get your copy from here.

Refer to the readme.txt file within the theme folder for license information. This theme was commissioned by Neboweb Web Design Company.

This basic theme includes:

• Rotating headers (just add header image in the /header folder within the theme and image will show as header
• Google Adsense placeholders (just add your adsense ad codes in designated files and it will show up in select section of your site, theme pre-styled for adsense)
• Widget sidebars (allow you to display content list in one column or two columns within the sidebar)
• Personal static message (add your text or hypertext within a designated file and it will be displayed to the right of the header, theme pre-styled, requires no coding/styling)
• 125px image ads in sidebar can be set up from within a designated file (requires no coding/styling)
• Display random or your Flickr images in sidebar (minor set up may be needed, no plugin required)
• Threaded/nested comments ready
• Search engine optimized codes, titles and tags
• Numerous build in feature that helps navigate the site better

Refer to the readme.txt file within the theme folder for license information. A highly customized version of this theme can be seen in action on my other site.

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?

Granted that it will not necessarily minimize bandwidth usage by loading the page any faster, but nonetheless provides an alternative to having the entire content load on each and every page (even where not needed).

From our last experiment, we have a layout constructed with featured post option and some borrowed styling. Now we will add the cool tabbed interface to the sidebar.

There are many Java options out there that can generate these tabbed interfaces, the more popular ones are DOMtab and Tabber. We will introduce one other simple tab JavaScript at the very end that has recently found its way into WP themes, but for most part, we will focus on DOMtab and Tabber.

Creating such category specific presentation on demand requires both PHP script manipulation within the WordPress Loop and some changes to the CSS stylesheet. In continuing with the series on dissecting magazine style themes, we will attempt three hacks that will allow you to do the following:

1. Create a featured post that is displayed at the very top of the page, followed by regular posts; all of which happens taking into consideration the pagination aspects of the site so as to not repeat the featured post on every paginated page.
2. Create a simple featured and non-featured posts distinction using minimal PHP hack, keeping it simple enough so as to not worry about pagination.
3. Create asides to highlight useful bits of information without hogging potentially critical presentation real-estate, or in other words, creating non-intrusive side posts without using a plugin.

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!