[WordPress] How to Add a Sidebar Programmatically in 2024

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

A sidebar can be placed not only on the side but also in other areas of a webpage, such as the header, footer, or beside the content area.

Contents

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.

A similar sidebar is used here on wpdiaries.com to display the search box in the top right corner of webpages on desktop and tablet resolutions. But here, 'before_widget', 'after_widget', 'before_title', and 'after_title' were set to empty strings. Because I did not need to surround the Search widget with any code.

For more details, please see:

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:

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.

Sergei Korolev
Sergei Korolev
Web developer and the author of all articles on this site. With over 26 years of programming experience, he has specialized in web programming for more than 20 years. He is a Zend Certified Engineer in PHP 5.3 and holds several additional certifications in programming, SEO, web design, UX design, digital marketing, copywriting. You can see his resume here. He is available for remote projects at a rate of $60 USD per hour. You can contact him via this contact form. He currently lives in Belgrade, Serbia.

Leave a Reply

Your email address will not be published. Required fields are marked *