Custom Sidebar – Child Themes in WordPress

1. Register Custom Sidebar in functions.php
2. Create Custom Sidebar File
3. Call Custom Sidebar!
4. Style as Desired

The nice thing about child themes is that it gives you a full theme as a base, while also allowing for endless customization.

Any file that you write in your child theme, e.g. functions.php, header.php, sidebar.php, will overwrite the parent theme’s file.

It’s worth mentioning that this doesn’t seem to be working on my local WordPress install, with theme Twenty Seventeen. When I write my own files, it isn’t overwriting the parent theme. Problem does not occur on the live site. ¯\_(ツ)_/¯

So, you can copy the entire file from the parent theme, and just make one small modification.

I often do this for the footer of the sites I build, adding credit for the site design next to “Proudly Powered by WordPress”.

Or, you could make much more significant changes to the files, or even rewrite them completely.

Customizing child themes is a great segue into Theme Development in WordPress.

It allows you to learn fundamentally how they are structured, without the daunting task of starting from scratch.

Note: if you just want to move the sidebar from the right to the left, you can simply move get_sidebar(); before the primary content. This needs to be done on every page where you want your sidebar displayed. (front-page.php, index.php, page.php, single.php, etc.)
You will also need to use float:left; on the sidebar’s container.


1. Register Custom Sidebar in functions.php

Most themes have at least one sidebar to start with. The declarations of each will differ between themes.

Although it doesn’t really matter all that much, it’s a good idea to continue the convention of the theme you’re working with, for the sake of consistency.

The declaration for the sidebars in Twenty Seventeen looks like this:

/* twentyseventeen/functions.php */
function twentyseventeen_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Sidebar', 'twentyseventeen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyseventeen' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
<br />...<br />
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

It should be fairly easy to see what the code here is doing.
  1. The first value in the name parameter is the name you will see on the Widgets page from the Admin panel (Appearance -> Widgets).
    The second value is the Text Domain. This is the name declared in your theme header.
  2. The id is the argument you will pass later to display the sidebar.
  3. The first value in the description parameter is the description you will see on the Widgets page.
  4. The before_widget and after_widget parameters allow you to wrap each widget in html tags, with custom IDs or classes.
  5. The before_title and after_title do the same, but for the title of each widget.

custom sidebar wordpress kimberlythegeek

For the purpose of this tutorial, I will be adding a left sidebar to the Twenty Seventeen theme.

This is what my custom sidebar registration looks like:

/* twentyseventeen-child/functions.php */
<?php
  function twentyseventeen_child_widgets_init() {
  	register_sidebar( array(
  		'name'          => __( 'Left Sidebar', 'twentyseventeen-child' ),
  		'id'            => 'sidebar-left',
  		'description'   => __( 'Add widgets here to appear in your left sidebar.', 'twentyseventeen' ),
  		'before_widget' => '<section id="%1$s" class="widget %2$s">',
  		'after_widget'  => '</section>',
  		'before_title'  => '<h2 class="widget-title">',
  		'after_title'   => '</h2>',
  	) );
  }
add_action( 'widgets_init', 'twentyseventeen_child_widgets_init' );
?>

Be sure to follow the convention of sidebar-[name].php
Notice that I changed the function name to twentyseventeen_child_widgets_init to prevent overwriting the function from the parent theme.

Once you have completed this step, you should see your custom Sidebar on the Widgets page.


This is the content of sidebar.php in Twenty Seventeen:

/* twentyseventeen/sidebar.php */
<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

Our custom sidebar file will look mostly the same. Only the id has changed, and I’ve added a class:

/* twentyseventeen-child/sidebar-left.php */
<?php

if ( ! is_active_sidebar( 'sidebar-left' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area left-sidebar" role="complementary">
	<?php dynamic_sidebar( 'sidebar-left' ); ?>
</aside><!-- #secondary -->


3. Call Custom Sidebar!

The location of the primary sidebar in index.php:

/* twentyseventeen/index.php */
<div class="wrap">

<!-- header content -->

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<!-- main content -->

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

Here is where the naming convention is important.

When you use get_sidebar(); with a parameter, i.e. get_sidebar(“left”);, WordPress will look for the file named sidebar-left.php

We will be placing the sidebar within the main container (.main in this case) and before the primary content.

This means that the sidebar will display before the main content on smaller screens.

To overwrite the parent theme’s index.php, copy & paste the contents into your own index.php within your child theme.

Then we can call the sidebar:

/* twentyseventeen-child/index.php */
<div class="wrap">

<!-- header content -->

<?php get_sidebar("left"); ?>
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		<!-- main content -->
		</main><!-- #main -->
	</div><!-- #primary -->

	<?php get_sidebar(); ?>
</div><!-- .wrap -->

This will have to be modified on every page where you want your sidebar to display: front-page.php, index.php, page.php, single.php, etc.


4. Style as Desired

To get the left sidebar to actually display on the left, we need some styling.

Note: he above changes aren’t permanent for this site, because I don’t actually want to add another sidebar.

You will need to use float:left; on the sidebar’s container (.left-sidebar in this case).

If you plan on using both a left and a right sidebar, you will likely have to do a bit of styling.

I made the main content and the sidebar more narrow to allow the three sections to be displayed side-by-side.

You will probably also have to make some changes to your media queries so the design remains consistent on smaller screens.


While I won’t be using the left sidebar on this site, you view the code I used to make it in my github repository.

As always, if you run into problems that I’ve not covered here, Google that shit!

I make a good effort to explain everything I do and why I do it, but problem solving is a key aspect of programming.

You will learn much more when you figure things out for yourself.

Thanks for reading!

Syntax Highlighting by EnlighterJS

About the Author

Kimberly is currently a Test Automation Engineer for Mozilla, with a focus on automating web accessibility testing.

While she always enjoys learning new technologies, her current focus is python, and when she has free time (she doesn't), she enjoys JavaScript programming and learning about Data Analysis.

When not coding, Kimberly spends time with her three young boys, brand new baby girl, and her partner, in Durango, CO.