How To Create a Sidebar (Widget Area) In WordPress

Home » Blog » WordPress Development » How To Create a Sidebar (Widget Area) In WordPress

In WordPress, a Sidebar is any area of your theme where the user of the theme can display widgets. Sidebars used to be on either the left or right side of the blog. Hence the name sidebar.

If you want to allow your theme’s users to display widgets on their website, you must create at least one sidebar area. You can, however, create as many as you want. You might want to create a sidebar displayed on the right of every blog post page. And another sidebar (widget) that is displayed in the footer.

In this guide, you’ll learn everything you need to get started with sidebars.

How To Register a Sidebar

Before you can render a sidebar (widget area) in your theme, you need to register it…

To register a sidebar, you need to call the register_sidebar function with an array of these options:

  • id — This is the unique id you’ll use to render this sidebar. It must be lowercase.
  • name — The name of your sidebar. This will be displayed in the WordPress admin panel to your theme’s user.
  • description — Describe where this sidebar will be displayed on the website. Your users will see this description.
  • class — This class will be added to every widget.
  • before_widget — A string containing opening HTML you want to output before every widget.
  • after_widget — A string containing closing HTML you want to output before every widget.
  • before_title — HTML to output before the title of the widget.
  • after_title — HTML to output after the title of the widget.

Here’s an example of how you can use the register_sidebar function:

add_action( 'widgets_init', 'wpturbo_register_sidebar' );
function wpturbo_register_sidebar() {
	register_sidebar(
		array(
			'id'            => 'footer-widget-area',
			'name'          => 'Footer Widget Area',
			'description'   => 'This sidebar will be displayed in the footer area of the website.',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget'  => '</div>',
			'before_title'  => '<h3 class="widget-title">',
			'after_title'   => '</h3>',
		)
	);
}

In the above example, a sidebar with the ID footer-widget-area will be registered.

You’ll want to place this code in your theme’s functions.php file.

If you find this code confusing, just use our sidebar generator. It offers a lot of customization options and will generate the code you need in seconds!

How To Display/Render a Sidebar

To render a sidebar (widget area) you’ve registered, you can call the dynamic_sidebar function:

dynamic_sidebar( 'footer-widget-area' );

Calling this function will render the widgets that the user added to this sidebar (widget area).

Usually, you’ll want to display the same sidebar in many different template files of your theme such as single.php, page.php, blog.php, etc.

As a general best practice, you should call dynamic_siderbar from a sidebar.php file like this:

<div id="my-custom-sidebar">
	<?php dynamic_sidebar( 'footer-widget-area' ); ?>
</div>

Just putting your sidebar code in a sidebar.php file doesn’t do anything on its own.

Now, rather than calling the dynamic_sidebar function, you can call the get_sidebar function wherever you want to render the sidebar:

<?php get_sidebar(); ?>

This way, you only have to edit your sidebar’s code in one place whenever you make a change…

If you have more than one sidebar or more than one style variation of your sidebars, you can create different sidebar.php versions.

If you create a file called sidebar-footer.php, then you can display it using this code:

<?php get_sidebar( 'footer' ); ?>

get_sidebar takes one argument. It’s the $name in sidebar-{$name}.php

Conclusion

Even if you aren’t building a blog theme, creating sidebars allows your users to customize their websites by adding widgets on their websites in your registered sidebars (widget areas).

Leave a Reply

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

Register an account to save your snippets or go Pro to get more features.