Mastering Full Width Pages in WordPress: A Beginner’s Step-by-Step Guide

Are you looking to create a full-width page in WordPress to display your content across the entire screen?

Many WordPress themes include a built-in full-width page template that you can utilize. If your theme lacks this feature, adding one is quite simple.

In this article, we will guide you through the process of creating a full-width page in WordPress and show you how to design fully customized page layouts without any coding.

Here’s a brief overview of the methods covered in this guide:

Method 1: Utilize Your Theme’s Full-Width Template

If your theme includes a full-width page template, it’s advisable to use it. Most quality WordPress themes provide this option.

Even many top free WordPress themes typically offer a full-width template, so you may already have access to one.

To get started, edit an existing page or create a new one by navigating to Pages » Add New in your WordPress dashboard.

In the right-hand ‘Document’ section of the content editor, expand the ‘Page Attributes’ area by clicking the downward arrow next to it. You will then see a dropdown menu labeled ‘Template’.

If your theme includes a full width template, it will appear in this dropdown. It is typically named ‘Full Width Template’.

The available options in this dropdown may vary based on your theme. If your theme does not include a full width page template, don’t worry.

You can easily create one using the methods outlined below.

Method 2: Creating a Full Width Page Template Using a Plugin

This method is straightforward and compatible with all WordPress themes and page builder plugins.

First, install and activate the Fullwidth Templates plugin. If you need assistance, refer to our beginner’s guide on how to install a WordPress plugin.

The Fullwidth Templates plugin will introduce three new options for your page templates:

These options include:

• FW No Sidebar: This option removes the sidebar from your page while keeping all other elements intact.
• FW Fullwidth: This option removes the sidebar, title, and comments, expanding the layout to full width.
• FW Fullwidth No Header Footer This option removes all elements that the Full Width option includes, including the header and footer.

If you plan to use the default WordPress editor, the ‘FW No Sidebar’ option is likely your best choice.

This plugin allows you to create a full width page template, but it offers limited customization options.

To customize your full width template without coding, you’ll need to use a page builder.

Method 3: Create a Full Width Page in WordPress Using a Page Builder Plugin

If your theme lacks a full width template, this is the simplest way to create and customize one.

It provides an easy way to edit your full width page and design various layouts for your website using a drag-and-drop interface.

For this method, you’ll need a WordPress page builder plugin. In this tutorial, we will use Thrive Architect.

Thrive Architect is one of the top drag-and-drop page builder plugins, enabling you to create page layouts effortlessly without coding.

Begin by installing and activating the Thrive Architect plugin. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.

After activating the plugin, you can either edit an existing page or create a new one in WordPress.

Click the ‘Launch Thrive Architect’ button located at the top of your screen.

You will then be prompted to select the type of page you wish to create. You can either create a standard page or choose a pre-designed landing page.

Click on the ‘Pre-built Landing Page’ option to proceed.

This action will take you to Thrive Architect’s Landing Page Library, where you can choose from a variety of pre-made templates to create your full-width page.

Simply click on a template that appeals to you to select it.

If you selected a template from the ‘Smart Landing Page Sets’ section, you can now choose from several pre-designed pages that match that style.

For this tutorial, we will select the ‘Sales Page’ template by clicking on it. After that, click the ‘Apply Template’ button to load the page builder.

Once you are in the Thrive Architect Editor, you can modify any elements such as images, backgrounds, text, and more that you wish to change.

To edit an element on the page, simply click on it. In this instance, we clicked on the background of this page block, which opens up all the customization options in the left-hand menu:

Here, you can toggle the switch to ensure your content spans the entire width of the screen.

In the left-hand menu, you can customize various aspects such as typography, font size, layout, background style, borders, shadows, and much more.

You can add new elements to your layout at any time. Thrive Architect offers a variety of basic and advanced blocks that you can easily drag and drop onto your page.

When you’re done editing, click the arrow (^) button next to the ‘Save Work’ button at the bottom of the screen. Then select the ‘Save and Return to Post Editor’ option.

You can then either save your draft or publish it.

After publishing, you can visit your WordPress blog to view your completed full-width page.

Method 4: Create Fully Custom Full-Width Pages with SeedProd

While Thrive Architect is a great option, you might be seeking a plugin that offers even more powerful customization capabilities for your website pages.

If you want to create a fully custom landing page where you can modify the header, footer, and all other sections, we recommend using SeedProd.

SeedProd is the top landing page plugin for WordPress, featuring an intuitive drag-and-drop page builder interface.

First, you need to install and activate the SeedProd plugin. Once activated, simply navigate to SeedProd » Pages to create a new landing page.

You can choose from over 300 pre-designed templates, many of which feature full-width layouts. Alternatively, you can build a custom full-width landing page from the ground up.

One of the standout features of SeedProd is its speed, along with integrated tools for managing subscribers, email marketing service connections, advanced WooCommerce elements, and more.

For comprehensive guidance, refer to our tutorial on creating a landing page in WordPress.

In addition to the landing page builder, SeedProd provides a full drag-and-drop Theme Builder. This allows you to effortlessly design a custom full-width WordPress theme without any coding.

Simply navigate to SeedProd » Theme Builder to start designing a new WordPress theme. You can select from customizable theme templates or create every aspect of your theme from scratch.

With just a few clicks, you can modify every element of your theme. For instance, you can add a new background image and adjust its position and section width to full screen.

Using the SeedProd Theme Builder, you can personalize every aspect of your WordPress site, including pages, posts, archives, headers, footers, sidebars, WooCommerce pages, and more.

For detailed instructions, check out our tutorial on how to effortlessly create a custom WordPress theme.

Method 5: Manually Create a Full Width Page Template in WordPress

This method should be used as a last resort if the previous methods have not worked for you. It involves editing your WordPress theme files, so a basic understanding of PHP, CSS, and HTML is necessary.

If you’re new to this process, we recommend reviewing our guide on how to copy and paste code in WordPress.

Before proceeding, we strongly advise creating a backup of your WordPress site or at least backing up your current theme. This precaution will allow you to restore your site easily if any issues arise.

Next, open a simple text editor like Notepad and paste the following code into a new file:

<?php
/**
 * Template Name: Full-Width
 */

get_header();
?>

Save this file as full-width.php on your computer. You may need to change the ‘Save as type’ option to ‘All Files’ to prevent it from being saved as a .txt file.

This code simply establishes the name of a template file and instructs WordPress to retrieve the header template.

First, access the content section of your code. Use an FTP client or the file manager in your WordPress hosting cPanel to navigate to /wp-content/themes/your-theme-folder/.

Next, locate the file named page.php. This file serves as the default page template for your theme.

Open this file and copy all the content that appears after the get_header() line, then paste it into the full-width.php file on your computer.

In the full-width.php file, search for and remove this line of code:

<?php get_sidebar(); ?>

This line of code retrieves and displays the sidebar in your theme. Removing it will prevent the sidebar from appearing when using the full-width template.

You might encounter this line multiple times in your theme. If your theme includes several sidebars (footer widget areas are also considered sidebars), each sidebar will be mentioned once in the code. Choose which sidebars you want to retain.

If your theme does not show sidebars on pages, you may not find this code in your file.

Here is the complete code for our full-width.php file after making the necessary changes. Your code may vary slightly based on your theme.

<?php
/**
 * Template Name: Full Width
 */

get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <?php
        // Start the loop.
        while ( have_posts() ) :
            the_post();

            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );

            // If comments are open or there is at least one comment, load the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }

        // End of the loop.
        endwhile;
        ?>

    </main><!-- .site-main -->

    <?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->

<?php get_footer(); ?>

Next, upload the full-width.php file to your theme folder using an FTP client.

You have successfully created and uploaded a custom full-width page template to your theme. The next step is to use this template to create a full-width page.

Go to your WordPress admin area and edit or create a new page using the WordPress block editor.

In the ‘Document’ section on the right side, locate ‘Page Attributes’ and click the downward arrow to expand it if needed. You will find a ‘Template’ dropdown menu where you can choose the ‘Full Width’ template.

Once you have selected the template, publish or update the page.

When you view the page, you will notice that the sidebars have been removed, and your content is displayed in a single column. While it may not be fully wide yet, you are now prepared to style it further.

You will need to use the Inspect tool to identify the CSS classes utilized by your theme to define the content area.

After that, you can modify its width to 100% using CSS. You can add custom CSS by navigating to Appearance » Customize and selecting ‘Additional CSS’ at the bottom of the page.

We implemented the following CSS code on our test site:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

.page-template-full-width .site {
    margin: 0;
}

Here is how it appeared on our demo site using the Twenty Sixteen theme.

For those looking to customize their full width pages manually, the CSS Hero plugin is an excellent choice. It allows you to adjust CSS styles easily using a user-friendly point-and-click editor.

However, for the majority of users, we suggest utilizing your theme’s built-in full width template or opting for a plugin to create one.

We hope this guide has helped you learn how to create a full width page in WordPress effortlessly. You may also want to check out our recommendations for the best WordPress plugins to enhance your website, as well as our comparison of top WordPress LMS plugins for creating and selling courses.

If you enjoyed this article, please consider subscribing to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.