How To Use the WordPress Register Sidebar Function

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
• WordPress Register Sidebar – Multiple Sidebars at Once
• Registering Multiple Sidebars Better

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_sidebars( 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.

Summary

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.

Suggested reading: How to Remove the Sidebar in WordPress (4 Methods).

Daniel Pataki

Hi, my name is Daniel, I'm the CTO here at Kinsta. You may know me from Smashing Magazine, WPMU Dev, Tuts+ and other WordPress/Development magazines. Aside from WordPress and PHP I spend most of my time around Node, React, GraphQL and other technologies in the Javascript space.

When not working on making the best hosting solution in the Universe I collect board games, play table football in the office, travel or play guitar and sing in a pretty bad band.

• Website
• Twitter