With WordPress, you can do lots of stuff on your website with the help of plugins, themes, and code-based editors. You can develop a website in WordPress in no matter of time with anything you need like the menu bar, sidebar, forms, etc. It is also very simple to perform any modifications to your existing WordPress website easily. In this article, we are gonna see how to change the sidebar side to any direction like Left, right, up, or down on your WordPress website. Also, we are gonna see how to edit the sidebar with CSS code without any coding knowledge.
Change Sidebar using Theme
There are some themes available on the WordPress theme store that allows you to change the sidebar side to anywhere on your site directly from the theme settings. The chance of having this functionality in a free theme is less when compared to a premium theme. So if you are using a free theme with no sidebar changing functionality then continue reading the article.
Changing Sidebar Side in WordPress using CSS
[1] Open your WordPress site FTP client page. [2] Here go to wp-content >> themes >> (theme folder).Note: Before making any change to your WordPress theme, it is best to backup your WordPress site or create a child theme of your WordPress theme
[3] Download the Style.css file from the theme files. [4] Open the file on any editor on your PC. [5] Add the following line of code in the .css file..sidebar {
float: right;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
Note: In the float section, you can change the direction by changing right to left, up or down of your need. Also, the sidebar is the name given for the sidebar section in most themes, if not in your theme, then change it accordingly.
[6] Once done, save the change and upload the file to your WordPress FTP. [7] Now you have successfully shifted your WordPress sidebar to the required side.How to Edit Sidebar in your WordPress Website
Once the sidebar is fixed to the required position on your website, it is also possible to make some changes on the look of your WordPress website.
[1] Go to your Website with the newly changed sidebar from your Chrome browser. [2] Press F12 on your keyboard to inspect the site. [3] Click on the Select Element icon from the inspect panel. [4] Click on Sidebar on your Website and this will show you the HTML and CSS code used in it.The CSS code you are about to edit looks similar to this.
@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 */
}
[5] Here in the CSS section, make the required changes and see them live changes.
[6] Once the change is done, copy the code and paste it into your style.css file.
Note: Not only you can make changes in the available function of code, but you can also add any applicable functionality of your own as code if needed.
[7] Once done, the change will appear on your website.Conclusion
These are some of the possible ways to change the sidebar side of your WordPress site. If you still have issues with adding codes on your WordPress site, then try using the CSS hero plugin that works with all the WordPress plugins and allows you to make any changes related to CSS on your WordPress site. If you have any queries let us know in the comments section below.
