How to Use the WordPress Register Sidebar Function

Not long ago we had a look at how sidebars work in the WordPress database. If you want to work with widgets and sidebars however, in most cases the first step is to register them – make WordPress aware of them so users can start assembling things in the backend.

The post How to Use the WordPress Register Sidebar Function appeared first on Kinsta Managed WordPress Hosting.

Spread the love

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

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.

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.

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.


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.

Facebook Comments

More Stuff

The 52 Best Tools for Freelancers to Scale a Business People choose to freelance for a number of reasons—but most often, it is because they desire freedom:The freedom to do what they love and what they’...
How We Got Our Stripe Account Back Update: This post was originally written back in 2014 and we have had no problems since. Check out how we’ve reduced credit card fraud by 98% using St...
5 Things More Important for Your Content Than Content-Length in 20... In recent years content length has been fiercely debated, with many SEO gurus telling their followers that they must create extremely long posts if th...
Testing React Components With Enzyme So far in my series of posts on React development for WordPress, I’ve covered React basics, create-react-app and testing with Jest. Jest is useful for...
Spread the love

Posted by News Monkey