Adding Extra Sidebars

We get a lot of requests for people interested in adding additional sidebars (widget areas) to their sites, and we found that a lot of the tutorials out there were outdated, so we put together our own tutorial.

Technical note: this should work for all _s based themes.

Make sure you’re using a child theme, otherwise we might overwrite your changes with a theme update. Check out this page for how to create a child theme.

Inside your child theme, open up or create the file functions.php. Add this code to the file, after anything else already there.

function theme_child_widgets_init() {
	register_sidebar( array(
		'name'          => 'Custom Sidebar',
		'id'            => 'custom-sidebar-1',
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );
add_action( 'widgets_init', 'theme_child_widgets_init' );

If you go to the widgets page in your dashboard (wp-admin/widgets.php), you should see your new sidebar now.

The next step is to put it on your site where you want it. To do this, create a file called sidebar-custom.php. Inside that you’ll add:

<div id="tertiary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-sidebar-1' ); ?>

Now we can use the following line to add the sidebar to our site. Put this inside the template where you want to see the sidebar. For example, to add a sidebar to all pages in Umbra, edit your child theme’s copy of footer.php and put this after the first ?>.

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

You will definitely need to tweak the CSS of your child theme to display the sidebar nicely. Check out this tutorial for a from-the-beginning walkthrough of CSS, along with some excellent resources at the end.