WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Remove the Sidebar in WordPress

How to Remove the Sidebar in WordPress

Last updated on June 5th, 2017 by Editorial Staff
166 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
How to Remove the Sidebar in WordPress

Do you want to remove the sidebar from your WordPress site? A sidebar is the widget-ready area in your WordPress theme. It often appears at the right or left side or below the content area on every page. In this article, we will show you how to easily remove the sidebar in WordPress.

How to Remove the Sidebar in WordPress

Why Remove the Sidebar in WordPress?

Most free and paid WordPress themes come with multiple sidebars or widget ready areas.

The purpose of sidebars in WordPress is to display items that are not part of the post or page content. Usually these are links to different areas of your website, advertisements, email list signup forms, social media profiles, etc. These items can be easily added to the sidebar of a theme using WordPress widgets.

Sidebar on a WordPress powered website

In most WordPress themes, sidebar appears differently when a user is viewing your site from a mobile device. Due to reduced width of the screen size, sidebars that appear on right or left on the desktop are moved to the bottom on mobile screens.

Sidebars are immensely helpful and can help you grow your business. See these WordPress sidebar tricks for maximum results.

However, some website owners feel that removing sidebar helps improve user experience. If you’re looking to remove the sidebar on your WordPress site, then this tutorial is for you.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Removing Sidebars From Everywhere in WordPress

This method allows you to simply remove sidebars from every page and post on your WordPress site. It requires you to edit WordPress theme files. If you haven’t done this before then see our guide on how to copy and paste code in WordPress.

First you need to connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder.

WordPress themes are made up of different templates, so you will need to edit all the templates where a sidebar is displayed.

For example, in a typical WordPress theme you may need to edit index.php, page.php, single.php, archive.php, home.php and so on.

Open a template file to edit it and then locate the line that looks like this:

<?php get_sidebar(); ?>

If your theme comes with multiple sidebars, then you will see different instances of this code with a sidebar name inside the function. For example:

<?php get_sidebar('footer-widget-area'); ?>

Delete the line that represents the sidebar that you don’t want to display.

Now, save and upload the file back to your website. Repeat the process for all template files responsible for displaying different pages on your website.

Once finished, you can go to your website and see it in action.

You may notice that while sidebars are gone, your content area is still appearing with the same width leaving the sidebar area empty.

Blank sidebar area in a WordPress theme

That’s because your theme has defined the width for the content area. Now that the sidebar is gone, you need to adjust the width of the content area by adding custom CSS to your theme.

First you will need to figure out the CSS class used by your theme to define the width of the content area. You can do that by using the Inspect tool in your browser.

Here is the sample CSS we used on our demo site using Twenty Sixteen theme.

.content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.content-area .site {
margin:0px;
}

Here is how it looked without sidebars:

Sidebars removed from a WordPress theme

Removing Sidebars From Individual Pages in WordPress

It’s possible that you only want to remove the sidebars on certain pages while displaying them on other sections of your website.

For example, a lot of websites display sidebars on their blog page but not on individual blog posts. Some prefer to show sidebars everywhere except static pages.

Let’s take a look at different scenarios and how to remove sidebars from different areas.

Removing Sidebars from a Static Page in WordPress

Many WordPress themes come with ready-to use full width page templates. These templates can be used with any static page in WordPress and do not display sidebars on either side of the content.

You will just need to edit the page where you want to remove the sidebar and then select the full width template under ‘Page Attributes’ meta box.

Full width page template with no sidebars

If you do not see an option to select a template, then this means that your theme does not come with a full-width page template.

In that case, you will need to create a full-width page template manually. Open a plain text editor like Notepad and paste the following code in a blank file:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Now save this file as full-width.php on your desktop.

Connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder. Edit the file called page.php and copy every thing that appears after <?php get_header(); ?> line.

Now paste this code in your full-width.php file. After that you need to locate and delete the line that looks like this:

<?php get_sidebar(); ?>

Save your changes and upload the full-width.php file to your current theme folder.

You can now edit any page on your WordPress site and you will be able to select your full width page template.

For more details, see our guide on how to create a full width page template in WordPress.

Remove Sidebar from Blog Posts Page in WordPress

WordPress allows you to use a static front page and a separate page for your blog posts. Usually, most WordPress themes display sidebars on the blog posts page.

If you don’t want to display sidebars on the blog posts page, then you need to go to Settings » Reading page. Notice the name of the page you are using as your blog posts page.

Find your WordPress blog page

Now go to Pages » All Pages and edit the page used to display your blog posts. Under the page attribute section select a full width template and then save your changes.

Full width page template with no sidebars

If you don’t see a full width template option, then you will have to manually create a full width template. See the previous section in this article for detailed instructions.

Remove Sidebar from a Single Post in WordPress

If you want to remove sidebar from certain single posts, then you can create a custom single post template.

WordPress 4.7 came with built-in support for post templates. You’d need to follow the steps outline in our guide on how to create custom single post templates in WordPress.

In your custom single post template all you need to do is make sure to remove the sidebar part of the code.

We hope this article helped you learn how to easily remove the sidebar in WordPress themes. You may also want to see our step by step guide on how to boost WordPress speed and performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

166 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

14 Comments

Leave a Reply
  1. Gary says:
    Dec 22, 2018 at 3:24 am

    Can the users just switch the toggle on the front-end to show or hide the sidebar themselves?

    Reply
  2. Sergio says:
    Dec 20, 2018 at 11:08 pm

    Thank you!

    Reply
  3. Eray says:
    Sep 12, 2018 at 3:50 am

    Is there a way to disable sidebar on mobile? I have a responsive theme and on mobile it naturally shapes itself. But when I scroll down, I see the sidebar “latest articles” widget there.
    On desktop view,it’s OK, but on mobile it displays other blocks, which are sufficient but then also sidebars. Can I disable it for mobiles? Thank you.

    Reply
  4. Hussain says:
    Aug 13, 2018 at 11:01 am

    Yet Another clear and useful post . thank very much.

    I have two questions:

    1-The theme I am using, namely oceanwp, has the option to remove the sidebar but simply does not work. What is the possible reason?
    1- I managed to remove the sidebar using the index.php file. If there is update for the theme. Is the change reversible?

    Regards

    Reply
  5. Max says:
    Jul 26, 2018 at 10:22 am

    Is there are way to remove sidebar/footer using hooks? E.g. using remove_action();?

    Reply
  6. Steff says:
    Apr 13, 2018 at 12:21 pm

    You’re an absolute legend!

    :)

    Reply
  7. David Riewe says:
    Apr 9, 2018 at 10:23 am

    The custom template does remove the sidebar but is not using the full width.

    Reply
  8. Patricia says:
    Mar 19, 2018 at 11:30 am

    Kindly help me out? I’m trying to remove the sidebar from all pages but the index.php. Following these instructions works beautifully but changing the content-area width to 100% pushes the sidebar to the bottom of the index.php. How do I exclude the index.php from the change of the content-area width?

    Reply
  9. Girik says:
    Feb 20, 2018 at 11:08 pm

    HI Team

    I am looking for a solution to remove the sidebar from home page where the home page is set to latest post. Do you have?

    Reply
  10. Susan Taunton says:
    Dec 6, 2017 at 4:19 pm

    I love your video tutorials – they are always crystal clear and informative. And your topics are so often precisely relevant to my needs. Thank you!!

    VIva la WPBeginner!!!

    Reply
  11. Mateo says:
    Nov 29, 2017 at 10:10 pm

    I have a problem, i want set full width, but when I do it, my home is too in fullwidth (surely because i dont use excerpt, else that i use the_content() for get the content in home page).. how can I do a fullwidth with this problem…

    Reply
  12. Linda says:
    Aug 27, 2017 at 12:01 pm

    Thank you so much for helping me get rid of the right bar. But now I can’t show my blog in full frame. It is namned “home” in the meny, but does´nt exist when I´m scrolling in “sides” like you show here. Can you help me fix it in the code?

    Reply
  13. katma says:
    Aug 2, 2017 at 3:52 pm

    That’s what i am looking for!!!
    But the problem is finding the CSS class.

    I tried with css hero. I could find the css class name but i couldn’t make it with the adding custom CSS function.

    Even i can optimize the with for phone, tablet vertical and horizontal position and pc.

    Reply
  14. Terry says:
    May 17, 2017 at 4:55 pm

    Instead of deleting the code, it is safer and recommended to comment it out.

    Add the following // in front of every instance of the get sidebar call and the sidebars will stop displaying without disrupting the code.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.