WP Pro - Design, Development and Professional WordPress Hosting for Serious Bloggers » JavaScript

Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 "Navigation – Second Level Menu"

Sunny — Tue, 12 Feb 2008 03:22:47 +0000

This tutorial is running longer than we initially anticipated, we will break section 3 further into sub-sections.

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:

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

Anatomy of a Magazine Style Premium WordPress Theme – Part 1 "The Loop"

Sunny — Fri, 11 Jan 2008 21:31:20 +0000

Let me say it for the millionth time “content is king” and we all know that, don’t we?

Since content is the most important part of a site, your WordPress powered theme must emphasis on content presentation. Most cookie cutter themes come with a post list that runs based on the time your posts were published, in other words a chronological list of posts irrespective of its importance. Let’s face it, not all posts are created equal. Some posts are special, some are important and then some not quite so. Why then should all posts get the same treatment?

Magazine styled themes do a fine job of addressing this by introducing the featured posts option. Posts of a certain category got “top of the page” real-estate, which helps the site highlight the more important content.

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:

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.
Create a simple featured and non-featured posts distinction using minimal PHP hack, keeping it simple enough so as to not worry about pagination.
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.