How to Use the WordPress Register Sidebar Function

Updated on June 05, 2017

In this article we’ll look at some ways to use the WordPress register sidebar function along with some advanced tips as well!

WordPress Register Sidebar – Single

To get a sidebar working in your theme you’ll need to let WordPress know about it first – to make sure it shows up in the admin – and add some front-end code to display the widgets. To register a sidebar you can choose one of two options: register one sidebar with register_sidebar() or register many at once with register_sidebars().

The basic usage of the register_sidebar() function looks something like this:

add_action( 'widgets_init', 'my_awesome_sidebar' );
function my_awesome_sidebar() {
  $args = array(
    'name'          => 'Awesome Sidebar',
    'id'            => 'awesome-sidebar',
    'description'   => 'The Awesome Sidebar is shown on the left hand side of blog pages in this theme',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );

  register_sidebar( $args );

}

The functions should be called from a function hooked into widgets_init and it takes a single array of parameters. The name and description is shown in the backend when the user is assembling the sidebar, and the last four parameters are used to display each widget.

The before and after title parameters are prepended and appended to the title and the before and after widget parameters are added before and after the widget element. This allows for uniform styling across a whole sidebar of widgets.

WordPress Register Sidebar – Multiple Sidebars At Once

The register_sidebars() function is almost exactly the same as it’s singular form brother, but takes an extra parameter that dictates the number of sidebars to add. Here’s a quick example:

add_action( 'widgets_init', 'my_theme_sidebars' );
function my_theme_sidebars() {
  $args = array(
    'name'          => 'Awesome Sidebar %d',
    'id'            => 'awesome-sidebar',
    'description'   => 'One of the awesome sidebars',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );

  register_sidebar( 3, $args );

}

The only other difference here is the use of the %d placeholder which will display the sidebar number, in our case 1, 2 or 3.

Registering Multiple Sidebars Better

The one problem with the function above is that it doesn’t really allow you to customize the title and the description, and the use of the “id” parameter is technically incorrect as it should be unique. TO get around this problem I usually set up an array of information and loop through that to create my sidebars, here’s how.

add_action( 'widgets_init', 'my_awesome_sidebar' );
function my_awesome_sidebar() {

  $my_sidebars = array(
    array(
      'name'          => 'Header Widget Area',
      'id'            => 'header-widget-area',
      'description'   => 'Widgets shown in the flyout of the header',
    ),
    array(
      'name'          => 'Header Widget Area',
      'id'            => 'header-widget-area',
      'description'   => 'Widgets shown in the flyout of the header',
    ),
    array(
      'name'          => 'Header Widget Area',
      'id'            => 'header-widget-area',
      'description'   => 'Widgets shown in the flyout of the header',
    ),  
  );

  $defaults = array(
    'name'          => 'Awesome Sidebar',
    'id'            => 'awesome-sidebar',
    'description'   => 'The Awesome Sidebar is shown on the left hand side of blog pages in this theme',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );

  foreach( $my_sidebars as $sidebar ) {
    $args = wp_parse_args( $sidebar, $defaults );
    register_sidebar( $args );
  }

}

First of all, I’ve defined a number of sidebars with the parameters I need changes per sidebar. I’ve also created a default parameter set which can be used in case there is no data somewhere. While looping through our the array of sidebars we merge the array of sidebar-specific arguments with the defaults and pass them to the register_sidebar() function.

If you want to get really fancy you can separate the sidebar array out of this function and create your own function which you can reuse from theme to theme, all you need to do is modify the array of sidebars.

This gives you more control and more standardization across your work which is great if you offer updates and support.

Conclusion

As long as you use the default WordPress functions it doesn’t really matter how you register your sidebars but if you regularly do theme related work or want to start creating some reusable snippets, I highly recommend using loops and data arrays.

I personally do not like the register_sidebars() function because it leads to invalid HTML in many cases and it doesn’t give you as much control as you should have in a proper theming scenario.

This article was written by Daniel Pataki

Daniel is the editor of the WordPress section on Smashing Magazine. He loves board games and going on runs with his dog.

Hand-picked related articles

  1. Gravatar for this comment's author
    Rami Y October 27, 2015 at 3:13 pm

    You can use the “Sidebar Generator” to create your sidebars – https://generatewp.com/sidebar/

  2. Gravatar for this comment's author
    Hitesh Parekh November 30, 2015 at 7:29 am

    WordPress sidebars are not just for placing it on the left or right side, it is basically a container of WordPress Widgets, the container can be placed in the footer or header depending where the registered sidebar is called in the main template.

Leave a Reply

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

You have Successfully Subscribed!

Send this to a friend