Creating custom Sidebar Multiple Widgets -Part2

Previous Tutorial -> http://1wmedia.blogspot.in/2016/04/creating-custom-sidebar-widgets-part1.html


In this tutorial, we will see how to create multiple widgets, with register_sidebar function with our custom function.

1. Open your functions.php,  remove the old register_bar function code, Add the following one, Instead of old one. Then save the file.

<?php
function sidebar_widgets( $widget_name, $widget_id, $widget_description){
register_sidebar(array(
        'name' => __($widget_name),   
        'id' => $widget_id,
        'description' => __( $widget_description ),
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

}

sidebar_widgets("Page Sidebar", "right-sidebar", "Sidebar Widgets");
sidebar_widgets( "First Sidebar", "first-sidebar", "This is first sidebar");
sidebar_widgets( "Second Sidebar", "second-sidebar", "This is Second sidebar");


?>


2. Here our custom function name is "sidebar_widgets". In this function, we are creating three variables namely,  $widget_name, $widget_id, $widget_description.

3. We will pass these variables  into register_sidebar function. For example,

'name' => __($widget_name),  

Refere point no 1.

Same for other two.  But we didn't create variables for 'before_widget' and others..

4.  After this we have called the function to create widgets with our custom names, ids, descriptions.

For example,

sidebar_widgets("Page Sidebar", "right-sidebar", "Sidebar Widgets");

The above code creates the sidebar with the name  "Page Sidebar"

if you call  the sidebar_widgets function with different name,id and description , then it will create another sidebar.  Here we have created 3 sidebars .  Refer point no 1.

5. Now view widgets in dashboard -> You will see 3 widget sidebar.

7. Add some widgets to all 3 sidebars and save it.

8. Now we will call / add this widget in your template or wherever you want.

9. In our case we will add this into page-sidebar template. So open the page-sidebar.php file.

10. Paste the following code below  "<div class="col-md-4" > "


<p><?php if( dynamic_sidebar('right-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('first-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('second-sidebar')); ?></p>



11. Here "right-sidebar" is an id for "Page Sidebar" , we have created earlier in register_sidebar function (point no 1). remaining are same.

12. Now view the page -> with Sidebar Template selected.

13. You can see the sidebars with multiple sidebar.

 14. Here, we are doing one more step to separate the sidebar files.

15. Create sidebar.php in your themes folder and save it.

16. Now go to page-sidebar.php file, cut the following code and paste it into the sidebar.php file.

<div class="col-md-4" >

 <p><?php if( dynamic_sidebar('right-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('first-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('second-sidebar')); ?></p>
 </div>


17. Now add the following code into the page-sidebar.php file, instead of the above code .

<?php get_sidebar();?>

18. Save both files. That's all. Now you sidebars work from sidebar.php file. If you done anything at sidebar.php file, then it will reflect at your page-sidebar template.

Refer the video: