Complete Guide On How to Change the Sidebar Side in WordPress

Complete Guide On How to Change the Sidebar Side in WordPress

Many users want to know how to change the sidebar side in WordPress? You can change your sidebar side left to right or right to left. However, you can change the sidebar side in your WordPress website either manually or by using few CSS codes.

In this post, we will explain to you how to change the sidebar side in WordPress.

Why Change the Sidebar Side?

Usually, many experts say that users see the page left to right. So, they recommended putting the important thing on the left side of the page. Thus, first, users will see the content on the page.

But, if your website language written in right to left direction then it could be reversed.

Most WordPress users use the simple blog layout with two columns. They use one column for the content and another column for the sidebar.

sidebaronleft

If you create a website then you have to select a theme to put the sidebar in your preferred location. But, most of the themes have options to change sidebar side from the theme settings.

And, if your theme does not have these type of option then you will have to switch the sidebar side manually. So, you can change the sidebar side in WordPress by using few of CSS.

Changing Sidebar Side using CSS in WordPress

Before doing any changes in your WordPress theme, You have to create a child theme. To do this you can read our blog how to create a child theme in WordPress.

Thus, by using this theme, you will be able to update your parent theme without losing any changes. Also, you should have the backup of your website, when you are doing those changes.

To edit your themes files, you will require an FTP client.  So, by using the FTP client connects to your WordPress website and go to the theme folder.

Usually, it is placed at:

/youwebsite/wp-content/themes/your-theme-folder/

You have to download and open your theme’s main stylesheet file in the text editor. This file called as style.css and it is placed in your theme’s root directory.

In this file, search the CSS class for your sidebar. This class usually like as .sidebar.

For example, we are using the Twenty Fifteen theme which is WordPress default theme. In this theme the CSS define as:

.sidebar {
float: left;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}

In the above example, you can see that it floats the sidebar to left with -100% margin to the right. So, we will change it to float right and margin-left:

.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}

Now, save your changes. Also, you have to upload the style.css file back to your site by using FTP client.

Hence, now, go to your website and see your website in action. It will look like:

movingcontentside

Since, It looks like this because we have moved only the sidebar, not the content area.

However, in the default WordPress theme, the content area is set like this:

.site-content {
display: block;
float: left;
margin-left: 29.4118%;
width: 70.5882%;
}

Now, we are moving the content area in the default WordPress theme.

.site-content {
display: block;
float: left;
margin-right: 29.4118%;
width: 70.5882%;
}

When now you visit to your website then it will looks like:

cssissues

You can see that we have changes the sides for content and sidebar area both. However, there is a white block on the left yet.

When you are working with CSS then it will come in the things. It will do some work to find what is causing that and how to resolve it.  To see the source code use the inspect tool of your browser.

To do that you have to point the mouse to the affected field in the browser and right and choose the inspect menu in the browser menu.

inspecttool

When you move the mouse in the source code view then you will see the area which affects highlighted in the live preview. But, on the right side, you will see the CSS used for the selected element.

We found that this CSS in our stylesheet requires some adjusting.

@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: “”;
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}

This CSS adds an empty content block of 29.4118% width and 100% width to the top left. Hence, we explain to you how to move it to right.

@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: “”;
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
right: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}

When you save and upload the stylesheet back to the server then go to your website. Now, your website looks like:

Sidebar Side in WordPress

Thus, you can change the Sidebar side in WordPress. But, for beginners, it is difficult to work with the CSS.

If you do not want to do the work manually then you can use the CSS Hero. It permits you to edit CSS without writing any code.  Also, it works with all WordPress themes.

Conclusion

Here, in this post, we have discussed how to change the sidebar side in WordPress. We hope this article will help you.

If you have any issue related to this post, please tell us in the comment section below. We are happy to help you.

And, share this post with your friends.

If you need help related to WordPress, please dial + 1 888 614 0555 (Toll Free) number to contact our Customer Suppport Service. Our support team always ready to help you.

Read more blogs:



Leave a Reply