How to Remove Sidebar from WordPress Themes

Share on facebook
Share on twitter
Share on email

This guide shows how to remove the sidebar in WordPress built into WP themes. The design and layout are why site owners choose a template. You may appreciate the theme but loath its sidebars or want to limit their use and or position.

Why Remove WordPress Sidebars?

The sidebar has a definite place in website design. It can be fixed, floating, wide, or narrow. Sidebars are invaluable for displaying related content to visitors. WordPress site owners use them for member logins, email newsletter subscriptions, contact us links, and to display ads and widgets. But sidebars can be awkward for people viewing websites on smaller mobile devices.

Sidebars and Smaller Screens

Responsive—mobile-friendly—themes will move left or right sidebars to the bottom of a page. Few mobile users have the patience to scroll endlessly to view content or zoom IN and OUT. And for non-responsive themes, there’s the dreaded horizontal scrollbar to contend with. Few will bother with the horizontal scroll unless the content is vital to their needs.

Some sidebars can be off-putting even on larger screens for certain types of website. What you don’t want is a cluttered area distracting visitors from the main central content. Another option is to choose what sidebars you display on which posts or pages.

You can read more about sidebar display options in our detailed guide here.

3 Ways of Removing the Sidebar in WordPress

You have three options for removing WordPress sidebars from your website or blog.

  1. Remove sidebars from the WP theme settings
  2. Disable post and page sidebars using a plugin
  3. Remove all sidebars (site-wide) in WordPress

Let’s start with your theme settings.

#1 Remove Sidebars Via WP Theme Settings

Lots of today’s WordPress themes allow users to control the sidebars. Some have options to remove them site-wide, from specific pages, posts, or all three. Many also offer sidebar control from the post or page tabs on the right of the edit screens.

Some themes come with full-width templates (no sidebars) for individual static pages and posts. Again, it’s a simple case of selecting the option from a dropdown menu in the editor. If you don’t see sidebar removal options from the edit screens, they may be in the theme customizer.

Hide Sidebars using the Theme Customizer

Log in to your WP admin area.

Go to Appearance => Customize from the Dashboard side menu.

This takes you to the Active Theme customizer.

There’s a menu of customization options on the left and a live preview screen on the right. The options available vary from theme to theme, but it’s easy to find everything. The live preview pane lets you see the results without having to save the custom settings.

If you can remove sidebars from your customizer, remember to click Publish before you exit.

Here’s a screenshot of a typical WordPress theme customizer.

Your theme may not support sidebar removal from its customizer. However, it may have the options to remove sidebars from within the post or page edit screens (see next).

How to Remove Sidebars from Individual Pages

Go to Pages => All Pages.

Click the Edit link for any page to open it in the editor.

Navigate to Page Attributes from the Page tab (right-side column).

In this example, we have a template dropdown menu with a full-width (no sidebar) option. If you don’t see it, your theme doesn’t offer this feature from the edit screen. If it is there, click it in the dropdown menu to select it.

Remember to click Update or Publish on the top right of the edit screen to save the changes.

If your theme doesn’t offer a full width template, you can make one (see next).

How to create a full width template

Open Notepad or another plain text editor.

Copy & paste the code below into the empty file.

<?php

/*

*

Template Name: Full-Width

*/

get_header(); ?>

Here’s how it looks.

Now click File and select Save As from the dropdown menu.

Tip: Saving the file to your Desktop is quick to access when we come back to upload it.

Type full-width.php into the File name: field.

Select All Files from the Save as type: dropdown.

Click the Save button.

Keep this file open as we’re coming back to it shortly.

We now need to copy some additional code to put in the new full-width.php file.

Log in to your web hosting cPanel account.

Read the short cPanel beginners guide first if you’re unfamiliar with the control panel.

Click the File Manager icon from the FILES section.

File Manager opens in a new tab.

You need to open the theme folder from the Directory Listing column (left).

Click the + symbol next to public_html and navigate to the wp_content folder.

Click the + symbol next to wp_content and select the themes folder.

The contents of your WordPress themes folder open in the File Listing section (right side).

Double click the active theme folder to open it. In this case, it’s twentytwentyone.

Next, right-click the page.php file and select Edit from the pop-up window.

The file editing screen opens in a new tab.

Copy all the code in that file below the first line: <?php get_header(); ?> 

Click the Close button to exit the file edit screen.

Now toggle back to your full-width.php file.

If you closed the full-width.php file, double-click to open it and select Notepad. If you don’t see Notepad, click More Apps to reveal it.

Untick (uncheck) the ‘Always use this app to … box.

Click OK to open the file in Notepad.

Now paste the copied code into your new full-width.php file.

Find and delete any line of code that looks like this: <?php get_sidebar(); ?>

Click X on the top right to close the file and click Save when prompted.

We now need to upload the new full-width.php to your active theme folder.

Return to the open theme folder in File Manager.

Click the Upload link from the top menu bar.

The File Upload screen opens in a new tab.

Click Select File to get the full-width.php file and upload it to the theme folder.

A green status bar lets you know once the upload is complete.

Close the File Upload tab.

Click the Reload link in the File Manager toolbar.

The new full-width.php file comes into view in the active theme folder.

You can now select the full-width page template for any page within the active theme.

Return to your WordPress admin area.

Go to Pages => All Pages and click the Edit link to open any page.

From the editor’s page tab (right side), scroll down to Page Attributes.

Click to open the dropdown list under Templates.

You can now see the Full-Width template available for individual pages.

Remove the sidebar from an individual WP post

Go to Posts => All Posts from the Dashboard side menu.

Click the Edit link to open any post.

Look for Sidebar settings in the editor’s Post tab (right-side column)

In this example, there’s a sidebar section with a ‘No Sidebar’ option in its dropdown menu.

Click No Sidebar to select it.

Click Update or Publish on the top right of the edit screen to save the changes.

If you don’t see any sidebar options, the theme doesn’t offer them from the edit screen. The solution is to create a custom template for single posts.

How to create a custom template for a single post

WordPress supports post templates as well as page templates. Creating a custom single post template is similar to that of a full width page template

Please refer to “How to create a full width template” above if you need File Manager illustrations.

First, we need to make the PHP file.

Open Notepad or any other plain text editor.

Copy & paste the code below into the empty file.

<?php

/*

 * Template Name: No Sidebar

 * Template Post Type: post, page, product

 */

   get_header();  ?>

This code defines a new single post template named No Sidebar, but you can call it anything. The template is available for posts, pages, and product post types.

Here’s how the new file looks.

Now click File and select Save As from the dropdown menu.

Tip: Saving the file to your Desktop is quick to access when we come back to upload it.

Type single-post.php into the File name: field.

Select All Files from the Save as type: dropdown.

Click the Save button.

Keep this file open as we’re coming back to it shortly.

We now need to copy some additional code to put in the new single-post.php file. This code comes from the active theme’s single.php file.

Log in to your website’s cPanel account.

Read the short cPanel beginners guide first if you’re unfamiliar with this control panel.

Click the File Manager icon from the FILES section.

File Manager opens in a new browser tab.

You now need to open the theme folder from the Directory Listing column (left).

Click the + symbol next to public_html and navigate to wp_content.

Click the + symbol next to wp_content and select the themes folder.

The contents of your WordPress themes folder open in the File Listing section (right side).

Double click the active theme folder to open it. In this case, it’s twentytwentyone.

Right-click the single.php file and select Edit from the popup window.

The file edit screen opens in a new tab.

Copy all the code in that file under the first line: <?php get_header(); ?> 

Click the Close button to exit the file edit screen.

Now toggle back to your single-post.php file.

If you closed the single-post.php file, double-click to open it and select Notepad. If Notepad isn’t visible, click More Apps. Untick (uncheck) the ‘Always use this app to … box.

Click OK to open the file in Notepad.

Paste the copied code into your new single-post.php file.

Now find and delete the following line of code: <?php get_sidebar(); ?>

Click X on the top right to close the file and click Save when prompted.

We now need to upload the new single-post.php to your active theme folder.

Return to the open theme folder in File Manager.

Click the Upload link from the top menu bar.

The File Upload screen opens in a new tab.

Click Select File to upload the single-post.php file to the active theme folder.

A green status bar lets you know once the upload is complete.

Close the File Upload tab.

Click the Reload link in the File Manager toolbar.

The new single-post.php file comes into view in the active theme folder.

Return to your WordPress admin area and open any post.

Go to the Post tab (right side) and scroll down to the Post Attributes section.

Click the dropdown list to select the new No Sidebar template.

#2 Disable Post and Page Sidebars with a Plugin

The Fullwidth Templates plugin does what it says on the box. It works with the most popular page builders like Divi, Beaver Builder, and WP themes. However, it may not work with older templates and some custom themes. Check for compatibility before installing it. The plugin is ideal for WP themes that don’t support sidebar removal from individual posts or pages.

Fullwidth Templates completely removes the sidebar and other page elements:

  1. Blank template: removes sidebars, headers, footers, comments, and titles
  2. Full-width template: removes sidebar(s) title, comments and stretches the page layout
  3. No sidebar template: removes only sidebars

Install and Activate the Fullwidth Templates plugin by Brainstorm Force.

Go to Posts => All Posts from the Dashboard side menu.

Open any post by clicking its Edit link.

Go to the Post tab on the right side of the edit screen.

Scroll down to Post Attributes and click the templates dropdown to open its menu.

You can now remove all sidebars from that post.

The same options are also available for any WordPress page.

Go to Pages => All Pages from the Dashboard side menu.

Open any page by clicking its Edit link.

Go to the Page tab on the right side of the edit screen.

Scroll down to Page Attributes and click the templates dropdown to open its menu.

You can now remove all sidebars from that page.

Many site owners now use page building platforms to replace the default WordPress Editors. The Fullwidth Templates plugin works with most of them. But page builders like Divi and Beaver Builder also let you add and remove sidebars using simple drag and drop actions.

#3 Remove all Sidebars (Site-wide) in WordPress

PLEASE BACKUP YOUR SITE AND DATABASE BEFORE CONTINUING.

The steps to remove sidebars from an entire site are easy to follow. However, it’s quite an advanced procedure, so you should be familiar with File Manager or FTP. You should also be comfortable copying and deleting code from template files and know something about CSS.

This method is the one to choose if you want to permanently get rid of all sidebars site-wide. That includes pages as well as posts.

Reasons to use a child theme

Changing theme files applies to the active template. The problem is that whenever you update the theme, you lose those changes. That’s why it’s better to create a child theme and use that instead, as updates don’t affect it.

Setting up the child theme

The best way to approach this is to access your WP folders and files via FTP or File Manager. If you have a standalone FTP client—and know how to use it—use that. Every live WordPress.org website has a cPanel with File Manager, so that’s what we use in this guide.

Log in to the cPanel account for your WordPress website.

Click File Manager from the FILES box.

File Manager opens in a new browser tab with the Directory Listings column on the left.

  1. Navigate to public_html/wp_content/themes

Your theme folder(s) loads in the file listing section (right side). In this case, the active theme is Twenty Twenty-One (twentytwentyone).

Your child theme needs a separate folder to hold copies of the parent theme files. Ideally, you want to keep the same name as the theme folder but with ‘child’ at the end. For this example, that would be twentytwentyone-child.

Click the Folder link on the top toolbar.

Enter twentytwentyone-child into the New Folder Name: field

Remember to replace twentytwentyone with the name of your theme.

Click Create New Folder.

Your new child theme folder is now in the WP themes directory below the parent.

The next step is to add two essential files to the new child directory.

Double-click the new child folder to open it.

Now click the File link from the top menu bar.

Type style.css into the New File Name: field

Click Create New File.

Right-click the new style.css file and select Edit from the pop-up menu.

The style.css file opens in a new browser tab.

  1. Copy & paste the code below into the new CSS file.

Change the yellow highlighted values to reflect your site.

/*

Theme Name: Twenty Twenty-One Child

Theme URL: http://yoursite.com

Description: Twenty Twenty-One Child

Theme Author: Your Name

Author URL: http://yoursite.com

Template: twentytwentyone

Version: 1.0.0

Text Domain: twentytwentyone-child

*/

2. Click Save Changes once you’ve modified the code above

3. Click Close to exit the File Edit tab.

The second file we need to create is a functions.php file.

Click the File link from the File Manager’s top menu bar.

Type functions.php into the New File Name: field

Click Create New File.

Right-click the new functions.php file and select Edit from the pop-up menu.

The functions.php file opens in a new browser tab.

  1. Copy and paste the code below to the new functions.php file

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

   wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

}

?>

2. Click Save Changes, then Close to exit the File Edit tab.

That’s your child theme set up and ready to use. However, as it is now, the site will be identical to the parent theme, and we want to remove the sidebars.

For any parent theme template that adds a sidebar, we need to create a child template that will overwrite it. 

If you want to remove the sidebar sitewide, that is easier and that is what we’ll do here.

You need to identify every template in your parent theme that calls for a sidebar in its code.  This is dependent on the theme you are using, but for now, let’s concentrate on five:

  • php
  • php
  • php
  • php
  • php

Copy (not move or cut) each of these files from the parent folder, and paste them into the child theme folder.  To do that, open the parent theme folder and hold down the CTRL key.

With your finger on the CTRL key, left-click to select your template files.

Right-click over any one of the selected files and choose Copy from the pop-up.

Navigate to the child theme folder and paste these five files.

There are now copies of these template files in the new child theme folder.

You now need to edit all five template files in the child folder.

Right-click a file and select Edit from its pop-up menu.

The file opens in a new tab.

Search the file for get_sidebar.

Delete any line with <?php get_sidebar(); ?>.

Some variations may have code inside the brackets (‘sidebar-name’). Delete anything you find.

Click Save and Close the editor.

Repeat the process until you’ve deleted all reference to sidebars in all the template files.   

CSS tweaks

When you remove sidebars from template files, the space they occupied in the site design remains, restricting other content from filling it. The way to remove the blanks space is to extend the content area using custom CSS. First, you need to know the CSS class that defines the active theme’s content area width. The quickest way to find the code is to use the Inspect tool in your web browser.

Create CSS to extend the content width to fill the area previously occupied by the sidebar.

You can then add this custom CSS code from your Dashboard under Appearance => Customize => Additional CSS.

And that’s how you take complete control of your sidebars in WordPress.

Share on facebook
Share on twitter
Share on email

Subscribe to my newsletter

Subscribers to my newsletter get all the latest news, reviews, advice and gossip in the world of search engines, internet marketing, self-publishing, and North Wales (where I live). You can sign up for my free newsletter by clicking this link.

My Books

I have a range of webmaster related books for sale on Amazon in both Kindle and Paperback formats. WordPress, SEO & Self-Publishing.
On Amazon

My Online Courses

My courses cover a range of webmaster related skills, from learning WordPress itself, to installing an SSL certificate on your site.
On Udemy

Comments

Hello, I'm
Andy Williams!

You can get up to 90% off my Online Courses for webmasters, marketers & affiliates (plus a free course on Gutenberg).

Get my newsletter
delivered to your inbox

18748

We respect your privacy

18749