This is a short post, the code is in the child theme download, just two files a page and a loop, on the Artisteer forum someone was asking about having a list of child categories in the page body, one of the replies pointed to a couple of examples, and like most times they showed how to return the list but not how to display them.

Well we had a look and thought an example might work well alongside our post list page download so here it is, adding a list is not really a problem, but just a list is not suitable for everyone, so we have a page with a post and the categories with descriptions.

The Categories Page

This is a page for Category A with the page text and categories B and C with descriptions below, the category title is a link to the category.

Setting up the Categories

Nothing hard here, create a parent category and it’s children, on the child categories add the parent category and the description to display in our list.

Notice the slug cat-a this is used for the page slug as well.

Setting up the Page

Here we create a page, and give the page the same slug cat-a the category slugs in the real world these could be music, and the children, classical, pop, jazz, folk, rock then the page would have the slug music as well.

Optional we can add text to display above our list, and most important of all we apply the page template Category List in the right panel or on quick edit.

Styling the List

We have not created a stylesheet for our categories list, we have just used an inline style, we can change this for a different theme if we wanted.

How does it Work?

The template file in the download is called page-catlist.php  this looks at the page slug and tries to find a matching Category, if it does it then calls a template part to run the loop.

File loop-catlist.php, this file looks for the category and then retrieves any child categories, if there are no children we will only see the page text as normal.

Bonus Section Sidebar Widget

As much as the list in the post body is fun, we have also added a sidebar widget into the mix, this only appears if there is a Category with sub-Categories, this is a theme specific widget, as we will need to style the list for a specific theme with different class names.

The Widget

We can add the widget from the Widget Admin Area to any sidebar, we might need add back any other widgets, as populating a widget Area will remove any of the pre-populated default widgets.

As you can see from the screenshots, screenshot one there are no options on the widget, as all code is in the widget php file, there are default settings  in the functions.php.

Screenshot two is when we click on a normal menu item, and screenshot three is when we selected Category One (cat-1), the list appeared with the Similar categories.

Plugin Settings

As this is a theme plugin, below is the code to add to functions.php this could be a childtheme or main theme, notice the $subCategories array, this is where we add the widget classes to match our theme, we would change these for our own themes. notice ‘description’ => false, we can set this to true for descriptions in the sidebar.

Adding our widget to a different theme, we would copy this functions.php code and adjust the settings, copy across the sub-category-widget.php as well.

We can use FireFox and FireBug to examine other plugins in the sidebar for the class names, so we can add these classes to our plugin setings, notice the Caption, this can be set in the language pack.

The Download

In the download there is a small Twenty Ten child theme, and we will need the twenty ten theme in the themes folder.

The child theme is called twentyten-catlist this will work out the box, so we can activate, test, and play with the styling.

Download the theme: [download id="51"]

As we said at the start this is just a reaction to a forum post, it will work as is, but we will need a intermediate skills in php to understand and change anything more than the styling.