Wordpress Banner

TUTORIAL: extra sidebar twenty fifteen theme

The WordPress twenty fifteen theme has as default a left sidebar. The theme has a clean look, but I find that on bigger monitors the background is shown too much, because of that I created an extra sidebar to right for monitors with a wider screen.

If you also want to know how you create footer widgets like I have take a look at this blog post.


BEFORE WE START adding THE extra sidebar WIDGET

Before we can start we need a few things:


HOW TO: Add extra sidebar twenty fifteen theme
  • open your FTP client and browse to your child theme directory.
  • create a new file and name it functions.php
  • Open and add this to the newly created functions.php
  • Do not edit the functions.php in your theme main directory! always make a back-up just in case.
/**
 * 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’ );?>

(Yes I copy/paste this from my ‘Add footer widget post‘)

Adding this piece of code will make sure the child-theme functions.php will still inherit everything from your main theme functions.php. And now you’ve also added an extra sidebar widget.

Now we’ll have to create the sidebar lay out, but since we already have one on the left we can use that to make a copy.

  • Go back to your main theme directory and copy the sidebar.php.
  • Place the copy in your child-theme directory.
  • Re-name this to sidebar-2.php (It doesn’t matter if you give it a different name, but be sure to use that name later on).
  • If you couldn’t find your sidebar.php file, I’ll copy/paste what you need in the next paragraph.

We have an extra sidebar, that isn’t placed anywhere yet, but you probably don’t want to place your menu twice so we’ll have to reduce the code to the required.

Remove everything what you don’t want or if you really just want a widget as extra sidebar remove all code from the sidebar.php and Copy/paste this snippet of code:

<?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">
 
 
 


This has probably been pretty tough for someone who hasn’t worked with php nor ever looked at the back-end files of WordPress. Try not to forget a step and read carefully.

This is the last snippet of code we’ll have to implement. With this snippet of code anywhere in your main back-end files it will inherit what you’ve placed in your ‘Extra Sidebar Widget’.

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

Be careful, if you picked a different file name for your new sidebar then use that instead. at least name it sidebar-YOURNAME.php and place ‘YOURNAME’ between the (‘ ‘) like I’ve done with mine: sidebar-2.php – get_sidebar(‘2’);.

This only counts if you choose a different file name.

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

The last thing left is to place the code somewhere in your WordPress theme file.

Congratulations! You’ve made an extra sidebar yourself! but we’re not done. We’ll still have to style the new sidebar to your likening. 

We’ve added new style classes .sidebar-2 and .widget-area2. Open up your child-theme css to add new styling for the sidebar.  I’ve already done the work for you to find the code for your .sidebar-2 and .widget-area2:

@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 old sidebar.

  • Go to your main theme directory again.
  • Make a copy of ‘header.php’.
  • Place this copy in your child theme directory.
  • Open the file in notepad++ and place this snippet of code between</head>YOUR CODE HERE! <body <?php body_class(); ?>>
 <!-- .site-header SIDEBAR-2-->
<div class="sidebar-2">
<?php get_sidebar('2'); ?>
</div>

If you refresh your page, you’ll have a new sidebar apart from your body.

From here I’ll will start styling the new sidebar, but I’ll style it in a way it wont be visible for Mobile users, so that’s up to you to decide if that’s what you like. I only want my div to shown when the screen is at least 1538px.

If you want that or a smaller screen make sure to change the number to your likening. This is the css I use, be sure you remove the old code and replace it with this:

@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 right sidebar that is 150px wide. Its position is fixed, and it wont show at screens smaller than 1538px. You could play with the sizes and background as much as you like, but check if everything works on different devices.

extra-sidebar-widget-2

 

To add new content to the sidebar, go to your widget area and place new widgets in the ‘Extra sidebar widget’.

That’s it! you’ve just created a new sidebar all by yourself :-). If this somehow didn’t work out, please leave a comment or contact me.

Published by

Bas

My name is Bas Wijdenes and I'm working full time as a services engineer. In my free time I like to write tutorials about computer problems I encounter on a daily basis. The main reason I started my blog is, because I wanted to work on my English vocabulary.

3 thoughts on “TUTORIAL: extra sidebar twenty fifteen theme”

  1. 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’ );?>

  2. 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 *