ncoded contact information

website design services web design service online shops service optimisation and seo services graphical design servicese-commerce service search engines services graphic design services

Creating Wordpress Sidebars with Submenus

Posted by admin On May - 15 - 2009

If you take a look at this website you will notice that each category has its own ‘menu block’ and within each menu block is listed the sub-categories. This tutorial we explain how you can implement this on you own WordPress website or blog.

Introduction:

The first thing that you need to establish is which sidebar you want to edit; This isn’t as clear as it could be as it is up the theme designer to setup which sidebars are used.

For this example we will assume you have 3 side bars, named sidebar.php, sidebar1.php and sidebar2.php - sidebar has full width, sidebar1 is half sized and is formatted to the left hand side, and sidebar2 is formatted to the right hand side. 

To get a clearer idea of this, just take a look at the sidebars used on this website, as these follow this convention.

Getting started:

For this tutorial we will just change one sidebar, but the procedure can be used on any sidebar - in this case we will be editing side1.php - which is the 1/2 formatted left hand side sidebar.

*Normally (see note above about theme designers choice of how to implement and position sidebars) the following code will be used to create a ‘menu’ block which displays ALL the categories you have, including both root and sub categories.

<?php //wp_list_categories('orderby=name&show_count=0&title_li=<h2>Article Categories</h2>'); ?>
<?php //endif; ?>

Explanation:

As you can see this functionality is achieved by calling the WP API function wp_list_categories(), passing it 3 argument parameters. The first one sets how the returned categories are ordered, the second sets if you want a count to be displayed (0=false, 1=true), with the third set how you want the title to display.

Required design:

Now if you consider what we require, instead of just one category listing with ALL categories - instead what we require is one ‘menu block’ per category, name as the root or parent category with all the sub categories below.

Implementation:

The code below implements this functionality via calling the same function above multiple times, but in each case limiting the sub categories being returned (as well as excluding the display of the root or parent category).

<?php wp_list_categories('orderby=name&show_count=0&use_desc_for_title=0&child_of=6&title_li=<h2>Online Tutorials</h2>'); ?>
<?php wp_list_categories('orderby=name&show_count=0&use_desc_for_title=0&child_of=3&title_li=<h2>Open Web Designs</h2>'); ?>
<?php wp_list_categories('orderby=name&show_count=0&use_desc_for_title=0&child_of=27&title_li=<h2>Open Software</h2>'); ?>
<?php wp_list_categories('orderby=name&show_count=0&use_desc_for_title=0&child_of=4&title_li=<h2>Modules Addons</h2>'); ?>
<?php wp_list_categories('orderby=name&show_count=0&use_desc_for_title=0&child_of=5&title_li=<h2>Themes Templates</h2>'); ?>
<?php endif; ?>

So if you need to split you master categories into ‘menu blocks’ displaying each category and it sub categories - then this is how to do it! simple huh!?

  • Share/Save/Bookmark

Other resoures that may be of interest to you

Comments are closed.

Website & E-Commerce Solutions


nCoded Website, IP & Content © 2003 - 2009 nCoded - All Rights Reserved - No part of this website may be reproduced without permission.