How to Add sidebar in WordPress

WordPress Sidebar is a container where you can put wordpress widget using drag and drop functionality, Here I will let you know how to add sidebar in wordpress or new sidebar into your wordpress theme. WordPress provides very easy way to customized wordpress themes. There are a lot of free and paid wordpress themes available but some time you need to customized themes based on your requirement, like you have selected one sidebar theme which is located on right position on theme but you want a new sidebar on LEFT position of theme. you can put your new sidebar in a header, footer, divide sidebar, content-area or any other area in your template.

With help of this article, You will get following answers of sidebar in WordPress

  • How to edit sidebar in WordPress
  • How to add left/Right sidebar in WordPress
  • How to add sidebar in WordPress
  • How to change sidebar in WordPress
  • How remove sidebar in WordPress
  • How to add extra sidebar in wordpress

Use Of WordPress Sidebar :

WordPress sidebar provides a way to organize your website content/widget in user friendly manner, like You can put category in left sidebar but popular post widget on right etc. Using sidebar you can divide your blog/website area into different places and use these places to show dynamic information.
It also help to wordpress admin to manage wordpress widget in useful manner.

You can also check other tutorial of wordpress,

We have One sidebar WordPress Theme :

We have right sidebar into our current theme and we are planning to add new left sidebar with current theme. Our main goal to add left sidebar with responsive manner, means based on resolution of screen mobile/tablet/desktop the sidebar will move position left and right.

Front-end View:

Here You can see theme with right sidebar around red square highlighted.
front-end-wordpress-theme

WordPress admin widget View:

This is current wordpress theme backend view, You can see a widget which is name is ‘sidebar right’, we will add new sidebar ‘sidebar Left’. You can view later left sidebar view as like right sidebar at end of this article.
wordpress-admin-sidebar
How to add New Sidebar in WordPress:

Prerequisite Requirement to Add sidebar in WordPress Theme

adding sidebar in wordpress is too easy, you don’t need to much programming knowledge you just need admin right of wordpress blog/website and ftp access to add/edit wordpress theme file.

To Add sidebar in wordpress, we will follow below three steps:

  1. Register Sidebar: We will register our sidebar with the current theme using theme functions.php file
  2. Create Sidebar: We will create a separate our sidebar file sidebar-left.php and kept them into /current Theme folder.
  3. Calling Sidebar: Final steps would be call above sidebar-left.php file into template where we need to add this sidebar using sidebar method.

Step 1: Register Sidebar with WordPress Theme

We will open functions.php file which located in theme folder wp-content\themes\twentyfifteen, Now we need to find 'register_sidebar' entry in functions.php file. The code be look like below,

Select Code
1
2
3
4
5
6
7
8
9
10
function abc_widgets_init() {
    
  register_sidebar( array(
    'name'          => __( 'Sidebar right', 'dazzling' ),
    'id'            => 'sidebar-left',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ) );

Here You can see Sidebar right has been register and we need to add new 'sidebar left' entry below of this code, so the after adding new entry code would be as follow,

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function abc_widgets_init() {
    
  register_sidebar( array(
    'name'          => __( 'Sidebar right', 'themename' ),
    'id'            => 'sidebar-left',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ) );
  
   register_sidebar( array(
    'name'          => __( 'Sidebar Left', 'themename' ),
    'id'            => 'sidebar-left',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ) );

Here we are giving following information to the wordpress, These are basic information to add sidebar with wordpress theme.

  • Sidebar Left : This is the name of sidebar which will show in wordpress admin on top of the newly added sidebar.
  • sidebar-left : ID of the sidebar

Step 2: Create New Sidebar file

We will Create new Sidebar file sidebar-left.php under theme folder wp-content\themes\twentyfifteen\sidebar-left.php, Here you can see a sidebar.php file which is responsible to show sidebars on pages and posts.You need paste below code into your newly created file sidebar-left.

Select Code
1
2
3
4
5
6
7
8
9
10
11
<?php
/**
 * The Sidebar containing the left widget areas.
 *
 * @package
 */
?>
    <div id="leftsidebar" class="widget-area col-sm-12 col-md-2">
        
        
    </div><!-- #secondary -->

Now you can see left sidebar into your admin->widget area like below.

wordpress-admin-sidebar-2

Step 3: Call Sidebar into You theme

This final steps to show sidebar into your theme layout. You need to add using below code.

Where ‘left’ is the sidebar identifier, which is post fix of the sidebar name 'sidebar-left'.

WordPress have get_sidebar() function which is used to call sidebar function into templates, If the get_sidebar() call with blank parameters then it will call sidebar.php default sidebar if we will pass parameters left/right then it will call sidebar-left.php/sidebar-right.php file.

WordPress Sidebar with Responsive Design :

To add sidebar with responsive nature you need to add following css into your file, these may be change but i have give you an idea, how to create responsive sidebar.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.content-area{
 width:70%;
 float:left;
}
.content-area .article-area{
width:85%;
float:right;
}
.content-area .left-sidebar{
width:15%;
float:left;
}
.right-sidebar{
width:30%;
float:right;
}
@media (max-width: 768px) {
  .right-sidebar,.content-area .article-area,.content-area .left-sidebar {
    float: none !important;
  }
}

front-end-wordpress-theme-1

Conclusion:

We have register and added new sidebar into theme template, You can see final result of front-end theme view. Adding sidebar in wordpress is too easy and simple.You can add Left sidebar in wordpress and Right sidebar in wordpress.