How to define sidebars in WordPress?


There are many themes that only come with one sidebar, which is often used on every page of a WordPress site. This can often make every page look visually the same, makes it difficult to distinguish one page from another and can also result in widgets being added to a page that are not required. In this tutorial I am going to show you how to define a second sidebar. 

This tutorial assumes that you are comfortable with editing your core WordPress files via a FTP program.

1. Add your code to functions.php.

When defining a sidebar, we need to tell WordPress about the new sidebar. Open up functions.php for your active theme. This can be found in your theme folder within wp-content/themes. We then need to add the following code to the file.

if(function_exists('register_sidebar')):
//duplicate this for each sidebar
register_sidebar(array(
        'name'          =>   'Sidebar 1', // Name of the sidebar used within the admin panel
        'id'            =>   'first-sidebar', // An unique id used to identify the sidebar, can be used in styling the sidebar.
        'before_widget'     =>   '<section id="%1$s" class="sidebar %2$s">', // html code displayed before each widget
        'after_widget'      =>   '</section>', // html code displayed after each widget
        'before_title'      =>   '<header><h2 class="widgettitle">', // HTML Code displayed before a widget title
        'after_title'       =>   '</h2></header>' // HTML Code displayed after a widget title
    ));
//End Duplication
endif;

Here is an explanation of this code.

register_sidebar(array(

//options
    ));

This tells WordPress to register a custom sidebar using the function register_ sidebar, where the “array” is a list of options to define the sidebar. The options are defined as a key pair in the format ‘option name’ => ‘option info’. The option info for the name and id should unique as this is used to identify each sidebar. The name option is the human readable name for the sidebar, and the id is the way WordPress identifies the sidebar in the core. The id option should be defined without spaces as this may cause errors.

This code can be duplicated to add more than one sidebar.

if(function_exists('register_sidebar')):
//Code for each side bar
endif;

This code is used to check if sidebars can be used in WordPress to ensure backwards compatibility as custom sidebars were only implemented in later versions of WordPress. If sidebars can’t be used, the code within sidebar.php will be displayed. If this check is not used then it may cause an error to be shown in earlier versions that did not use custom sidebars.

An example of this code with 2 sidebars defined.

if(function_exists('register_sidebar')):
//Sidebar 1
register_sidebar(array(
        'name'              =>   'Sidebar 1', // Name of the sidebar used within the admin panel
        'id'                =>   'first-sidebar', // An unique id used to identify the sidebar, can be used in styling the sidebar.
        'before_widget'     =>   '<section id="%1$s" class="sidebar %2$s">', // html code displayed before each widget
        'after_widget'      =>   '</section>', // html code displayed after each widget
        'before_title'      =>   '<header><h2 class="widgettitle">', // HTML Code displayed before a widget title
        'after_title'       =>   '</h2></header>' // HTML Code displayed after a widget title
    ));

//Sidebar 2
register_sidebar(array(
        'name'              =>   'Sidebar 2', // Name of the sidebar used within the admin panel
        'id'                =>   'second-sidebar', // An unique id used to identify the sidebar, can be used in styling the sidebar.
        'before_widget'     =>   '<section id="%1$s" class="sidebar %2$s">', // html code displayed before each widget
        'after_widget'      =>   '</section>', // html code displayed after each widget
        'before_title'      =>   '<header><h2 class="widgettitle">', // HTML Code displayed before a widget title
        'after_title'       =>   '</h2></header>' // HTML Code displayed after a widget title
    ));

endif;

Once you have added this code to your functions.php file you should see the following under Appearance > Widgets. This should allow you to add widgets to each sidebar.

A screenshot of the Widget Screen in WordPress

You can read more about this function using the WordPress Codex page for Register Sidebar

2. Add code to your sidebar.php file.

We now need to tell WordPress where to display our new sidebars using the following code. This needs to be duplicated for each sidebar

if (is_active_sidebar( 'first-sidebar' ) ) : //Check if Sidebar is active in admin
        dynamic_sidebar( 'first-sidebar' ); //Add Sidebar to page
endif;

Here is an explanation of the above code.

if (is_active_sidebar( 'first-sidebar' ) ) :

This code checks if the sidebar is active in the Admin Panel. The code between the second set of brackets relates to the ‘id’ option defined in your functions.php file. This code needs to be duplicated for each additional sidebar with the ‘id’ amended to suit.

dynamic_sidebar( 'first-sidebar' ); //Add Sidebar to page

This tells WordPress to output the sidebar in the desired location. Now you should have a new sidebar in your theme. In the above example the ‘first-sidebar’ relates to the id specified earlier in the register_sidebar function.

Here is an example of the code with multiple sidebars.

<?php
if (is_active_sidebar( 'first-sidebar' ) ) : //Check if Sidebar is active in admin
        dynamic_sidebar( 'first-sidebar' ); //Add Sidebar to page
endif;
if (is_active_sidebar( 'second-sidebar' ) ) : //Check if Sidebar is active in admin
        dynamic_sidebar( 'second-sidebar' ); //Add Sidebar to page
endif;
?>

Hope your enjoyed this tutorial and I will extend this next week to show you how to define a new page for each area of your site. This will also include how to have a different sidebar for each page. Check back next week!