WORDPRESS 11. Sidebar (and categories).

Well, are you ready to learn about creating a sidebar? At first glance, the sidebar looks difficult, but in fact, it is not so scary. You just need to understand its structure, and you can code and style it very easily and quickly.

Before you start a sidebar, look at how your index.php file should look.

Step 1

First, put a block with the sidebar class around everything in the sidebar. Paste this code under the container block and above the </ body> tag :

<div class = "sidebar">

</ div>

Step 2

Start an unnumbered list in the new invisible block area in the sidebar.

<ul> - open unnumbered list

</ ul> - close unnumbered list

Step 3

Add a list item ( LI ) to an unnumbered list ( UL ) and subtitle this item ( LI ).

<li> <h2> <? php _e ('Categories'); ?> </ h2> </ li>

<li> - open the list item
<h2> - open subtitle
<? php _e ('Categories'); ?> - print the word Categories
</ h2> - close the subtitle
</ li> - close the list item

Once again, you do not need to put <? Php e (""); ?> around the word Categories . If you are doing this topic for yourself, it will be enough to have the subtitle <h2> Categories </ h2>

Save the index.php file and refresh the browser. You should see the subtitle Categories .

A small black dot in front of the subtitle indicates that it is in the list item ( LI ). If you have two items in an unnumbered list ( UL ), there will be two points. Like marking on a regular list, remember?

Step 4

Add the following code to the list item:

<ul>
<? php wp_list_categories ('sort_column = name & optioncount = 1 & hierarchical = 0 ′); ?>
</ ul>

This is what it means:

<ul> - open another unnumbered list.
<? php wp_list_categories (); ?> - call a list of links to categories
</ ul> - close unnumbered list

Save and refresh your browser. Here are my links to categories:

Your default category will be Uncategorized . If you have not created any categories in the blog, then your list will consist of only one link - Uncategorized .

Additional options :

• sort_column = name - sort links to categories alphabetically
• optioncount = 1 - display the number of posts created in each category
• hierarchial = 0 - do not put subcategories in separate sub-items of the list, this explains why my sub-category link is located on the first level of the list.
• & - every time you add a new attribute, you must put the & sign in front of it to distinguish it from the rest of the attributes. For example, & is between sort_column and optioncount .

Why we didn’t put <li> and </ li> tags around <? Php wp_list_categories (); ?> :

When you call up the category list using the wp_list_categories () function, the <li> and </ li> tags are automatically attached to each link. In your browser, go to View> Page Source or CTRL-U ; when the pop-up window appears, hover the cursor down to see the code for the category list; Please note that around each link there are list item tags.

When working with a sidebar, an unordered list and a list item, it is important to remember rule # 1 : close all tags in the order in which they were opened!