WordPress default layout suits to many as it has all the components a complete website should have. However many bloggers want to make WordPress posts and pages full width by getting rid of the sidebar.

We will see how to set full width posts and pages in WordPress with absolutely easy methods.

Does your theme supports full width page?

There is still a chance that the option is already in your theme settings but you don’t know about it. Let’s check it out first.

  • From your WordPress dashboard, go to Pages > Add New.
  • Under Page Attributes on the right hand side and in Template drop-down, see if a related option is there to select.

wordpress full width template

If you don’t see Page Attributes column, double check by clicking Screen Options at the top of the page if it is unchecked.

Woopoo's Tip

You are lucky enough if you find the option. Simply use the option and you don’t need to follow rest of the tutorial.

Here is an example of a WordPress website with full width page:

full width page example

If there is no full width option in your theme then you have to do it yourself and this is what we are going to explain in the rest of this tutorial.

To make a WordPress site full width, there are two steps involved.

  • Removing the sidebar
  • Setting the content to use full width using CSS.

As an example for this guide, we are using Twenty Seventeen WordPress theme. The steps involved more or less will be same for other themes. Let’s cover these steps in detail.

Editing sidebar.php

The method below involves working with theme files. Any changes done directly to theme files may get overridden next time you update the theme. It is recommended to work with a child theme or see our tutorial how to install a child theme in WordPress for more details.

To globally set your WordPress site to full width including homepage, blog page and all posts, you can edit your theme’s sidebar.php and comment out all the code in it. It is a standard file which is responsible for displaying sidebar in themes.

  • From your WordPress dashboard, go to Appearance > Editor.
  • You will see a list of files on the right hand side. These are all the files your theme is using. Click sidebar.php to open it in editor.
  • Comment out all the code by writing /** in the beginning and */ in the ending.

wordpress sidebar.php

  • Press Update File to save the changes.

Any code inside comment tags will be disabled and don’t affect website.

Woopoo's Tip

If you have done everything correctly, visit your site front-end and refresh your browser. You have removed the sidebar successfully.

You can also access sidebar.php file from your web hosting CPanel or using your FTP account in WordPress. You will find the file under your home directory (public_html) wp-content > themes > yourtheme directory. In our case it is twentyseventeen directory.

Removing Sidebar Code from WordPress Files

The other method is to manually delete sidebar code from WordPress main files mostly index.php, page.php and single.php. Your theme may have additional files from which the sidebar code needs to be deleted. All these files are located in your themes directory.

  • Open each file and find the code as follows.

<?php get_sidebar(); ?>

  • Either delete the whole line or comment it out as follows.

<?php /*get_sidebar();*/ ?>

  • Repeat it for all the files which have this code in it.

CSS for Full Width Page

As you will remove the sidebar, some themes may detect the change and automatically set the pages to full width otherwise you have to do it yourself.

  • To set page with to 100%, you first need to find the CSS class of your main content.
  • From your Chrome browser, right click anywhere on your content and select Inspect to open Chrome Developer tools.

chrome browser inspect

  • Look for the CSS class of your main content. In our case Twenty Seventeen theme is using a class content-area. Clicking this line will reveal additional information in the panel on the right side.

inspect full width css wordpress

  • By default, the width property was 58% but as we have removed the sidebar, we can set our page width to 100%.

wordpress page width css

  • From your WordPress dashboard, go to Appearance > Customize > Additional CSS

wordpress css

  • Add the CSS code to make your site pages full width.

.has-sidebar:not(.error404) #primary { width: 100% }

if you are facing difficulty in finding CSS class of your main content, We strongly recommend to see our guide how to find CSS code in WordPress.

Plugin for Full Width Page

 

full width heading

If you have spend hours tweaking PHP and CSS files with no results and about to pull your hairs 🙂 then wait… we have an easy solution.

Let’s use a WordPress plugin Fullwidth Templates for Any Theme & Page Builder. with few clicks, the plugin will make your posts and static pages full width like a magic.

wordpress full width plugin

  • The plugin will install three full width templates in your posts and pages section under Page Attributes metabox.

FW FullWidth

This option will simply remove sidebar and page title.

FW FullWidth No Header Footer

As the name suggests, it will not only stretch your post or page to full width but also removes header and footer. This option is ideal for landing pages, discount offers and related stuff.

FW No Sidebar

This option will not touch any of your theme’s other features but sidebar. It will kill the sidebar while keeping the theme design intact.

Additional Readings

Conclusion

We have discussed multiple ways to make your WordPress pages full width. We hope you will be able to set your pages full width by using any of the above methods irrespective of the theme you are using.

If you like this article, help us spreading the word by sharing and don’t forget to follow us on Twitter and Facebook

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This