Moving Sidebar Right Or Left In WordPress Theme

There are two places to keep the sidebar either right or left. In WordPress themes, the places are already decided, for example in Twenty Twelve theme the sidebar is on right but in twenty fifteen it is on left. If you want to move its position, you have to make changes in CSS.

Let's examine both examples themes.

Moving sidebar to left in Twenty Twelve.

1. Default position in this theme is right.

2.  Now see, the middle area of the page has two sections, post and sidebar.

3. And there are two CSS ids for these sections. #primary and #secondary

4. Now to move the sidebar to left insert the following CSS code to stylesheet, It is recommended to use child theme's stylesheet:

#primary
{
float:right;
}
#secondary
{
float:left;
}

5. Let's again see the frontend. It should look like below:

Isn't it easy.

Let's take another theme twenty fifteen. It has a bit different layout from twenty twelve, but here also the page area is divided into two sections.

As you are seeing, the sidebar is on the left and covered full height of the page. Here you have to follow the same method to get the CSS ids of both sections.

1. Look for ids.

2. Now insert the following CSS to child theme's stylesheet.

body:before
{
background-color: none;
width: 0;
}

#sidebar
{
float:right;
margin-left: -100%;
margin-right: 0;
background-color: #FFF;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.15);
}

#content
{
float:left;
margin-left: 0;
}
.site-footer
{
margin: 0px 0px 0px 6%
}

Check it. Theme will look like:

From the above examples, you have seen that it is not difficult to move the sidebar from the right side to the left side or vice versa.