WordPress Register Sidebar

A sidebar is some area on a WordPress website where you can place widgets.

WordPress themes can have multiple sidebars as well. Most WordPress themes support the sidebar area on the right side and footer, but it can be created anywhere depending on your website design requirement. You can register sidebar on the left side or even in the header if you want to place some widgets there. Also, It is not mandatory to register sidebar in every theme.


How to Create a Sidebar:

You can create or register a sidebar area using register_sidebar() function. The functions should be called using the widgets_init hook

Parameters:

  • name – your name for the sidebar. This is the name users will see in the Widgets panel.
  • id – It should be unique, lowercase and will be used in dynamic_sidebar() function to call sidebar in theme.
  • description – Sidebar description is visible in the Widgets panel.
  • class – CSS class name to assign to the widget’s HTML
  • before_widget – HTML to insert before every widget, such as <aside> or <div> tag
  • after_widget – HTML to insert after every widget. Close tags that are inserted before_widget
  • before_title – HTML to insert the title of each widget, such as a <h3> tag
  • after_title – HTML to insert after every title. Close tags that are inserted before_title such as </h3>

Example to Register Sidebar:

/* Register your 'custom' sidebar. */
add_action( 'widgets_init', 'my_custom_sidebars' );
function my_custom_sidebars() {
    register_sidebar(
        array(
            'id'            => 'custom_sidebar',
            'name'          => __( 'Custom Sidebar' ),
            'description'   => __( 'This is my custom sidebar.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    /* Repeat register_sidebar() code for multiple sidebars. */
}

Registered Sidebar in Dashboard:

Once sidebars are registered, you can find the sidebar area in WordPress Dashboard [Appearance > Widgets]. You can easily place available Widgets in your sidebar.

Registered Sidebar in WordPress Dashboard

Display Sidebar in your Theme:

Now, you would like to display sidebar widgets in your theme or website. Find out which section or page should include a registered sidebar in your theme. It can be header.php, sidebar.php, footer.php or any other template file as per your requirement.

You need to use WordPress function dynamic_sidebar($id); to display your custom sidebar widgets in theme. Here is an example:


<div id="custom-sidebar" class="sidebar">
    <?php dynamic_sidebar( 'custom_sidebar' ); ?>
</div>

Because we have created our sidebar with the unique id ‘custom_sidebar’, we have called our sidebar by passing the same id in WordPress function. You can use any sidebar id based on your feature but make sure that it is unique in your theme. To avoid conflict with any plugin’s widget, you can use some prefix as well.


Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.