How to change sidebar side in WordPress

We have already shown you how to add a sidebar from a specific post/page. In this short article, we are about to show you an easy way of changing sides of your sidebar.

It doesn’t matter if you use the sidebar on every page or you have used our simple technique to add/remove the sidebar, you might want it on the other side. As you might have seen in different themes, a sidebar can be on the left or the right side but there usually isn’t an option to change the side.

Changing the side of the sidebar depends on the theme you are using and it is impossible to give you the universal code which you would simply copy and paste. In the following example, we are working on Twenty Fifteen theme. If you want to do the same with any other theme, simply follow the instructions but be prepared there might be different names for sidebar classes.

To move the sidebar to the left or the right, you will have to modify one line in your style.css:

  1. Navigate to style.css file and open it
  2. Search for a class similar to this:
  3. .sidebar {
    float: left;
    margin-right: -100%;
    max-width: 413px;
    position: relative;
    width: 29.4118%;
    }
  4. Change “float: left;” to “float: right;” or vice versa
  5. Save changes and that’s it

Although this is very simple, depending on your theme, there is still work to be done in order to perfectly align everything. The example code from the step two is CSS code from Twenty Fifteen theme. After applying the code, your sidebar will move on the left/right side, but your site will probably look messy as you’ll see once you preview it.

That’s where you have to modify a few more things. You should play around with margins and width to set your sidebar exactly where you want. Simply try different percentages and preview the result until you get it just right.

Also, you will want to edit your content class:

  1. Open style.css if you have closed it
  2. Find a class which describes the content; something like this:
  3. .site-content {
    display: block;
    float: right;
    margin-left: 0.4118%;
    width: 75.5882%;
    }
  4. Make the content float on the different side than the sidebar. If you have changed your sidebar to “float: right;” your content should “float: left;”.
  5. Save changes.

As same as for sidebar, you should change the margins and width to align your site perfectly.

Although the technique described above isn’t as easy as the rest of our tutorials where it’s usually enough to c/p the code, we hope it will help you get started with the customization. If you need help with your specific theme, please leave us a comment below and we will try to help you in more details.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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