Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 “Navigation

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

Share Your Thoughts ↓
02.11.2008 - 7:22 pm

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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.

revolution magazine style theme 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?

Sub-pages: 1 2 3 4 5

HTML, JavaScript, Magazine Style WordPress Themes, PHP, Search Engine Optimization, SEO, Tag, Web, Web Sites, WP, XHTML

Design, How to, Resources, Tips

CleverSage

February 12, 2008 • 5:48 pm

Awesome! I’ve never really been that technically-oriented, but you’re breaking down how these themes are made makes it so much easier to digest, thanks so much!

Sunny

February 12, 2008 • 8:55 pm

@ CleverSage

Thank you. I am glad I could be of some use

February 15, 2008 • 6:45 pm

Is it easy to customize the header on this theme w/ an image? I love it, but would like to plug in a logo instead of the text. Great work!

February 15, 2008 • 10:46 pm

Also – I notice that the posts are short and then say “Read More.” Does it only display a certain number of characters and then readers will need to click? Is that an option that can be turned off so that the entire post can be displayed?

Website Design Linda

February 16, 2008 • 5:56 pm

I love how you provide some code and explain the variations.

For instance, the navigation in the header and the template ttag and code your provided.

seo

March 14, 2008 • 7:37 am

I have seen pirated copies of the revolution theme going around somewhere. It was not you who designed it, was it?

March 15, 2008 • 10:45 am

@ seo

That is below the belt, just because I can do something does not mean I will rip someone off. You must be either kidding or stupid, you pick

March 16, 2008 • 8:46 am

Revolution is by Brian Gardner, I am sure he is aware of the rips, it happens to all designers and I have my share of it on almost a weekly basis when I find someone is using my theme with their credits and worse hard coded adware.

March 16, 2008 • 8:39 am

Oh no, you misunderstood me. I was just warning you someone is stealing your templates just in case you were the original designer of that theme. I was not accusing you of doing this

MIKE

September 16, 2008 • 10:38 pm

brilliant. So simple and easy, and explained well. So, I expect the conditional explanation involves how to target related pages? Looking forward to more.