meinterest

idebar is a narrow vertical column with a lot of information about your website. Most of wordpress themes has a sidebar, maybe one, maybe two, or one on each side. That depend on your preference. Today’s tutorial about how to create the sidebar of your wordpress theme, let’ begin….

 

Step *1: do the usual things, open xampp, your browser, index.php. under the closing tag of container, add a new div tag for sidebar to wrap everything in sidebar, and save.

<div class="sidebar">

</div>

 

Step *2: add an unordered list inside the sidebar tags, and save.

<div class="sidebar">
<ul>

</ul>
</div>

Till now things are so easy just div tag and unordered list, nothing to explain  as I hope.

 

Step *3: add items to the list by add <li> and </li>, and save.

<div class="sidebar">
<ul>
<li>

</li>
</ul>
</div>

Before adding anything else, I will explain something very important. <li>…</li>, is where you can put anything in your sidebar, I mean the whole idea of sidebar is about menu, each new item you add to your sidebar that means you have to add <li>…</li> tags. That’s all, therefore I think sidebar is the most easy part in wordpress theme.

 

Add this code between <li> and </li>, and save.

 

<h2><?php _e(’Categories’); ?></h2>

<h2>…</h2> is the sub-heading.

<?php _e(’Categories’); ?> this code for print the word categories.

 

Now, refresh your browser and you should see the categories list in your page.

 

Step *4: add this code within the list item and save.

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>

<ul>…</ul> adding another an unordered list but within the list item.

 

<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>

this code will call the category links.

 

sort_column=name this code will list your category alphabetically.

 

optioncount=1 this code will display the number of posts under each category.

 

hierarchial=0 this code means don’t turn sub-categories into sub-list-items, that’s why my Sub Category link is listed in the first level of the sidebar.

 

& is used to separate attributes.

 

Make sure to add categories from wordoress dashboard to show up here or you will get the default “uncategorized” in your category.

 

Step *5: now I will add (page links) to the sidebar. Add this code on top of the category block, and save.

<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>

<?php wp_list_pages(); ?> this code will call the page links, by default you have only one page (about page), but you can add more if you want, and all will list here under the pages.

 

‘title_li=<h2>Pages</h2>’ this code used to make the word pages looks like the word category in sidebar.

 

Step *6: now, I will add another item to the sidebar, the archives. Add this code under category item, and save.

<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>

<li>…</li> is used to add another item in the sidebar.

 

<h2>….</h2> is a sub-heading.

 

<?php _e(’Archives’); ?> to print the word archives.

 

<ul>….</ul> to add another an unordered list within the archives.

 

<?php wp_get_archives(’type=monthly’); ?> is used to call the archives links and display them by month.

 

Step *7: the last step, adding the blogroll links, add this code under the archives, and save.

<?php get_links_list(); ?>

This code calls for your blogroll. Refresh your browser and see the changes.

 

Finally, the whole code of sidebar for today should be like this:

<div class="sidebar">
<ul>
<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>

<li>
<h2><?php _e(’Categories’); ?></h2>
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>
</li>
<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
<?php get_links_list(); ?>

</ul>
</div>

That’s it for today, see you next week.

 

Important: I highly recommend you to rewrite all the single quotation ( ‘ ) and the double quotation ( ” ) of the code, to make sure you won’t get an error message.

Filed under: coding, design