Pawan Kumawat

Adding Sidebar in WordPress Themes

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.

  1. widgets_init hook
  2. 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');

 

Categories

Related Blogs

Ajax Add to Cart Quantity on Shop WooCommerce

To enable AJAX add to cart with quantity selectors on the WooCommerce shop page, you’ll need to use JavaScript to handle the AJAX request and update the cart quantity dynamically. Below are the steps to achieve this:

WooCommerce: Check if Product ID is in the Cart

To check if a specific product ID is in the cart in WooCommerce, you can use the `woocommerce_before_cart` action hook, which is fired before the cart page is displayed. Here’s how you can achieve this:

How To Add Sub Menu In WordPress Admin Panel

How to add sub-menu in WordPress admin panel – In this post we see how we can add custom sub-menu to admin sidebar. Sometimes when we on WordPress and we need to show some features or any information in admin page then we can use this code snippet to create the same.