WordPress from A to Z: preset the sidebar for widget

After the summer vacation we begin again our course dedicated to the creation of a theme for WordPress: in the specific today we’ll see how to  create  a dynamic sidebar so that it can be  managed with widget directly from the administration panel, without touching the code.

Index of the article

1. What’s a widget of  WordPress?
2. Why use  Widget on the sidebar?
3. How to make the sidebar of our theme widget ready?
4. A pratical example on our theme
5. Define more dynamic sidebar
6. Conclusion

1. What’s a widget of  WordPress?

The widget, as the plugin, are useful extensions that we can intergrate inside our plattform to extend the functionalities.

WordPress already has some native widget inside the core, like the widget for the visualization of the last comments, the one for the visualization of the last articles published, the archives of the blog, etc… but many others are developed by third parties using the  API put at disposal by  WordPress.

2. Why use  Widget on the sidebar?

Besides providing additional functionalities, a widget is more convenient because it can easily be positioned in the point desired of the template – generally the sidebar or the footer – with a drag & drop action.

To explain it better  let’s do immediately an example with the theme that we have  so far developed for this guide. (Figure 1).

Figure 1 - Sidebar of our theme

If the sidebar of our theme was created with widget, it would be really easy now to change the position (always inside the sidebar) of any of the sections at the moment present: for example if we want to visualize the list of the categories before the archives, all we need to do is go in the administration panel and from the menù  Aspetto->Widget drag with the drag & drop action the desired section in the point where we want it.

At the moment,  if we try from the administration panel of our theme to go to the menù Aspetto->Widget, we receive an error message: “No defined sidebar” (Figure 2).

Figure 2 - No sidebar widget ready

Why this error message?  Because we haven’t yet defined a presetted sidebar for widget in our theme.

And how can we make our sidebar widget ready?

3. How to make the sidebar of our theme widget ready?

To make the sidebar of our theme widget ready all we need to do is simply add a funtion in the file  functions.php.  This file, if present in the folder of our theme, is included automatically at the loading of all the pages of the blog and it serves to incorporate the additional functions to the theme that we’re creating.

So, we create a new file inside the theme folder and call it  functions.php. The function for the definition of a predisposed sidebar for Widget to recall inside the file functions.php is the following: register_sidebar().

Let’s see it in action:

// sidebar 1
if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name'=>'sidebar1',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}

Let’s go and analyse in detail the parameters that we used to recall this function. If  there exists the function register_sidebar then we call it passing in the order the following parameters:

• name: this is the name we want to assign to our sidebar and it will be visualized in the administration panel, Aspetto -> Widget (Figure 3).
• before_widget: any html code we want to insert before the beginning of every widget present on the sidebar.
• after_widget: any html code we want to insert at the end of every widget present on the sidebar.
• before_title: any html code we want to insert before the title of every single widget.
• after_widget: any html code we want to add at the end of the title of every widget present on the sidebar.

In the example above we inserted the tag <li> at the beginning of every widget that will be added to the sidebar and the closing of the tag </li> at the end of every widget, this because the contents of our sidebar is visualized inside a non ordinated list <ul>…</ul>,  so it is necessary to visualize every widget inside the element  <li>…</li>.

Ater we defined the function we have to add a small addition to the file sidebar.php that we  created in the past lessons.

So we open the file calledsidebar.php and immediately after the opening of the tag <ul> we add the following conditional control:

<div id="sidebar">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

In this way we’re saying to WordPress: if there doesn’t exist the function dynamic_sidebar (in case the version of WordPress is old and doesn’t support this function) or if there is no dynamic sidebar used, it loads on the sidebar the contents that we setted up previously on the file sidebar.php in  lesson six, otherwise loads the dynamic contents defined through the Administration Panel Appearance -> Widget (Figure 3).

Figure 3 - To define the sidebar through the Administration Panel

Always in the file sidebar.php we add the end of the conditional control before we close the non ordinated list:

<?php endif; ?>

	</ul>

4. A pratical example on our theme

Now let’s do a pratical example on our theme.

After we defined our dynamic sidebar inside the file functions.php and made all the related changes to the file sidebar.php, we go on the Administration Panel and from the menù Aspetto -> Widget we have the access to a page subdivided in two parts: in the first part of the page all the widget available on the theme are shownn, in the second there are shown the different dynamic sidebar created; in our case we created one and we called it sidebar1, as you can see in Figure 3.

Now all we need to do is drag the widgets that we want to show on the sidebar and that’s it. Let’s try to move – with the mouse – the widget called  Categorie under the section sidebar1, as shown in Figure 3.

Now let’s visualize the result on our blog: as you can notice the old sidebar defined through code has been replaced by the new dynamic sidebar created by widget (Figure 4).

5. Define more dynamic sidebar

If wanted, it is also possible define more than one dynamic sidebar in order to use the different sidebar in more points of the layout of our templates ( for example a sidebar to positionate in the right section of the blog and one on the footer).

To define more than one sidebar for the theme all you need to do is repeat more times the procedure we executed for the definition of the first sidebar inside the file function.php.

Let’s try to define a new sidebar, immediately after the first one, calling it “sidebar-footer”:

<?php

if ( function_exists('register_sidebar') ) {

    // sidebar 1
    register_sidebar(array(
        'name'=>'sidebar1',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));

    // sidebar 2
	register_sidebar(array(
        'name'=>'sidebar-footer',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}

?>

Now if we go to see on the administration panel from the usual menù Aspetto -> Widget we can notice that the sidebar at disposal are two: sidebar1 and sidebar-footer (Figure 5).

Figure 5 - Two dynamic sidebar

To recall this second sidebar inside our template we have to insert the following line of code in the point we want:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-footer') ) : ?>
    ….instructions to execute when the dynamic sidebar is not active…
<?php endif; ?>

6. Conclusion

Here we are at the end of this new lesson of our course dedicated to the creation of a theme for WordPress. In today’s lesson we saw what widgets are and how these can extend the functionalities of the plattform. We also saw  how to predispose more sidebars so that they can  house various widget that we want to intergrate inside our blog/site.

As you see the procedure isn’t complicated, this to demostrate that often things that may seem difficult , if well understood, can reveal to be in reality very simple and intuitive to create.

A t this point to conclude definitively the course  it remains to face  the personalization of the template of the comments that we’ll see next week. But before I leave you I wuold like to ask you a question: after following the lessons of this short online course, do you think you’re able to create a theme from scratch?  Did we achieve the objective that we fixed  at the beginning of the course?

7. Index of the articles dealt 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. WordPress: preset the sidebar for widget
11. Personalizing the Template of WordPress Comments (part 1) (part 2)

*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia