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
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.
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.
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.
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: Twenty Ten Category Page List (1110)
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.
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.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
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.