• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Wordpress Website Design, WordPress Support, WordPress Training

WordPress How to Create a List of All Categories and Posts

April 10, 2013 by Pat Fortino

WordPress Category ListI 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.

  1. Install the Twenty Twelve theme if you don’t have it. You can download it here.
  2. 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.
  3. 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;
    }
  4. 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.
  5. From WordPress admin menu, select Appearance > Menus.
    Pages: Page 1 Page 2 Page 3

Comments are closed. If you have information to share, contact me here.

Previous Post: « Review RSForm!Pro for Joomla
Next Post: How to Add a Responsive Menu to WordPress Twenty Twelve Template »

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...