How to Use the WordPress Register Sidebar Function

By Daniel Pataki Updated on July 14, 2018
243
Shares

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.

Looking for ways to improve your WordPress development workflow?

Kinsta’s hosting solution was built by developers for developers. Git, PHP 7, SSH, and WP-CLI, along with powerful staging and cloning environments gives you the tools you need to build sites faster!

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.

If you enjoyed this article, then you'll love Kinsta's WordPress hosting platform. Whether it's speeding up your website or getting 24x7 support from our veteran WordPress team, we're here to help your business succeed. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Check out our features

Hand-picked related articles

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.
  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?

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!

Consent

You have Successfully Subscribed!

Send this to a friend