Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 "Navigation – Second Level Menu"
- Share Your Thoughts ↓
- 02.11.2008 - 7:22 pm
Second Level Menu
The second level navigation is by far the easiest, tried and tested method of the three. Section 3.1 will cover the second level menu coding and it’s usage.
To add these second level navigation, we simple use the tags that generate a string of categories (or archives) and place them beneath the main navigation menu and style appropriately.
For example, to add a list of categories below the main menu, add the following code in the header.php (assuming your main menu is in the header):
<?php wp_list_categories('title_li=&hide_empty=0'); ?>
Note: the hide_empty tag unhides or hides unused categories.
Where to place the tag? Right below the template tag for page as described in the example below.
If we revisit the theme we created from the last exercise you will note that the main menu is displayed in the header in a single row.The code for this menu (simplified) looks like below:
<div class="wrap menu">
<div class="right rss">
<a href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.gif" alt="RSS" /></a>
</div>
<ul>
<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
</div>
We will add the category code below it to generate the second layer menu. The code to add will look something like this:
<div class="subwrap submenu">
<ul>
<?php wp_list_categories('title_li=&hide_empty=0'); ?>
</ul>
</div>
To easily style this second level, use the existing style for the main menu and make minor changes to the display (colors and such). In this case, we will enclose this second level in a div called “subwrap submenu”, the main menu is within a div called “wrap menu”.
13 Responses to “Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 "Navigation – Second Level Menu"”
Trackbacks
- Anatomy of a Magazine Style Premium WordPress Theme - Part 3.2 “Conditional Navigation Menus” // Headsetoptions.org
- When To Use Magazine-Style Themes For Blogs? | [w3b]ndesign
- Anatomy of a Magazine Style Premium WordPress Theme - Part 3.2 “Conditional Navigation Menus” » WP Pro - Web Design, Development & Pro WordPress Hosting for Serious Bloggers
Leave a Response
Some Useful Info
Use SimpleCode while including codes.
The links from all comments have the no-follow tag to prevent spammers from gaming their way up into SERP. So please keep the comments clean, try not to use keywords as "Names" or post unnecessary links in the comments. Thank you for cooperating.
About
WP Pro was conceived and developed with one goal in mind, “To bring our experience and expertise gathered over the years to one convenient location on the web to serve the needs of bloggers and webmasters“. -Sunny
To learn more about who we are and what we can do for you, read on...
-
Archives
-
Categories
Popular Tags
Blog Design Cockney Consulting CSS Google Grid Habari Project Hosting HTML Internet JavaScript Magazine Style WordPress Themes PHP Plugin Reboot Search Engine Optimization SEO Site Validation Spam Support Tag Technology Toolbox Troubleshoot Tutorials Web Web 2.0 Web Design Web Development Web Hosting Web Sites Widget WordPress WP XHTML
Copyright © WP Pro – Design, Development and Professional WordPress Hosting for Serious Bloggers - CSS | XHTML | Login | Return to Top ↑
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!
@ CleverSage
Thank you. I am glad I could be of some use
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!
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?
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.
I have seen pirated copies of the revolution theme going around somewhere. It was not you who designed it, was it?
@ 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
@ seo
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.
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
brilliant. So simple and easy, and explained well. So, I expect the conditional explanation involves how to target related pages? Looking forward to more.