How to Add a Custom Sidebar to a WordPress Theme?
What’s a sidebar in WordPress ?
WordPress Sidebars allow you display all type of widgets inside your theme. And you can use “sidebars” to display widgets anywhere you want.All themes by default come with at least one sidebar in it. Sidebar is one of the most used Requirements For many developers.
For adding sidebar we will use one hook and one WordPress function.
- widgets_init hook
- register_sidebar function
About “register_sidebar”
register_sidebar( array|string $args = array() )
It will returns the sidebar ID.
Parameters
‘name’
(string) The name or title of the sidebar displayed in the Widgets interface. Default ‘Sidebar $instance’.
‘id’
(string) The unique identifier by which the sidebar will be called. Default ‘sidebar-$instance’.
‘description’
(string) Description of the sidebar, displayed in the Widgets interface. Default empty string.
‘class’
(string) Extra CSS class to assign to the sidebar in the Widgets interface.
‘before_widget’
(string) HTML content to prepend to each widget’s HTML output when assigned to this sidebar. Default is an opening list item element.
‘after_widget’
(string) HTML content to append to each widget’s HTML output when assigned to this sidebar. Default is a closing list item element.
‘before_title’
(string) HTML content to prepend to the sidebar title when displayed. Default is an opening h2 element.
‘after_title’
(string) HTML content to append to the sidebar title when displayed. Default is a closing h2 element.
Documentation
For adding custom sidebars in WordPress theme Paste the following code in your functions.php file:
function CustomSidebars() {
$args = array(
'id' => 'custom_sidebar',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
'name' => __( 'Newly Added Custom Widget', 'text_domain' ),
'description' => __( 'My First Custom Widget Area', 'text_domain' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
// Register Sidebars
register_sidebar( $args );
}
add_action('widgets_init','CustomSidebars');