Have you been looking forward to the Sidebar? At first glance, the Sidebar looks difficult, but it isn’t tricky at all. Once you get used to its structure, you’ll be able to code and style it very quickly.
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 tag:
Step 2: Start an unordered list within your new sidebar box.
Step 3: Add a list item (LI) inside the unordered list (UL) and put a sub-heading inside the list item (LI).
Notice the tab spacing added before the
and
tags for organization.
– open list item
– open sub-heading
– close sub-heading
– close list item Again, you don’t need to wrap around the word Categories. If you’re building this theme for yourself, it’s okay if your sub-heading is
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:
Here’s what that means:
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:
and
tags around : When you call for the category links list using wp_list_cats(), it automatically attaches a set of
and
(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.
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 tag:
Step 2: Start an unordered list within your new sidebar box.
- – open unordered list
Step 3: Add a list item (LI) inside the unordered list (UL) and put a sub-heading inside the list item (LI).
Notice the tab spacing added before the
tags for organization.
– open sub-heading
– print the word Categories
– close sub-heading– close list item Again, you don’t need to wrap around the word Categories. If you’re building this theme for yourself, it’s okay if your sub-heading is
Categories
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:
Here’s what that means:
- – open another unordered list
– call for the list of category links
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 my Sub 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.
tags around : When you call for the category links list using wp_list_cats(), it automatically attaches a set of
(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.
Source: www.wpdesigner.com
Comments
Post a Comment