Home Tutorials WP Theme Lesson #6: Sidebar

WP Theme Lesson #6: Sidebar



Updated on


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.

<div id="header">

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>


<div id="container">

	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

		<div class="post" id="post-<?php the_ID(); ?>">

			<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

			<div class="entry">

				<?php the_content(); ?>

				<p class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br/>
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>



	<?php endwhile; ?>

		<div class="navigation">
			<?php posts_nav_link(); ?>

	<?php else : ?>

		<div class="post">
			<h2><?php _e('Not Found'); ?></h2>

	<?php endif; ?>



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”>



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>



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:

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


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 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.

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.


Please enter your comment!
Please enter your name here

Recent posts

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Recent comments