How to Remove the Sidebar in WordPress
The sidebar is a very important area on a WordPress website as it can be used for a multitude of purposes. Generally speaking, sidebars are located to the left or right of the main content but they can sometimes be placed below the content as well. Sidebars contain widgets that are essential for the growth of the website or helpful with smooth user navigation through it. Those widgets include call-to-action buttons, newsletter forms, search bars, side menus, banners, and ads, among other things.
However, despite the obvious use of sidebars, some WordPress users still choose to disable them on their website, either on certain pages and posts or from their entire site. The reasons why someone might choose to remove their sidebar differ, and we will be taking a look at them, as well as the hows of removing sidebars, in course of this article. And, as this task could become complicated, we have included several methods showing you how to remove the sidebar in WordPress:
Why remove the sidebar in WordPress?
The most important reason why some WordPress users choose to remove the sidebar is because of how and where it is displayed on mobile screens. As the mobile screen has become the most commonly used viewport, all WordPress website owners should address any potential sidebar issues on mobile displays. Generally, on mobile devices, the sidebar is placed below the page content, which causes the page to be excessively long. This frequently discourages users from scrolling down to the sidebar section. Additionally, since mobile screens are rather small, a typical sidebar layout can lead to users needing to constantly zoom in and out to interact with some of the sidebar widgets.
Apart from that, the sidebar content could distract users from the main page content, thus defeating its purpose. This is very important to avoid on blogging sites—you want your readers to focus on the article content, which is cleanly and neatly displayed. Additionally, some niche-purpose websites like news-aggregating sites or magazines remove the sidebars as they create a sense of clutter in an already content-rich website.
Qode Themes: Top Picks
View Collection
How to remove the sidebar in WordPress
After seeing why you may want to remove the sidebar, let’s consider how you can achieve it. We will discuss various methods, starting with the easiest ones to apply. Additionally, we will show you how to disable the sidebar for all pages, as well as for a single page or post. Ultimately, the choice of which method to use and for which part of the website is up to you.
The best and the easiest method of removing the sidebar is by using the appropriate option(s) within your theme. All well-coded themes provide a wide array of options that help manage various aspects of the website. Therefore, the chances are very high that your theme contains a subset of options specifically related to the sidebar. As such, you should always examine the options of your current theme in the hopes of finding settings that can help you remove the sidebar.
We will show you how to disable the sidebar using the appropriate option within a Qode Interactive theme, as all our themes allow this. To disable the sidebar globally, navigate to Theme_name Options > Sidebar and locate the Sidebar Layout option. Alternatively, the correct path could be Theme_name > Page instead, with the option name remaining the same. Also, the Theme_name part will be replaced with the theme’s name and it may contain the word Core in some cases (e.g. Lekker Core). When you’ve located the option, select the No Sidebar setting, and press the Save Changes button to finish.
Sometimes, you might not want to disable the sidebar for all pages, but only for specific ones. You can do this easily if you’re using one of our themes. All Qode Interactive themes contain an equivalent set of options on individual pages to the ones they have within the global Theme_name Options. Using these page-specific options, you can adjust select options on individual pages. This includes the choice of whether or not the page should have a sidebar. The same applies to single posts, as they also have the options that let you make individualized adjustments.
Therefore, to disable the sidebar on a single page or post, click to edit it first, and scroll down to Theme_name Settings. Then, locate the Sidebar Settings section and position yourself within that section. Find the Sidebar Layout option, set the value to No Sidebar, and press the Update button to update the page or post. And that’s it—your chosen page or post won’t have the sidebar any longer.
If your theme doesn’t have a similar option for removing the sidebar, you will need to try a different method. Another way of removing sidebars includes finding a suitable plugin that offers this possibility. Thanks to the abundance of WordPress plugins, finding one to help you isn’t hard. In this particular case, you should look for plugins that mention sidebars (widget areas) or offer page or post templates that exclude the sidebar.
The plugin we found while searching the WordPress plugins repository is the Fullwidth Templates for Any Theme & Page Builder. The plugin offers various page and post templates, including the No Sidebar template. However, it doesn’t include an option for global application, meaning you would need to choose the appropriate template for each page or post separately.
To remove the sidebar on a page using this plugin, you would need to install it first. Then, click to edit the page and locate the Page Attributes section on the right. Find the Template option, choose the FW No Sidebar template as your page template, and press the Update button so that the choice would be saved.
Similarly, to remove the sidebar from a single post using this plugin, click to edit that post, locate the Post Attributes section, select the FW No Sidebar as the post template, and press the Update button to apply that choice.
This concludes our explanation on using custom plugins for removing the sidebar. You can now go through all the pages and posts where you want to remove the sidebar and do it following these steps.
If you weren’t able to remove the sidebar using the two methods we’ve outlined so far, you will need to opt for less beginner-friendly approaches. One of the reasons why you might not have been able to remove the sidebar could be due to an incompatibility between the plugin you found and your theme or the rest of your plugins. Another reason why you might want to try alternative methods of sidebar removal is that you weren’t satisfied with page structure or stylization after using a plugin-supplied template. Whatever the case, you shouldn’t worry. There are additional ways of removing the sidebar that involve the use of code. Let us explore them.
An alternative method of removing the sidebar on your website requires inserting a small bit of CSS code inside Appearance > Customize > Additional CSS. Using this method, you will be able to remove the sidebar on your website or on select pages and posts only, depending on what you need.
However, as the CSS code depends greatly on the HTML structure of your pages, it’s impossible to show a code that works for all websites, given the various themes or plugins being used. Therefore, we will cover this method using an example, while explaining all steps thoroughly. Then, using our guide, you will be able to create similar codes, which will be compatible with the HTML structure of your pages or posts.
To remove the sidebar from all pages using CSS, you will need to inspect one of your pages that contains a sidebar using your browser’s inspect element tool. To do so, review one of your pages that contains a sidebar and right-click on the sidebar, preferably near the top. Then, click on the Inspect option from the menu that appears.
This will open the Elements tab of your browser’s developer tools, which shows the HTML structure of your current page. And you will be positioned directly on the element that you right-clicked.
You will need to go up the HTML structure until you find the HTML element that corresponds to the sidebar. As each element will be highlighted on the website as you go up through the HTML structure, you will simply need to find an element that, when hovered over, highlights the entire sidebar section. Therefore, if you click near the beginning of the sidebar section, it will take less time to find the corresponding HTML element. After locating it, you will use that element to create the CSS code in the form given below.
appropriate-css-selector-corresponding-to-the-sidebar-element {
display: none;
}
In our example, the HTML element is the third wrapping div above the title we inspected. This div has three separate classes, one of which is sidebar-related and which we will use as the CSS selector. Meaning, we would need the following code to disable the sidebar section:
.qodef-page-sidebar-section{
display: none;
}
The period is added before the chosen div class to signify that we are using that specific class as the CSS selector.
However, there are two additional issues we need to address. The first is that by simply removing the sidebar, it is most likely that the main content would remain the same and not automatically stretch itself. The second issue concerns the code we mentioned, as it simply might not work if it’s overridden by some other CSS code.
To solve the first problem, you will also need to add the appropriate CSS code that stretches the page content to 100% of its containing HTML element. Therefore, you would need to first figure out what that HTML element is and then add CSS in the form given below.
appropriate-css-selector-corresponding-to-the-page-content-element {
width: 100%;
}
In our case, the corresponding HTML element is a div directly above the first one.
Again, we will use the most suitable class of this element as the CSS selector. So, in our case, the appropriate CSS would be:
.qodef-page-content-section{
width: 100%;
}
Finally, to make sure that neither this nor the previous CSS code is overridden by any other conflicting code, we will add !important to both code lines. This will make our new CSS code of the highest priority. Therefore, using the code given below, we will solve both potential issues.
.qodef-page-sidebar-section{
display: none !important;
}
.qodef-page-content-section{
width: 100% !important;
}
This concludes the explanation on how to make the CSS code that removes the sidebar on your entire site.
As we mentioned before, the exact code will differ on a case-by-case basis, but if you follow our instructions, you will be able to create an appropriate CSS code for your website, as well.
To create a code that removes the sidebar on a single page, you only need to slightly adjust the previously created CSS. More precisely, you will need to adjust both CSS selectors so that they point to a specific page.
page-specific-appropriate-css-selector-corresponding-to-the-sidebar-element {
display: none !important;
}
page-specific-appropriate-css-selector-corresponding-to-the-page-content-element {
width: 100% !important;
}
The easiest way of doing so is going up through the HTML structure of the page until you find the body tag. Then, within the classes that the body tag has, you will need to find and use one that identifies the current page by using its ID. That class would be page-id- followed by the number that represents the ID of the current page.
In our case, the following CSS will remove the sidebar only on the page which has 4972 as its ID.
.page-id-4972 .qodef-page-sidebar-section{
display: none !important;
}
.page-id-4972 .qodef-page-content-section{
width: 100% !important;
}
To remove the sidebar on a single post, you will need to do a very similar thing. However, in this case, the appropriate class of the body tag will be postid- followed by the number that represents the ID of the current post.
So, the following CSS will remove the sidebar only on the post which has 3661 as its ID.
.postid-3661 .qodef-page-sidebar-section{
display: none !important;
}
.postid-3661 .qodef-page-content-section{
width: 100% !important;
}
The last method for removing the sidebar in WordPress that we will discuss in this article is creating custom templates. These templates would simply omit the code responsible for the sidebar creation.
This method is the most difficult of all those mentioned in this article, and it is only advised for the more WordPress-savvy users as it requires custom coding. However, the advantage of using it is that you can tailor the template you create to match your needs precisely. For this method, we advise using a child theme. Also, as with any method that includes adding custom code, we advise making a backup of your website before you proceed.
Additionally, in the past, some have advised directly editing the template files of your parent theme to remove the part that creates the sidebar. However, we don’t suggest doing this as it is not safe from being overrun by theme updates and it can lead to errors if done incorrectly. Instead, the method that we will discuss includes creating a separate template file with the appropriate code. Then you can upload that file to the directory of your child theme on the server using FTP. The result will be somewhat similar to the plugin we used—you will be able to remove the sidebar on individual pages or posts by manually selecting the custom template you previously created.
When creating a new template, you need to know that it has two distinct sections. One is the template header, which is used to register the template. The other is the code responsible for displaying the content of the page or post.
The template header is a simple comment that specifies the template name, but it can also contain additional information. The template header starts with the label Template Name: followed by the name of the template. The name you use in the template header is the same one that will display in the Page Attributes dropdown menu on the page. For example, if you were to start your template file with this header
<?php /* Template Name: Test Template */ ?>
you will be able to choose the Test Template from the Page Attributes. That is, of course, after creating the file and uploading it to your child theme’s directory.
As for the main part of this file—the code that creates the page content—the easiest way of making it is by copying an existing template file and then editing it to remove the part that adds the sidebar. You can also opt to create the code yourself if you are confident in your programming skills.
If you choose to copy and edit the file as suggested, you should look for the page.php file. It is found in the directory of your parent theme. After copying the content of that file into a new file, look for the code that adds the sidebar section and remove it from the new file. The code that you will need to remove is the get_sidebar() function that loads the sidebar template. You will be looking for code matching one of two cases shown below.
<?php get_sidebar(); ?>
or
<?php get_sidebar('sidebar-name'); ?>
You need to remove whichever one of them you find to make sure the sidebar won’t display on your page. The only difference is that the first specifies the regular sidebar while the second displays a specialized sidebar if you have one.
You can create custom post templates that would appear as the option in Post Attributes in a similar manner. By default, templates are created for pages, so you will need to edit the template header slightly to make it clear that the file is a post template. We will include an example to further clarify this.
<?php /* Template Name: Name of your Custom template Template Post Type: post */ // Code goes here...
You can create new templates for any registered custom post type within your theme by following the structure given above. You only need to replace the post with the slug of the custom post type for which you wish to create the template. With that being said, to make the main part of the template, you can either create your own code or add an edited version from an existing template file.
If you choose to model your code on an existing file, you will need to look for the single.php file, also located in the directory of your parent theme. Copy the code into your new file and remove the part of the code that adds the sidebar. You will need to remove the same code we mentioned previously, i.e. the two possible instances of the get_sidebar() function.
After editing your new file so that it doesn’t show the sidebar, save it as a .php file and upload it to the directory of your child theme via FTP. We advise naming the file so that its purpose is clear (e.g. same as the template name).
Once you’ve removed the sidebar using this method, you will likely need to make some additional adjustments to the page or post stylization. As the CSS necessary to stylize a custom template is highly individual, we can only share a small piece of advice to help you. This advice is applicable in cases where you copied the code from an existing file while removing the sidebar-related part.
It is most likely that you will have a blank space where your sidebar previously was, but the main content of the page or post won’t stretch to fill that space. To solve this issue, you will need to find the appropriate HTML element that wraps the main content of your page or post and set its width to 100%. Since we have already discussed this concept in the section on the CSS methods of removing the sidebar, we advise reviewing it once more to finalize the stylization of your custom template.
Final Thoughts
The two major reasons that lead WordPress users to remove their sidebars are issues with sidebar display on mobile devices as well as a sense of a visual overload that the sidebars can cause. Whether it was one of these or something else that drove you to explore removing the sidebar, you can still find a solution among the approaches we presented.
In this article, we have shown you how to remove the sidebar in WordPress using four different methods: with theme options, plugins, CSS code, and custom-made templates. Even though these methods vary in difficulty quite a bit, we are sure that one of them will fit your needs and current WordPress knowledge, and help you remove the sidebar without hardship.
