[WordPress] How to Create a Sidebar

A sidebar is an area where you can place your widgets. In the WordPress admin panel, you can do it in Appearance > Widgets.

On the front end, a sidebar can be located not only on the side but in any area of a webpage, such as the header, footer, or anywhere else.

To Create a Sidebar:

1. Register a sidebar with register_sidebar():

To do that, add the code to functions.php of your theme:

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'           => __( 'Header Right Sidebar', 'my-theme' ),
        'id'             => 'sidebar-header-right',
        'description'    => __( 'Widgets for the site header. Top right corner.', 'my-theme' ),
        'before_widget'  => '<section class="my-widget">',
        'after_widget'   => '</section>',
        'before_title'   => '<h2>',
        'after_title'    => '</h2>',
        'before_sidebar' => '<div class="my-sidebar">',
        'after_sidebar'  => '</div>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

, where:

• 'name' – the title of the sidebar in the WordPress admin panel: Appearance > Widgets (see the image below)
• 'id' – unique sidebar ID. WordPress functions will call the sidebar by this ID.
• 'description' – the sidebar description in the WordPress admin panel: Appearance > Widgets (see the image below).
• 'before_widget' – this will be output before each widget inside the sidebar on the front end.
• 'after_widget' – this will be output after each widget inside the sidebar on the front end.
  In our case, each widget inside the sidebar on the front end will be surrounded by <section class="my-widget"> and </section>.
• 'before_title' – this will be output before a widget title on the front end.
• 'after_title' – this will be output after a widget title on the front end.
  In our case, the title of each widget inside the sidebar on the front end will be surrounded by <h2> and </h2>.
• 'before_sidebar' – this will be output before the sidebar HTML code on the front end.
• 'after_sidebar' – this will be output after the sidebar HTML code on the front end.
  In our case, the whole sidebar code on the front end will be surrounded by <div class="my-sidebar"> and </div>.

Additionally:

• __() – loads the text translation. If the translation does not exist, the function returns the original text. The second argument of the function is a text domain. In our case, it is 'my-theme'. It is a unique ID that tells WordPress which loaded translation to use. Please see this documentation to learn more about WordPress localization.

After adding the code above, log in to the WordPress admin panel and go to Appearance > Widgets. You’ll see the new sidebar:

For more details, please see:

• register_sidebar()
• do_action( ‘widgets_init’ )

Also, please see this post.

2. Add the sidebar to your theme template with dynamic_sidebar():

Add the following code to the template of the header, footer, or any other template where you need to place the sidebar:

<?php
if (is_active_sidebar('sidebar-header-right')) {
    dynamic_sidebar('sidebar-header-right');
} 
?>

After this, the sidebar widgets will start showing on the front end.

For more details, please see:

• dynamic_sidebar()
• is_active_sidebar()

How to Add Different Sidebars to Different Posts/Pages

To add different sidebars to different posts or pages, you can use the plugin Custom Sidebars.

Currently, this plugin works with classic widgets only. It is not compatible with the new widgets edit screen, powered by Gutenberg.

So, with WordPress version 5.8 or later, it is necessary to use the plugin Classic Widgets in addition to the plugin Custom Sidebars.