How to add an extra sidebar in WordPress by Bas Wijdenes

Introducing an extra sidebar in WordPress.

In this blog post I explain how you can add an extra sidebar to a WordPress site.

I used the Twenty Fifteen Theme from the WordPress developers myself in the blog post, but of course this also applies to other themes.

I started looking at a second sidebar because I personally think that the Twenty Fifteen Theme is not wide enough for larger screens.


Before we start.

Before we start, I want to point out a number of things.

  • The changes we make are done in the WordPress core. To prevent a WordPress update from overwriting it, it is best to create a child theme in WordPress.
  • To make it even easier I also use FileZilla as FTP client and Notepad++ for editing the files.

Let’s add an extra sidebar to WordPress.

We need to start with adding a custom functions.php to your child theme.

Start FileZilla and log in with an FTP account and navigate to your child theme directory.
Create a new file and name these functions.php, for those who already have this can go to the next step.
Add the following code snippet to your new functions.php file. With new widgets it’s easy add something to your new sidebar.

/**
 * Register footer widget area.
 *
 * @since Twenty Fifteen Child 1.0
 *
 * @link https://codex.wordpress.org/Function_Reference/register_sidebar
 */
function extra_sidebar_twentyfifteen_child_widgets_init() {
  register_sidebar( array(
    'name'          => __( 'extra_sidebar', 'twenty-fifteen-child' ),
    'id'            => 'sidebar-4',
    'description'   => __( 'Add widgets here to appear in your extra sidebar area.', 'twenty-fifteen-child' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( ‘widgets_init’, ‘extra_sidebar_twentyfifteen_child_widgets_init’ );?>

You have now created a link with the functions.php in your main theme, so all settings are loaded, but it will first look at your child theme.


Creating a new sidebar.php.

Now that we have done the preparations we can make a new sidebar.php. In the Twenty Fifteen Theme you already have a sidebar.php so you can now copy it nicely.  Copy / paste it to your child theme directory.

If you do not have sidebar.php, you can copy the following code snippet and paste it into a new file.

There is more in the sidebar.php than we need (unless you want to keep the menu). So we first have to delete some code.

Copy / paste the snippet below if you do not want extra things as a menu in your new sidebar.

<?php
/**
 * The sidebar containing the main widget area
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-4' ) ) : ?>
 
widget-area2" role="complementary">

Okay, this has probably been a lot for someone who has no web development knowledge. So I hope you can keep it up.


We now need to call the code snippet in your WordPress header.php.

This is the last bit of code snippet that we have to add. You can place this code-snippet where you want.
Keep in mind, that if you have given a different name to your sidebar2.php you use that name.

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

If you named the new sidebar ‘sidebar-NAME.php’ then make sure you place it like this in the code-snippet: get_sidebar(‘NAME’);.

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

Place the code snippet somewhere in your header.php. The header.php can also be copied from your main directory to your child theme so that you can adjust it. Best is to place the code snippet between the </head> and <body <?php body_Class();?>>

<!-- .site-header SIDEBAR-2--> 
<div class="sidebar-2"> 
<?php get_sidebar('2'); ?> 
</div>

OK, the sidebar is now active.
If you refresh your page, you’ll have a new sidebar on your website.


Last but not least, we need to style the new sidebar.

The only thing we have to do now is to style the sidebar in your CSS.
I styled it myself and you could copy / paste it from me.

@media screen and (min-width: 59.6875em) {

 .sidebar-2 {
 
 max-width: 100px;
 position: fixed;
 
 }
} 
 
 @media print {
 .sidebar-2 {
 position: relative !important; /* Make sure sticky sidebar doesn't affect to print */
 }
}

.sidebar-2 {background-color: rgba(255, 255, 255, 0.9);
}

.widget-area2 {
 margin: 9.09090% auto 0;
}
 
@media screen and (min-width: 38.75em) {
 .widget-area2 {
 margin-top: 0;
 }
 }

This is the same style as your other sidebar.php when using the Twenty Fifteen Theme.


What about mobile users?

As last I added some things to my CSS so that the sidebar does not show to mobile users. Otherwise it will go over their screens.
The minimum size to show the sidebar is 1538px. This can be adjusted to what you want.

See the code snippet below.

@media screen and (max-width: 1538px) {
.sidebar-2 {
display: none;
}
.widget-area2 { margin: 9.09090% auto 0;
display: inherit;
}
}

@media screen and (min-width: 1538px ) {
 .sidebar-2 {
 right: 0;
 max-width: 150px;
 position: fixed;
 height: 100%;
 background-color: #FFFFFF;
 }
 .widget-area2 { 
 margin: 9.09090% auto 0;
 max-width: 150px;
}
} 
@media print {
 .sidebar-2 {
 position: relative !important; /* Make sure sticky sidebar doesn't affect to print */
 }
}

I now have a full-length sidebar that widens up to 150px.
The position is fixed and does not show at below 1538px.
You can use the sizes yourself to adjust it to what you want. Test it on all devices or with F12 for responsive.

Add an extra sidebar to your WordPress theme.
Add an extra sidebar to your WordPress theme.

To really add content to the sidebar you can simply add widgets.


Summary

I have explained in another post how you can add a footer widget to WordPress. Here I also use the Twenty Fifteen Theme as an example.

I have reviewed this blog post and I no longer think that the content is very relevant, but because this post has been popular and some may still use the Twenty Fifteen theme, so I keep the blog post for now.


Banner image credits

Banner Image by simplu27 from Pixabay.

Published by

Bas Wijdenes

My name is Bas Wijdenes and I work as a PowerShell DevOps Engineer. In my spare time I write about interesting stuff that I encounter during my work.

4 thoughts on “How to add an extra sidebar in WordPress by Bas Wijdenes”

  1. Hello, I’m a beginner of web development
    I don’t get why you named
    ‘id’ => ‘sidebar-4’,
    on your functions.php file; since you name it sidebar-2 afterwards.

    I already have a functions.php that works. So I should just ignore this paragraph and go on the rest of the tutorial?

  2. You made a simple typo in the last line of your code:
    It should be as follows:

    add_action( ‘widgets_init’, ‘extra_sidebar_twentyfifteen_child_widgets_init’ );?>

  3. Hello. I attempted to add a right sidebar in my Twenty Fifteen child theme, using your code in a custom functions.php file in the child theme folder. Used as-is, it breaks the site I’m testing it on.

    Here are the error messages from WP:
    ‘, ‘after_title’ => ‘
    ‘, ) ); } add_action( ‘widgets_init’, ‘twentyfifteen_child_widgets_init’ );
    Warning: Cannot modify header information – headers already sent by (output started at /home/testsite/www/www/rrrsw66/wp-content/themes/twentyfifteenchild/functions.php:22) in /home/testsite/www/www/rrrsw66/wp-includes/option.php on line 820

    Warning: Cannot modify header information – headers already sent by (output started at /home/testsite/www/www/rrrsw66/wp-content/themes/twentyfifteenchild/functions.php:22) in /home/testsite/www/www/rrrsw66/wp-includes/option.php on line 821

    I believe that it might be necessary to unregister the original sidebar first, but I have not tested this yet. Ideas? Thank you!

Leave a Reply

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