How to Add Sidebar to WordPress Theme

Hello everyone now we have do some changes in our website it fast and easy to navigate now going to WordPress tutorial adding a extra dynamic sidebar to your theme it may a in footer you can try our optimized WordPress themes with single and double sidebar even footer also included themes are great designed responsive style.

WordPress is powerful software it’s easy for every webmaster can run website or blog on it. And comes with lots of customization if you run a website then it must that site looks good to everyone some time you add widget or social buttons to your sidebar to make it cool but if your theme does not have function for sidebar then you can also add on it better to change you theme but hope you know little HTML and CSS knowledge.

Add Sidebar to WordPress theme:

Note- make backup of your theme first also try to edit you theme on local computer.

Step 1: Extract your theme into a folder and open it to see all the files. If your theme has only one sidebar, then most probably you will not find a file called functions.php in your theme folder. In that case you will have to create this file yourself. Just open notepad or any other code editor to start a new file.Below screenshot of widget are with sidebar check live here

Step2: Put this code into that file :

function wrockmetro_widgets_init() {

register_sidebar(array(
'name' => __( 'Sidebar Right', 'optimize' ),
'before_widget' => '<div><div>',
'after_widget' => '</div></div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'wrockmetro_widgets_init');

Save the file as functions.php and put it in your theme folder. This piece of code actually tells WordPress to register sidebars for you. If your theme has more than one sidebar, you will find the functions.php file already present in your theme folder.

if you want more than paste below code in function.php file

function wrockmetro_widgets_init() {

register_sidebar(array(
'name' => __( 'Sidebar Right', 'wrockmetro' ),
'before_widget' => '<div><div>',
'after_widget' => '</div></div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
register_sidebar(array(
'name' => __( 'Sidebar left', 'wrockmetro' ),
'before_widget' => '<div><div>',
'after_widget' => '</div></div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));

}
add_action('widgets_init', 'wrockmetro_widgets_init');

You just have to edit the number to your requirement and save the file. You can increase this number if you want more sidebars and if your theme’s layout can accommodate it. You can drag your widget items into any of the sidebars.

Step 3: Displaying sidebar in theme.

Now open your theme sidebar.php file (if not have sidebar.php then create a file and add <?php get_template_part(‘/sidebar’); ?> to your index.php or anywhere you want to display your sidebar like single and page) and put below code into it to display sidebar where you want.

Note: you can also put code in footer to make footer widget area change name in above code and copy below code:

<?php if (!dynamic_sidebar('Sidebar Left') ) : ?><?php endif; ?>

Here ‘Sidebar Left‘ is function name so change name according to function.php file.

Step 4: Adding CSS to your sidebar

if you put <div> to design your sidebar example:

<div id="sidebar">
<?php if (!dynamic_sidebar('Sidebar Left') ) : ?>
<?php endif; ?>    </div>

Now in Style.css

#sidebar{
border:1px solid #333;
background: #d5d5d5;
}

#sidebar h4, #sidebar h4 a {
margin: 0 0 10px;
text-transform:capitalize;
color: white;
padding: 4%;
background: #2693BA;
font-weight: bold;
}

save your all files and upload to theme directory again your sidebar will be visible if you have any question then feel free to ask.