2015 Theme: How to Move Sidebar to the Right Side

I really like the 2015 WordPress Theme. It’s clean, uncluttered, mobile-friendly, loaded with options, and super-fast. But, it has a slight problem- When you look at it on a mobile device, you have to scroll through the whole sidebar before you get to the page content. Plus, I like my sidebars on the right side anyway as a general rule. So I moved the sidebar to the right side. What I had to do was create a 2015 Child Theme. I’ll explain how I did it exactly, and even give you a download link in case you’d like to try it out on your site.

Download my 2015 Child Theme here.

How I Created a WordPress 2015 Child Theme:

Any time you want to do any customizing to any WordPress Theme, you should create a child theme and save all of your customizations in there. If you don’t, when the theme updates all of your changes will be gone. It’s really very easy to do. There’s just 3-steps.

1. Create a folder with the child theme name.
2. Create a CSS style sheet (a text file called style.css).
3. Create a functions.php page.

And if you really want to look good, you can add a 4th item- a screenshot image of the site, just call it screenshot.jpg and put it in that file.

Your folder name should be self-explanatory, something like twentyfifteen-child-theme (or whatever name you use.) In this case, I called it twentyfifteen-child.

Inside my style.css text file, I pasted exact this code below:

/*
 Theme Name:   Twenty Fifteen Child Theme by CustomizeWordpress.com
 Theme URI:    http://www.customizewordpress.com/twentyfifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       CustomizeWordpress.com
 Author URI:   http://www.customizewordpress.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/@import url("../twentyfifteen/style.css");

@media screen and (min-width: 59.6875em) {
.site-content {
float: left;
margin-left: 0px;
width: 70.5882%;
}
.sidebar {
float: right;
right:0;
margin-right: 0px;
max-width: 413px;
width: 29.4118%;
}
body:before {
right: 0;
left:auto;
}
.site-footer {
margin: 0 0 0 6.1%;
}

}

* That line that begins with @import url has to be the exact file path to the style.css from the parent theme. In this case I used twentyfifteen (not 2015), which is the exact spelling of the theme. Although, I should warn you, WordPress says that is not the best practice any longer (you should instead call the parent theme from your functions.php file). However, for me that’s the only thing that worked. See this for more detailed instructions creating a child theme.

Inside my fuctions.php page, I pasted this code:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

I’m no WordPress expert. I got all the explanations at WordPress.com and made some changes to reflect my parent theme and customization ideas. I’m sure some expert will come along and correct me abut that @import code especially. But I can tell you this- it worked. Well, it does have one minor glitch… When you view it on a big monitor, and scroll up or down, the sidebar text jumps left or right a little. I’m pretty sure that has something to do with the js code, and I don’t know enough to tackle that.

Anyway, thanks for reading, and here’s the download link:

Download 2015 Child Theme here.

If you want to do some more customizing to the 2015 theme, go here.