Expert Group of programming
Loading...

How to Register & Display Sidebars in WordPress

Sidebar is a very special feature of WordPress and introduced in WordPress version 2.2 .By using of this,you can make the own website page as a STRUCTURE DYNAMIC. In the sidebar section,you will create an WIDGET of page, post, custom post type, contact form,menu,category etc and select in sidebar and these will display in sidebar. You can also replace the position of any widget in any time.

Widgets ‹ shankwp wordpress study matterieals — WordPress 2015-11-17 22-58-30-sidebar-1

In the WordPress, the word ‘sidebar’ refers to two different things.

1: Dynamic Sidebar widget :
It is a WordPress widget area : Appearence -> Widget : where you can add single or multiple widget.It is an WordPress dashboard section.

2: Sidebar Template : It is a WordPress template file which is used for displaying the widget and more. Like sidebar.php , sidebar-footer.php etc .

1: Registering a Dynamic WordPress Sidebar

For creating an Widget section in WordPress dashboard, You need to register a sidebar with function named : register_sidebar ($arrParameter) : These function can be used with hooks : widgets_init() : or use without this hooks.All these function code will written in file : functions.php : . You can register single or multiple sidebar as per own requirement.

Let’s see all situation.
i : Sidebar without hooks :

/* Register the primary sidebar. */
    register_sidebar(
        array(
            'id' => 'unique-sidebar-id',
            'name' => __( 'Sidebar Widgets', 'textdomain' ),
            'description' => __( 'A short description of the sidebar widget.', 'textdomain' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );
//You can repeat this code for develop the new sidebar with different ID i.e ID can't be same of two sidebar.

ii : Sidebar with hooks :
Below code register the multiple sidebar with describe hook : widgets_init :. For creating a sidebar,you need to past this code in file : functions.php: and sidebar will generate automatically in path : Appearence -> widget :.

/*
 * Register two widget,You can register more..
 */
function mytheme_register_sidebar_widgets(){
/*Register primary sidebar*/
    register_sidebar(
        array(
            'id' => 'unique-sidebar-id',
            'name' => __( 'Sidebar Widgets', 'textdomain' ),
            'description' => __( 'A short description of the sidebar widget.', 'textdomain' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );

/*Register footer sidebar*/
    register_sidebar(
        array(
            'id' => 'footer-sidebar-id',
            'name' => __( 'Sidebar Footer Widgets', 'textdomain' ),
            'description' => __( 'A short description of the sidebar widget.', 'textdomain' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );
/*You can add more sidebar widget*/

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

iii : Special Case : It is an special case but myself don’t recommend you to follow it. Although I ‘m describing here.
Now you can skip the attribute : id : then in that case,your attribute : name : will be used for creating and calling this sidebar .

See here :

//create sidebar without attribute : id :

register_sidebar(array(
		'name' => 'Main Sidebar',
		'before_widget' => '<div id="%1$s" class="widget %2$s clearfix">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>', 
	));

For calling it in template file ,we can use as .

dynamic_sidebar("Main Sidebar");

You can add more sidebar as well as you can change the styling of the title, widget body etc by changing the div and H3 Tag, which is describe in above code.

1.1: How to call these sidebar
When you will call this sidebar then all the available widgets are called automatically. For calling the sidebar,we use the function : dynamic_sidebar('#widget id#') :

<?php
//for calling the first sidebar 
 if(is_active_sidebar('unique-sidebar-id')){
  dynamic_sidebar('unique-sidebar-id');
}
//call the footer sidebar
 if(is_active_sidebar('footer-sidebar-id')){
  dynamic_sidebar('footer-sidebar-id');
}
//or You can call it also
  dynamic_sidebar('footer-sidebar-id');
?>

For creating an custom widget, follow this article : Click Here

2: Sidebar Templates

Sidebar templates are the theme file i.e .php file which is used when developer is creating a theme. Most of the WordPress have single theme template file : single.php : but you can create multiple sidebar template with file notation : sidebar-main.php, sidebar-footer.php : etc

After creating this file, we need to call this file so the function named : get_sidebar() : is used to call the sidebar template file .

i  : if sidebar template file named : sidebar.php : then function used : get_sidebar(); .
ii : if sidebar template file named : sidebar-main.php : then function used : get_sidebar('main'); .
iii: if sidebar template file named : sidebar-footer.php : then function used : get_sidebar('footer'); .

Conclusion :
default-image
Hope so it will help for creating a new posts or updating any existing posts but still if you have any query then please share with me .

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author
  • Hi Guys ,

    Its such a nice information. 🙂

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.