How to Add a Sidebar to WordPress » Ultimate Step by Step Guide

How to Add a Sidebar to WordPress When creating your WordPress site you should add a sidebar as one of the layout sections of your WordPress site. Creating a sidebar in basic HTML site is simple since you just need to use the sidebar tags <aside> </aside> but to add a sidebar to WordPress you need a different approach.

Sidebar Template Tag: How Sidebar in Displayed in WordPress

It is important you remember that WordPress works with template tags and the header is called with get_header() function while the footer is called with the get_footer() function. For the sidebar, it is displayed with the get_sidebar() template tag.

This template tag can be added anywhere you wish to add the WordPress sidebar. But before you begin displaying the WordPress sidebar, we need to learn how it is created so that it exists in your theme code before you can call it in the templates.

There are two major steps you should follow to add a sidebar in WordPress; these steps include: registering the sidebar, calling the sidebar

How to Add a Sidebar to WordPress Step by Step

For you to successfully add the new sidebar to WordPress or create a custom sidebar in WordPress, you need to follow the following steps:

  1. First, create a backup copy of your WordPress theme
  2. Create a child theme from your parent WordPress theme and the child theme should have the functions.php file
  3. Inside this functions.php file of your child theme, you will use the register_sidebar() function to create the sidebar.
  4. Create the sidebar.php file and add the dynamic_sidebar() function to this file with the name of the sidebar like this – dynamic_sidebar( ‘sidebar-1’ ) where sidebar-1 is the id of the sidebar you added when registering the sidebar.
  5. In your theme template files, you can now call the sidebar using the get_sidebar() template tag.
  6. If you have created a custom sidebar you can use the dynamic_sidebar() function to display the custom sidebar.

Anatomy of a WordPress Sidebar

To understand in-depth how sidebar in WordPress works, you need to learn how the sidebar code is spread across different WordPress theme files.

WordPress Sidebar Functions

It is important to know that the three WordPress functions that related to adding WordPress sidebar are:

Register Sidebar – Step One

This function register_sidebar() is the first function that creates the sidebar and it is located in the functions.php file of your theme.

When you open your theme functions.php file, you should see this register_sidebar() function registering the various sidebars displayed on your theme.

Like for the case of the default Twenty seventeen WordPress theme, you can see in the image below the code registering the sidebars on that theme:

how to add a sidebar to wordpress

Basically, this function is the one that gets everything started

Register Sidebar Parameters 

The register sidebar function is expressed as a function that takes the various arguments that can be in the data form of an array or a string. It can be generally expressed as follows:

register_sidebar( array|string $args = array() )

The following is an image of the register_sidebar function as used in a WordPress theme where the different parameters are added to the array that is passed inside the function call:

how to add a sidebar to wordpress

This WordPress function has various arguments that it can accept which can either be a PHP String or PHP array. The arguments include:

  • Name – this is the name or the title of the sidebar it should be a string.
  • ID – this is a unique identifier of the sidebar that you will use the dynamic_sidebar () function to call the sidebar.
  • Description – this is the description of the sidebar that displayed in the Widgets interface and it’s a string.
  • Class this is an argument to add an extra CSS class for the sidebar that will help you in styling.
  • Before_widget – this is the HTML content that is added before each of the sidebars is output
  • After_widget – this is the HTML content that is added after each of the sidebars is output
  • Before_title this is the HTML content to be added to the sidebar title when it is displayed and the default is usually the opening <h2> HTML tag.
  • After_title this is the HTML content to be added to the sidebar title when it is displayed and the default is usually the opening <h2> HTML tag.

This function is added to the functions.php file and it registers the WordPress sidebars using an action hook like the one shared below:

add_action( 'widgets_init', ' njengah_tutorial_sidebars’ ' );

To register a sidebar we need to hook to the widgets_init event and we have the callback function with a name of our choice like in this case we have named the callback function as ‘njengah_tutorial_sidebars’

The full code that you should add to your functions.php file to register the sidebar is as follows:

<?php

//Callback function 

function njengah_register_sidebar_tutorial() {
	
	//Register Sidebar function - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		array(
			'name'          => __( 'Sidebar Example', 'textdomain' ),
			'id'            => 'sidebar-1',
			'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
	
} 

// Action hook 

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

Dynamic Sidebar – Step Two 

This function dynamic_sidebar() now calls the sidebar that we have registered in step one above and the code is placed in the sidebar.php file or any other file where we want to display the sidebar that we have created in the first step.

The general expression of the dynamic_sidebar() function is as follows :

dynamic_sidebar( int|string $index = 1 )

This function takes an integer or a string argument and this can be either the name or the ID parameters used when registering the sidebar in the first step.

In the twenty seventeen default WordPress theme when you open the sidebar.php file, you will see the function dynamic_sidebar()  as shown in the image below:

How to Add Sidebar in WordPress

In this case, you can see we are passing the id parameter of the register_sidebar function to the dynamic_sidebar function so that we can display that sidebar as the default sidebar.  As shown in the image below:

how to add a sidebar to wordpress

If we were registering this sidebar as a custom sidebar we would use the code above to show in any theme template files that may include; header, footer, body and so on. So the code to display the sidebar should be as follows:

<?php if ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="sidebar">
    <?php dynamic_sidebar( 'custom' ); ?>
   </div>
<?php endif; ?>

As you can see in we are using an if statement to validate if the sidebar is active and the function we use here is  is_active_sidebar(). This function simply finds out if the sidebar passed in the dynamic_sidebar() is in use. This is one of the WordPress conditional tags.

Get Sidebar – Step Three

When creating the default WordPress sidebar in a theme you need to register, create the sidebar.php file and finally use the get_sidebar() template tag to load the sidebar in the template.

The get_sidebar can be used to display different sidebars in different pages since by default the function takes one string argument that is equivalent to the name of the sidebar. The name you used to register the sidebar or the ID parameter as outlined in the step above.

get_sidebar( string $name = null )

So if you have a sidebar named ‘ cool-sidebar’, you can call the sidebar in a custom page template as follows :

get_sidebar('cool-sidebar');

You can also have several sidebars for each page and you can use an if/else statement to display each of the sidebars in different pages conditionally like in this code where we have three sidebars; one for the homepage, another for 404 and the default sidebar:

if ( is_home() ) :

      get_sidebar( 'home' );

   elseif ( is_404() ) :

      get_sidebar( '404' );

   else :

     get_sidebar();

endif;

WordPress Sidebar Files

It is equally important to know that the seven common WordPress theme files where the sidebar code is added are:

  • functions.php File
  • sidebar.php File
  • Pages Files
  • Posts Files
  • Custom Posts Type Files
  • footer.php File
  • header.php File

The code can also be added to plugins where you are registering and displaying sidebar widgets like some of the most common WordPress widget plugins.

If you are a WordPress developer or a WordPress beginner learning how WordPress works, understanding the way these files are related to adding and displaying WordPress sidebar will be a great step towards becoming a pro.

How Sidebar Code Works in Each Theme WordPress File

In a quick summary the three functions of adding sidebar in WordPress are placed in each of these files illustrated in the table below respectively:

Theme File Function
Functions.php register_sidebar() , dynamic_sidebar()
Sidebar.php dynamic_sidebar()
Header.php dynamic_sidebar()
Page.php dynamic_sidebar() , get_sidebar();
Single.php dynamic_sidebar() , get_sidebar();
Custom-page-template dynamic_sidebar() , get_sidebar();

To add sidebar in WordPress you should follow the three steps we outlined in this WordPress development tutorial that includes:

  • Register – Register the sidebar in functions.php using register_sidebar()
  • Call Default Sidebar/ Custom Sidebar – Call the sidebar in the sidebar.php file for the default sidebar but or custom sidebar you can call it in any template file using dynamic_sidebar()
  • Display Sidebar in WP Post Templates – In the page, post and custom page template and custom post template, you can call the sidebar using the get_sidebar() template tag.

How to Add Sidebar in WordPress

How to Add a Sidebar to WordPress Code Example 

The following is the code example of how you would add a default sidebar in a WordPress theme that we will name as Njengah Tutorial Sidebar

Register Sidebar 

The first step we would register it as follows:

/**
* Register widget area.
*
* @link https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

function njengah_register_sidebar_tutorial() {

  //Register Sidebar function - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        array(
                  'name'          => __( 'Njengah Tutorial Sidebar ', 'textdomain' ),
                   'id'            => 'njengah-sidebar-default',
                   'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'textdomain' ),
                   'before_widget' => '<section id="%1$s" class="widget %2$s">',
                   'after_widget'  => '</section>',
                   'before_title'  => '<h2 class="widget-title">',
                   'after_title'   => '</h2>',
                  )
             );
    
        }

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

The result would be seen on our WordPress dashboard under appearance > Widgets as shown in the image below:

How to Add Sidebar in WordPress

Call Default Sidebar in Sidebar.php File

In the sidebar.php or index files we should not call the sidebar as follows:

if ( ! is_active_sidebar('njengah-sidebar-default’) ) {
   return;
}

  dynamic_sidebar('njengah-sidebar-default’);

Display Sidebar

Finally, in our page templates, we would simply call the sidebar using the following code

get_sidebar();

Wrapping up

In this post, we have comprehensively outlined the step by step approach on how to add sidebar in WordPress theme. In a quick summary, you need to remember there are only 2 or three steps; to add the default sidebar in WordPress you need to register the sidebar in functions.php, create a sidebar.php file where you call the sidebar you registered in step one and in the page or post templates you use the get_sidebar function to call the default sidebar.

If you are adding custom sidebars you do not need the last part since you would directly place the dynamic_sidebar() code in the template or the file where you want to display the sidebar. For example, in the footer, you will commonly see the footer widgets displayed using this function dynamic_sidebar().

It is my hope you have learned something new from this tutorial or you have gained a better understanding of how to add a sidebar to WordPress theme without necessarily copy-pasting code in your functions.php file. If you want more help in this area or require advice from a professional WordPress developer, do not hesitate to contact me.

Comments are closed.