I have a user guide on my website that consists of about 100 posts in various categories. All of the categories are contained in a parent category. Unfortunately, it was difficult for users to find the post they were looking for. As a result, I decided to create a Table of Contents that listed all the sub categories under the User Guide category. In addition, under each category, I wanted to list all post titles, with links, in an unordered list. Here’s how I did it.
NOTE: The following tutorial uses the WordPress TwentyTwelve template to illustrate how to create a page template for the Category List. If you are using a different template or a framework like Warp or Genesis, you need to figure out how to create a page template and then paste the category list code in that page.
- Install the Twenty Twelve theme if you don’t have it. You can download it here.
- Create a child theme for 2012. To do so, create a new folder in
/wp-content/themes/ called twentytwelvechild. You can call it whatever you like, but for this tutorial, I’ll use twentytwelvechild.
Click here for a detailed and excellent explanation of how to create a child theme. - In your twentytwelvechild child folder, create a file called style.css and add the following code:
/* Theme Name: Twenty Twelve Child Theme URI: http://example.com/ Description: Child theme for the Twenty Twelve theme Author: Author Name Author URI: http://your-url Template: twentytwelve Version: 0.1.0 */ @import url("../twentytwelve/style.css"); /* category list styles */ .cat-list ul { list-style: disc; margin:0 /* 0 0 20px */; } .cat-list ul li { line-height: 1.6em; } .cat-list a { text-decoration: none; } .main-navigation li { margin: 0 40px 0 0; margin: 0 2.457142857rem 0 0; position: relative; }
- From WordPress admin menu, select Appearance > Themes. You should see the Twenty Twelve Child theme you just created. Click Activate. Now, the Twenty Twelve Child theme should be your active theme.
- From WordPress admin menu, select Appearance > Menus.