Skip to Main Content

How to change the sidebar side on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Recently one of our readers asked us how to change the sidebar side of a WordPress theme?

We usually get this question from users who want to change the location of their sidebar from left to right or from right to left.

In this tutorial, we will show you how to change the location of the sidebar on WordPress.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to change the location of the sidebar on wordpress e1568058176266

Why change the location of the sidebar on WordPress?

Usability experts believe people scan pages from left to right. They recommend putting important content on the left so that users see this content first. However, this could be reversed if your website is in an RTL language (right on the left).

Find out if should your WordPress blog have sidebars

Many WordPress websites use the typical blog layout with two columns. One for the content, and the other column for the sidebar.

typical content demo WordPress sidebar

If you are new to web sites, then you should select a WordPress theme that has a sidebar on your preferred location.

Many WordPress themes offer options for changing the sidebar side in the settings of the latter. However, if your WordPress theme does not have this option, you will have to change the sidebar side manually. Go further by discovering how to remove the sidebar on WordPress

That said, let's take a look at the method you need to use to easily change the sidebar side of WordPress by using CSS.

Changing the sidebar with CSS

Before making any changes to your WordPress theme, you should first consider the creating a child theme. By using a child theme, you will be able to update your parent theme without losing your changes.

Discover How to display a different sidebar for each article on WordPress

Second, you should always create a backup of your WordPress website when you make real-time changes to your active theme.

You will need an FTP client to edit the WordPress theme files. Consult the Guide on how to use FTP.

Log in to your WordPress website using the FTP client and navigate to the themes folder. It is usually located at:

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

Now you need to download and open the main stylesheet file of your WordPress theme in a text editor like Notepad. This file is called style.css, and it is in the root directory of your WordPress theme.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Discover how to manage WordPress files and folders

In this file, find the CSS class of your sidebar. Generally this class is " sidebar ". In this example, we use the default WordPress theme " Twenty fifteen Who has this class for the sidebar:

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

As you can see the sidebar floats to the left with a margin of -100%. We will change the float to the right:

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

Save your changes and upload the style.css file to your website using an FTP client. Now, if you visit your website, it will look like this:

Demo website modification of the sidebar

Indeed, we moved the sidebar, but we did not move the content area. " Twenty Fifteen Uses this CSS to define the position of the content area.

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

We will change it to move the content to the right. As follows:

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

Here is what your website will look like after applying this CSS code.

new presentation moved sidebar website

As you can see we changed the location of the content area and the sidebar. However, there is still a white block on the left.

Go further by discovering how to manage WordPress files and folders

You will often encounter these errors when working with CSS. It will take some detective work to understand what is causing this and how to fix it.

Use your browser's "Inspector" tool to look at the source code. Point your mouse at the affected region in the browser, right-click and select "Inspector" from the browser menu.

Tool inspect browser

As you move your mouse around the source code view, you will notice the areas it affects highlighted in the live preview. In the right pane, you will be able to see the CSS used for that selected element.

Discover our 5 WordPress plugins to visually edit CSS on your blog

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

So the CSS corresponding to the highlighted item must be readjusted.

@media screen and (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); happy: ""; 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 code adds an empty block of 29,4118% width and a width of 100% to the upper left. Here's how we're going to move it to the right.

@media screen and (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); happy: ""; 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 * /}

After saving and uploading the stylesheet to the server, this is what your website will look like.

New look sidebar web site on the right

Working with CSS can be confusing for beginners. If you do not want to do all the manual work, then you can try the WordPress CSS Hero plugin. It allows you to edit CSS without writing code, and it works with every WordPress theme.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Zxeion

Zxeion is a powerful premium WordPress plugin responsible for improving the security of your website. This plugin contains a collection of protection and security tools that will protect your website from possible attacks.Zxeion wordpress plugins protect site against malware virus attacks

Its real-time protection system will help you identify threats to your website and block them, without you having to do anything.

Discover also our 7 plugins to boost your sidebars on WordPress

Its features are: real-time protection, excellent customer support, regular updates, IP address blocker, excellent documentation, modern and professional interface, dedicated customer support and others

Download | Demo | Web hosting

2. Slaido 

Slaido is a premium WordPress plugin that allows you to choose from nearly 320 responsive slider templates and import one of them into your website in just a few clicks. It's a complete pack of templates, perfect for slider Revolution. So you will first have to install the latter to fully use this WordPress pluginSlaido template pack for slider revolution wordpress

Its main features are: a responsive layout of its sliders, the ease of importing or exporting sliders, regular updates, customer support available 24/7, fluid and very cool animations, the availability of video tutorials for a quick start, support for Google Fonts, and many more.

Download | Demo | Web hosting

3. Contact Us Form

Contact Us Form is a premium responsive WordPress plugin and a simple tool but rich in customization options that allows you to display a clear and encouraging form, on which your visitors can contact you by leaving their message.

Contact us form wordpress contact form plugin

You will be able to define the necessary fields, choose the best layout of the fields and customize it completely to encourage your customers or visitors to leave their suggestions or messages.

We also invite you to read: 10 WordPress plugins to create and manage a restaurant website

Just set up the e-mail address where you want to receive the messages and use it to grow your business in the most profitable direction.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here! That's it for this tutorial. We hope it helps you change the sidebar side of your WordPress blog. Feel free to share this article with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...  

This article features 1 comment

  1. […] In this tutorial, you will learn how to modify the location of the sidebar of your WordPress theme. […]

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share
tweet
Save1