How to Create a Full Width Page in WordPress

Uncategorized

Do you want to create a full width page in WordPress? Many WordPress themes already come with a built-in full-width page template that you can use. However some themes do not have that feature. In this article, we will show you how to easily create a full width page in WordPress.

Method 1: Using a Built-in Full Width Template in Your WordPress Theme

This method is recommended if your theme already comes with a full-width page template.
First you need to edit a page or create a new one by visiting Pages » Add New page.

On the page edit screen, select full width as your template under page attributes meta box.

After selecting the full width template, you need to save your page. You can continue editing the page to add more content or click on the preview button to see it in action.

If you don’t have full width template option on your page edit screen, then this means that your theme does not have a full width page template.
Don’t worry, we will show you how to easily create a full-width page without changing your WordPress theme.
Method 2: Create Full-Width Page Template Manually

This method requires you to edit WordPress theme files and have some basic understanding of PHP, CSS, and HTML. If you haven’t done this before, then take a look at our guide on how to copy / paste code in WordPress.
Before proceeding any further, you should create a WordPress backup or at least a backup of your current theme. This will help you easily restore your site if something goes wrong.
First, you need open a plain text editor like Notepad and paste the following code in a blank file:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Now you need to save this file as full-width.php on your computer.
This code simply defines the name of a template file and asks WordPress to fetch header template.
Next, you will need the content part of the code. Connect to your website using an FTP client (or file manager in cPanel) and then go to /wp-content/themes/your-theme-folder/.
Now you need to locate the file called page.php. This is your theme’s default page template file.
Copy everything after the get_header() line and paste it in full-width.php file on your computer.

Now you need to look at the full-width.php file and delete this line of code:
<?php get_sidebar(); ?>
This line simply fetches the sidebar and displays it in your theme. Deleting it will stop your theme from showing the sidebar when using the full-width template.

You may see this line appear more than once in your theme. If your theme has multiple sidebars (footer widget areas are also called sidebars), then you will see each sidebar referenced once in the code. You need to decide which sidebars you want to keep.

If your theme doesn’t display sidebars on pages, then you may not find this code in your file.
Here is how our full-width.php code looks after making the changes. Your code may look slightly different depending 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 we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}

// End of the loop.
endwhile;
?>

</main><!– .site-main –>
</div><!– .content-area –>
<?php get_footer(); ?>

Next, you need to upload the full-width.php file to your theme folder using the 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.
Head over to the WordPress admin area and edit or create a new page.

On the page edit screen, look for page attributes meta box and click on the drop down menu under ‘Template’ option.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Uncategorized
What Exactly is WordPress

Whether it’s visiting us at Speckyboy or other design/development blogs, you’ve undoubtedly run into countless articles about WordPress. There are all sorts of rundowns of terrific plugins, themes or tutorials on how to do just about anything with the popular content management system (CMS). That’s all well and good. Sometimes, …

Uncategorized
How to Find the Best WordPress Theme for Your Business

You’ve probably already heard how WordPress is a very popular platform for bloggers, and chances are, a majority of the blogs you read every day were created with WordPress. While it is the best blogging software available, thanks to some great theme developers, WordPress has now also become arguably the …

Uncategorized
What exactly are wordpress theme frameworks

Much of the impression that customers or users have about a company comes from the official website. Before they start to read the contents, the first thing that their eyes will grace is the overall aesthetics where they can make inferences about trustworthiness, credibility, and whether they like you or …