Full Width Wordpress Theme

Posted onby admin

Full Width Template. Removes Sidebar, page title, comments and stretches the layout to full width; Ideal if you’re using a Page Builder; Bonus – No Sidebar Template. Just Removes Sidebar; Perfect if your theme does not have No Sidebar option. Rest of the layout &. Astra is a stylish WordPress theme with Gutenberg editor support. It comes with beautiful. TheFox is a responsive WordPress Theme, that means that it will always looks good even if you are viewing it from a Smartphone or Tablet Retina Ready TheFox is retina ready, it means that it will always look beautiful no matter the display your user is on.

Make Wordpress Theme Full Width

Wordpress
  1. Full Width Template. Removes Sidebar, page title, comments and stretches the layout to full width; Ideal if you’re using a Page Builder; Bonus – No Sidebar Template. Just Removes Sidebar; Perfect if your theme does not have No Sidebar option. Rest of the layout & styling will remain intact. Made to work with Page Builders.
  2. Flash is free responsive multipurpose WordPress theme – truly a versatile theme perfect for any type of website you want. Like never before, it provides multiple pre-built demos which can be imported in seconds using ThemeGrill Demo Importer Plugin. The theme fully integrates with Flash Toolkit and SiteOrigin’s Page Builder Plugin that makes theme more user-friendly and easy.

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.

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

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:

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.
  • Press Update File to save the changes.

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

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

Create Custom Wordpress Theme

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.

Wordpress Themes Full Width

  • 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.

Simple One Page Wordpress Theme

  • 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.
  • By default, the width property was 58% but as we have removed the sidebar, we can set our page width to 100%.
  • From your WordPress dashboard, go to Appearance > Customize > Additional 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

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.

  • Install and activate Fullwidth Templates for Any Theme & Page Builder. See our tutorial how to install a plugin if you need help.
  • 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.

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

Amplitude is a clean, creative and truly stunning full width WordPress theme that is specially designed to create full screen websites. This theme is a reliable platform for building a visually stimulating and delightful websites across a wide range of businesses. It equally functional as a portfolio theme that helps to improve your full-screen business website.

This professionally designed theme is perfect fit for personal photography, blog, portfolio, business, landing pages, digital and marketing agency, creative agency or any other projects. It can also be used for any projects from a simple blog to complex website. Amplitude is an incredible theme that offers to improve your full width website. This responsive and fully functional theme includes various features and options that you can to create an elegant website for your business brand.

If you are non-programmer, then developing a full screen website from scratch is a very tedious task. But with this full width WordPress theme, you will be able to easily create a website as per your requirements. Thankfully, Amplitude has a beautifully designed full screen homepage layout with image slider. You don’t need to hire a web developer or you don’t need any advanced coding knowledge. You can easily create your fully-functional page in a matter of minutes without touching the code.

It comes with incredible full-screen slider to showcase your beautiful photography or artwork images with overlying captions. This full width WordPress theme has rich set of customization options and bundle of features. It includes 600+ Google fonts, unlimited color options, 30+ shortcodes, clients portfolios, photo gallery, clients testimonials, team members, footer layouts, contact information, social media settings, contact form with Google map, full eCommerce section, etc. You can take your website to the next level with these amazing and advanced theme features.

With this theme, it is very easy to modify your text content, images or site colors. You can set background images for your page, enhancing the overall presentation of your site. In addition, an in-built photo gallery added for professional photographers to display their attractive images. Even the contact page of the site looks amazing, with a contact form, contact information, social media links and embedded Google map.

This full width WordPress theme is clean coded, well-structured and developed as per the coding standards of WordPress Codex, made it entirely light weighted and fast loading. This theme is fully responsive and Retina-ready. You can now showcase your page content on different screen resolution and display devices such as smartphones, tablets, or desktop computers. Moreover, this product is completely cross-browser compatible. The theme is created with SEO practices and made it compatible with popular SEO plugins like Yoast SEO and All in One SEO Pack.

Amplitude is compatible with one of the most popular WordPress plugins: WooCommerce. It allows you to opening an online shop that can increase your profit margin and attract many customers. If you need any information about site customization and WooCommerce settings, you can always access the theme documentation. Moreover, XML file of demo data is available as well, offering to import the demo content and speed up the website setup process. In addition, you can contact the amazing support team for theme installation, setup and customization issues.

Features of Amplitude WordPress Theme

  • Modern portfolio theme suitable for creative professionals and photographers
  • Perfect for showcasing imagery and creative work
  • Powerful Theme Options Framework to customize backgrounds, color, fonts, logos and much more
  • Custom post types for portfolio, gallery, testimonials, team members, and others
  • You can use custom widgets in footer and sidebar of page, posts
  • Different page templates available to take the advantage of maximum amount of screen space
  • Blog templates is also comes with this theme to provide a smart and elegant display for your blog posts
  • Contact page templates is available to display contact form with location
  • Built-in image slider with slider controls and transition options
  • Integrated with 600+ Google Fonts, with color scheme and advanced typography options
  • Compatible with drag-and-drop page builder plugin to help you create the perfect site
  • The theme multilingual and translation ready which help you to develop your site in many languages
  • Completely responsive design that can be viewed on any device
  • Optimized for SEO to easily visible your website content for search engines
  • Standard shortcodes for tabs, contact forms, team member, testimonial, portfolio and lightbox gallery