WordPress: Adding the Sidebar to our theme

And here we go again with our course on the creation of a WordPress theme, we stopped some days ago with the loop and we have seen that this is, in synthesis, the heart of the matter around which the entire platform revolves.

What we are going to deal with today is instead the creation of the sidebar, a column (of more or less reduced  dimensions that almost all the blogs have, usually on the right side) reserved to the signaling of contents that can be displayed on more pages. Let’s see now what can we put on the sidebar of the theme we are about to create.

We can display anything we want on the sidebar: a module for executing the search inside the website/blog, the website page list, the category list, the latest news published, commercial banners or buttons, you name it.

We want to clarify that we might also decide to insert nothing on the sidebar, that is not using any sidebar and conceding more space to the main content of the page. Nobody forces us to have a sidebar on our blog/website developed with WordPress.

Before going any deeper with the creation of the sidebar for our theme I want to show you some websites that – in conformity with the client’s requirements – I have developed exactly with WordPress. All this to show you in practice the various types of sidebars we can create and which are not the classic ones we are usually used to finding in blogs.

Figure 1 - Some buttons on a sidebar of a site based on WordPress

Figure 2 - Latest news published on the sidebar of a site based on WordPress

Figure 3 - Another example of buttons on a sidebar of a site based on WordPress

After having seen this roundup of various typologies of sidebars we move on to create our own and, since in our case we are developing the layout of a blog, we are going to define step by step what generally is the standard sidebar of a blog.

All the elements that compose the sidebar of the theme are usually displayed inside an unordered list (<ul>…</ul>), in which every object present is nothing but an item of the list (<li>…</li>).

The first thing we have to do is thus creating a section to dedicate to the sidebar of our layout. We write the following HTML markup:

<!-- START SIDEBAR -->
<div id="sidebar">
	<ul>

	</ul>
</div>
<!-- END SIDEBAR -->

And in the style sheet we are going to add the following rules associated with our sidebar:

#sidebar {width:290px; margin:30px 0 30px 20px;float:left;border:1px solid red;}
#sidebar ul {list-style-type:none;}

As you can see we have:

  • defined a section denominated “sidebar”;
  • assigned a size of 290px;
  • assigned a superior/inferior margin of 30px, or pixel on the right while on the left we have set a margin of 20px so that to outdistance the sidebar from the main content of the blog;
  • positioned on the left (immediately after the section dedicated to content);
  • assigned for a didactic scope the usual red border of only a pixel to physically view the space occupied by this section inside our layout;
  • finally eliminated the marker of the list.

Now it’s the right time to start adding the first elements inside our sidebar.

Let’s try to add as the first element of our sidebar a module which enables us to execute the search of all documents published on the website/blog.

We add thus the following HTML markup:

<li>
	<h2>Search</h2>

	<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<input type="text" name="s" id="s" value="<?php the_search_query(); ?>"    />
		<input type="submit" id="searchsubmit" value="search" />
	</form>
</li>

Enough creating a random module which will be sent via “get” method and assigning to the search field (input) the “s” name, this will allow the engine of WordPress to search the string put in inside of all the content published on the blog.

Besides we have passed as value of the search field the WordPress function denominated the_search_query(), which does nothing else but restore the value of the searched string. Doing so – after a random search – the page will be reloaded displaying the results and in the search field it will keep displaying the string we attempted to find.

Figure 4 - Search form added on the sidebar

In Figure 4 you can see the sidebar with the search module we just added to our theme in action.

On the theme’s sidebar we want to display the archive of our blog as a second element, right under the search module.

WordPress offers the  wp_get_archives( ) function to display an archive based on the publication date of the articles present on the blog. This function can be used in every spot inside the template we are creating.

According to various parameters that can be passed to the function, it is possible to configure the display of the archive according to one’s own needs. For example it is possible to display the archives for each month, week, day, or choose the number of archives to show, the format they are going to appear, etc. For a deeper examination of the various parameters accepted by the function, I advise you to read  the optimal documentation.

Therefore we add these lines of code to our HTML markup:

<!-- START ARCHIVES -->
<li>
	<h2>Archive</h2>

	<ul>
		<?php wp_get_archives('type=monthly&show_post_count=1'); ?>
	</ul>

</li>
<!-- END ARCHIVES -->

As you can see we have passed only two parameters to the function:

  1. type” with the same value as “monthly”: it’s to indicate the display of the article archive subdivided by the months of the year;
  2. show_post_count” with value set on “1”: specifies to WordPress that beside the name of the month the number of articles published for that month should also be displayed.

Please also note that the function has been inserted inside a further element <ul>…</ul> because (as we have renamed it) restores the results in the form of elements <li>…</li>.

In Figure 5 you can see the result achieved by this markup applied on our theme.

We add now as a third element of the sidebar the category list.

As we already saw for the blog pages, WordPress offers an analogue function even for categories denominated wp_list_categories(). The function shows the category list (as links) present on the blog. When you click on the link of a category, all articles present in this category are displayed on a page using – if existing – the appropriate template dedicated to the display of categories, as foreseen in the template hierarchy rules.

This function – as you can see on the pages of official documentation – accepts various parameters which allow a rather advanced personalization. Let’s try applying them to our theme.

In order to have something to display in our blog, let’s create some sample categories. I have created three besides the predefined WordPress category denominated “Without category”. The names of the categories I have created are: Events, News and Testing.

Now let’s write the following markup in the page of our template, right under the archive previously added to the sidebar.

<!-- START CATEGORIES -->
<ul>
	<?php wp_list_categories('title_li=<h2>Categories</h2>&hide_empty=0'); ?>
</ul>
<!-- END CATEGORIES -->

As you can see we have passed two parameters to the function:

  1. title_li which indicates the title to display before showing the category list;
  2. hide_empty instead allows to display (or less) in the list even the categories which at the moment are empty, that is with no article associated yet.

In Figure 6 you can see the result of this function applied to the theme we are developing.

Figure 6 - Blog's categories added on the sidebar

We saw in the second lesson of this course that WordPress offers the possibility to manage a list of links to other blogs/websites directly from the administration panel. If we want we can add this list of websites on our sidebar through the wp_list_bookmarks() function, even this one functioning in a very similar way compared to the functions which restored the category or page list.

We add the following markup to our page:

<!-- START BLOGROLL -->
<?php wp_list_bookmarks(); ?>
<!-- END BLOGROLL -->

We are going to display the result obtained on our theme (Figure 7) after having removed the red border we initially assigned to the sidebar for a didactic scope.

Figure 7 - Blogroll added on the sidebar of our theme

At this point you should have understood how easy it is to add the various elements of your interest inside the sidebar of your blog.

For the time being – with regard to the sidebar – we stop here, reassuming the topic in a couple of lessons when we will deal with the argument widget and we will see in detail how to render a sidebar ready to host widgets directly managed from the administration panel.

In this lesson we limited ourselves in creating a simple sidebar whose elements to display are defined manually inside the code of the template.

In the next lesson I want to show you how it can be possible to organize the code of the page for our template (index.php) so as to render everything more modular and easier to manage. I wanted to deal with this argument in today’s lesson but, as usual, I spent a lot of time already and I think it’s better to dedicate an entire lesson to this argument rather than dealing with it briefly. The appointment is set for next Tuesday.

Index of Articles in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. Using the Widgets on the Sidebar of Our Template
  11. Personalizing the Template of WordPress Comments

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

5 comments

Trackback e pingback

  1. Tweets that mention WordPress: Adding the Sidebar to our theme | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by soshableweb and V. Tavares (E-Goi), Tom Bangham. Tom Bangham said: WordPress: Adding …
  2. How to create a WordPress theme starting from scratch? | Your Inspiration Web
    [...] Adding the Sidebar to our theme [...]
  3. How to install WordPress Locally? | Your Inspiration Web
    [...] Adding the Sidebar to our theme [...]
  4. WordPress from A to Z: preset the sidebar for widget | Your Inspiration Web
    [...] we defined the function we have to add a small addition to the file sidebar.php that we  created in …
  5. florystyka
    Recommeneded website... below you’ll find the link to some sites that we think you should visit...

Leave a Reply

Current month ye@r day *