Child Categories Page

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.

catlist 

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.

catlist-1

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.

catlist-2

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.

catlist-3

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.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration is now open: New Member Registration

Membership is now open: Existing Member Login

Visit the: Forum and Feedback

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Mobile on Twitter Join Digital Mobile on Facebook
Share

Meet the Author

Articles by Digital Raindrops
Digital Raindrops admin is the author of the posts and this theme, WordPress development is a hobby taking more time than it really should.
Read More

Related Posts