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.
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.
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 to change the sidebar side in the sidebar settings. 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.
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:
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.
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.
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.
So much to see... 5 WordPress plugins to visually edit CSS on your blog
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.
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 appearance and to optimize the handling 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 WordPress Plugin premium responsible for improving the security of your website. This plugin contains a collection of protection and security tools that will protect your website against possible 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 WordPress Plugin premium which 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 have to install it first to fully use this WordPress Plugin
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.
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.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to find the login URL of your WordPress blog
- How to create a super hero zone with animated text
- How to customize the CSS of your WordPress website
- How to add categories to the menu of your WordPress blog
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.
...