Before jumping on the Sidebar, here’s what your index.php file should look like.
Don’t forget to open Xampp Control…
Step 1: Let’s wrap a box with a class named, sidebar around everything in the Sidebar. Type this code under the container box and above the </body> tag:
<div class=”sidebar”>
</div>
Step 2: Start an unordered list within your new sidebar box.
<ul> – open unordered list
</ul> – close unordered list
Step 3: Add a list item (LI) inside the unordered list (UL) and put a sub-heading inside the list item (LI).
<li><h2><?php _e(‘Categories’); ?></h2>
</li>
Notice the tab spacing added before the <li> and </li> tags for organization.
<li> – open list item
<h2> – open sub-heading
<?php _e(‘Categories’); ?> – print the word Categories
</h2> – close sub-heading
</li> – close list item
Again, you don’t need to wrap <?php e(‘ ‘); ?> around the word Categories. If you’re building this theme for yourself, it’s okay if your sub-heading is <h2>Categories</h2>
Save the index.php file and refresh your browser. You should see the Categories sub-heading structured like this:
The little bullet or dot before your sub-heading indicates that the sub-heading is sitting in a list item (LI). If you have two list items within your unordered list (UL), there should be two bullets. It’s like taking bulleted notes. Dot each item right?
Step 4:
Add the following codes within the list item:
<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>
Here’s what that means:
<ul> – open another unordered list
<?php wp_list_cats(); ?> – call for the list of category links
</ul> – close unordered list
Save it and refresh the browser. Here’s what my category links look like:
Your default category is Uncategorized. If you did not publish under multiple categories, then your list of category links should have only one link, the Uncategorized.
Further explanations:
sort_column=name – list category links alphabetically
optioncount=1 – display the number of posts made under each category
hierarchial=0 – don’t turn sub-categories into sub-list-items, which explains why mySub Category link is listed in the first level of the list.
& – each time you add on another attribute, you have to type & before it to separate it from the existing attributes. For example & sits in between sort_column and optioncount.
Why you didn't wrap the <li> and </li> tags around <?php wp_list_cats(); ?>:
When you call for the category links list using wp_list_cats(), it automatically attaches a set of <li> and </li> (list item) tags around each link. Look at your browser, go to View -> Page Source or Source; after the window pops up, scroll to the bottom to see the codes for the category links list; notice that each link has a set of list item tags around it.
When dealing with the sidebar, unordered list, and list items, it’s very important to remember:
Rule #1: Close everything in the order that you open them.
Follow this WordPress Theme Tutorial Series from the beginning.