Do you want to get rid of your WordPress site’s sidebar? Your WordPress theme’s sidebar is a widget-ready area.
On every page, it frequently appears on the right or left side.
We’ll show you how to remove the sidebar in WordPress in this article.
Why did WordPress get rid of the sidebar?
Most WordPress themes, both free and paid, include multiple sidebars or widget-ready areas.
In WordPress, sidebars are used to display items that aren’t part of the main content of a post or page. Links to different areas of your website, advertisements, email list signup forms, social media profiles, and any other links you want people to see are usually included.
Using WordPress widgets, these items can be easily added to a theme’s sidebar.
When a user views your site on a mobile device, the sidebar appears differently in most WordPress themes. On mobile screens, sidebars that appear on the right or left on desktop screens are moved to the bottom due to the reduced width of the screen.
For the best results, check out these WordPress sidebar tips. Sidebars are extremely useful and can aid in the growth of your company.
This tutorial is for you if you want to remove the sidebar from your WordPress site. Some website owners, however, believe that removing the sidebar improves the user experience.
Continue reading if you don’t like the video or need more instructions.
Using Your WordPress Theme Settings to Remove Sidebars
You can either remove them from the entire site or from individual posts or pages, depending on your theme. Many of the best WordPress themes include options to disable sidebars.
By editing a single post or page, you can see if your theme has this feature.
Here’s an example of what you’d see if you used the Astra WordPress theme. The option to remove sidebars will be found in the right column.
Some themes allow you to select a single post or page template, which may include a full-width template. The option to choose a template can be found in the right column’s page attributes section.
Some themes even let you choose a sidebar layout from the theme options. These options can be found on the Appearance » Customize page.
Once you’ve found the settings, you’ll be able to see your changes in the live preview right away. The location and appearance of these options may vary depending on your theme.
Before exiting the theme customizer, remember to publish your changes.
If that’s the case, keep reading because we’ll show you how to remove the sidebar in WordPress in other ways. Keep in mind that this feature may not be available in all WordPress themes.
WordPress: Removing Sidebars From Everywhere
It also necessitates the editing of WordPress theme files. See our guide on how to copy and paste code in WordPress if you haven’t done so before. This method allows you to easily remove sidebars from your WordPress site’s pages and posts.
This is why, in order to save your changes, you’ll need to create a child theme. Keep in mind that if you make changes directly to your WordPress theme files, those changes will be lost when you update your theme.
To begin, use an FTP client to connect to your WordPress site, then navigate to the /wp-content/themes/your-current-theme/ folder.
Because WordPress themes are made up of different templates, you’ll need to make changes to all of the templates that have a sidebar. See our WordPress template hierarchy guide for help finding the file.
You may need to edit index.php, page.php, single.php, archive.php, home.php, and other files in a typical WordPress theme, for example.
To edit a template file, first open it and look for a line that looks like this:
If your theme has multiple sidebars, you’ll see different versions of this code inside the function, each with a different sidebar name. Consider the following scenario:
Delete the line representing the sidebar you don’t want to show.
Repeat the procedure for all template files that are responsible for displaying your website’s various pages. Save the file and upload it to your WordPress hosting account.
When you’re done, visit your website to see it in action.
While the sidebars are gone, your content area may appear with the same width as before, leaving the sidebar area empty.
Now that the sidebar is gone, you’ll need to use custom CSS to change the width of the content area. That’s because the content area of your theme is set to a specific width.
To begin, identify the CSS class that your theme uses to define the width of the content area. You can do this by using your browser’s Inspect tool.
Here’s the CSS we used on our demo site, which was built with the Twenty Sixteen theme.
Without the sidebars, it looks like this:
In WordPress, removing sidebars from individual pages is possible.
You might only want to hide the sidebars on certain pages while keeping them visible on other parts of your site.
Many websites, for example, have sidebars on their blog pages but not on individual blog posts. Some people prefer to have sidebars on all pages except static pages.
If you want to make a custom landing page or sales page, we recommend using a WordPress landing page plugin like SeedProd, which allows you to do so without writing any code (via a drag-and-drop interface).
With that in mind, let’s look at a few scenarios and how to remove sidebars from various areas.
Removing Sidebars from a WordPress Static Page
Many WordPress themes include ready-to-use full-width page templates, as we mentioned earlier. These templates work with any WordPress static page and don’t have sidebars on either side of the content.
Simply edit the page you want to remove the sidebar from and then select the full-width template from the ‘Page Attributes’ meta box.
If you don’t see a template selection option, it means your theme doesn’t include a full-width page template.
In that case, you’ll have to manually create a full-width page template. Copy and paste the following code into a blank file in a plain text editor like Notepad:
Save this file to your desktop as full-width.php.
Copy everything that appears after the?php get_header();?> line in the page.php file. Using an FTP client, connect to your WordPress site and navigate to the /wp-content/themes/your-current-theme/ folder.
Now copy and paste the following code into your full-width.php file. After that, look for and delete the line that looks something like this:
Save your changes and place the full-width.php file in the same folder as your current theme.
You can now choose your full-width page template when editing any page on your WordPress site.
See our guide on how to make a full-width page template in WordPress for more information.
In WordPress, remove the sidebar from a single post.
WordPress has built-in support for post templates, just like it does for pages.
You can create a custom single post template if you want to remove the sidebar from specific single posts. Creating a full-width page template is similar.
To begin, open a text editor such as Notepad and create a new template file. Then, in that same file, copy and paste the following code:
This code creates a new Featured Article template that can be used for post, page, and product post types.
You can save this file to your desktop as wpb-single-post.php.
Then, using an FTP client, upload it to your current WordPress theme folder.
You can now edit any individual post on your website, and you’ll notice a new Post Attributes meta box with a template selection option.
You can create custom single post templates in WordPress by following the steps outlined in our guide.
All you have to do in your custom single post template is remove the sidebar portion of the code.
There are some excellent page builders available if you want more control over the layout of your site.
Using a Page Builder Plugin, remove sidebars.
You can use a WordPress page builder plugin like Beaver Builder or Divi if you only want to remove sidebars from a few pages.
These drag-and-drop page builders include ready-to-use templates for creating custom page layouts. You can also start from scratch with a blank template.
For the purposes of this tutorial, we’ll use Beaver Builder, but most page builders work similarly.
The Beaver Builder plugin must first be installed and activated. See our guide on how to install a WordPress plugin for a step-by-step tutorial.
Simply edit the post or page you want to edit after activation, and the Beaver Builder editor will appear.
Beaver Builder comes with a number of templates to choose from. By simply adding modules, rows, and elements to your page, you can create your own layout.
See our Beaver Builder tutorial for more information on how to create custom WordPress layouts.
You might also be interested in reading our step-by-step guide to improving WordPress speed and performance, as well as our comparison of the best email marketing services for increasing traffic and sales. We hope that this article has shown you how to remove the sidebar from your WordPress theme with ease.
Please subscribe to our YouTube Channel for WordPress video tutorials if you enjoyed this article. You can also find us on social media sites such as Twitter and Facebook.
15 Things You Must Do Before Changing WordPress Themes Checklist
Beginner’s Guide to Installing Google Analytics in WordPress
Why is it so important to build an email list today? (6 Reasons)
Step-by-Step Instructions for Starting Your Own Podcast
Editorial Staff Information
WPBeginner’s Editorial Staff is a group of WordPress experts led by Syed Balkhi. Over 1.3 million readers around the world rely on it.
And you gave me the correct answer. You brightened my day! Thank you so much for taking the time to explain everything so thoroughly! I only wanted to get rid of a widget that was visible on one page. For that page, set your template to full with. So admirable that you devote so much time to assisting others.
We’re glad our guide was able to assist you.
I tried it with the Twenty Sixteen theme, but it doesn’t seem to work. Is this normal?
The sidebar may be added in a different location depending on the theme. If you contact the theme’s support, they should be able to tell you where the sidebar code is added.
Your articles are always a lifesaver for me.
I’m glad you found them useful.
Is it possible for users to simply toggle the sidebar on or off on the front end?
Thank you very much!
My theme is responsive, so it automatically adjusts to mobile devices. Thank you very much. On a desktop, it’s fine, but on a mobile device, it shows other blocks, which are fine, but also sidebars. Is it possible to turn it off for mobile devices? Is it possible to disable the sidebar on mobile? However, as I scroll down, I notice the sidebar “latest articles” widget.
Thank you so much. Another well-written and useful article.
I have two inquiries:
What could be the cause? If the theme has been updated. 1-The theme I’m using, oceanwp, has a feature that allows you to remove the sidebar, but it doesn’t work. 1- Using the index.php file, I was able to remove the sidebar. Is the transformation reversible?
Is it possible to remove the sidebar/footer using hooks? Using remove_action(), for example?
You are a living legend!
The sidebar is removed in the custom template, but the full width is not used.
The sidebar is pushed to the bottom of the index.php after changing the content-area width to 100%. How do I make the index.php file immune to the content-area width change? Except for index.php, I’m attempting to remove the sidebar from all pages. Could you please assist me?
I’m looking for a way to remove the sidebar from the home page when it’s set to the most recent post. Have you got any?
Thank you so much!! Your video tutorials are always crystal clear and informative, which I appreciate. And your topics are frequently relevant to my requirements.
WPBeginner is alive and well!!!
I have a problem; I want to set full width, but when I do, my home page becomes fullwidth as well (presumably because I don’t use excerpt; otherwise, I would use the_content() to get the content in the home page). With this problem, how can I do a fullwidth…
Thank you so much for your assistance in removing the right bar. However, I am no longer able to display my blog in its entirety. Can you assist me in resolving the issue in the code? It’s called “home” in the menu, but it doesn’t appear when I scroll through the “sides” like you show here.
That’s exactly what I’m looking for!! The issue is locating the CSS class.
I was able to locate the CSS class name, but I was unable to do so using the adding custom CSS function. I used css hero as a test.
I can also optimize the with for phone, tablet, and computer vertical and horizontal positions.
It is safer and recommended to comment out the code rather than delete it.
The sidebars will stop displaying without disrupting the code if you add the following // in front of every instance of the get sidebar call.