How to move the sidebar to the right in TwentyFifteen

I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.

I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:

Option 1: CSS Tweak

Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):

body:before {
    right: 0;
    left: auto;
	direction: ltr;
}
.sidebar {
    float: right;
    margin-right: auto;
    margin-left: -100%;
	direction: ltr;
}
.site-content {
    float: right;
    margin-right: 29.4118%;
    margin-left: auto;
	direction: ltr;
}
.site-footer {
    float: right;
    margin: 0 35.2941% 0 0;
	direction: ltr;
}

Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.

Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:

Option 2: Pre-made Child Theme

Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here:





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.