Learning to create full width page template in WordPress - KrishaWeb Technologies

CREATE COMMUNICATE CONNECT

Awesome Experiences Brand Stories Your Customers

Tuesday, Jun 06, 2017 / WordPress / KrishaWeb

Learning to create full width page template in WordPress

Using a built-in full width template in your WordPress theme

If your theme already comes with a full width page template then this process can come handy. Keep in mind that if your theme doesn’t come with a full width page template then this process can’t be used. Firstly, you need to edit a page or create a new one by clicking the Pages tab and then selecting option of Add New page.

On the page edit screen, you can select full width as your template that you will find under the pages attributes Meta box. Once you get that done, you will have to save your page. Continue to edit the page if you need to add more content and click on the preview button to see progress further.

If you cannot find a full width template option on your page edit screen then the theme you are using does not have a full width page template. In that case, go through the steps to see how you can create a full width page without changing your WordPress theme.

Create full-width page template manually

If you wish to create a WordPress Full Width page template manually then you will need to have basic understanding of PHP, CSS and HTML. You should read the how to copy and paste code in WordPress before proceeding. Before you, start dropping codes on the WordPress theme you need to ensure that you have a backup go your current theme. This is needed in case of a crash. You will be able to recover the theme from the saved point if you save it.

Open a plain text editor like Notepad and paste the following code in a blank document:


<?php

/*

*

* Template Name: Full-Width

*/

get_header(); ?>

After that you will have to save the file with the name full-width.php  in your computer. This code simply defines the name of a template file and makes WordPress to fetch the header template. After that you will need the content part of the code and for that you will need to connect to your website using the FTP client and then go to /wp-content/themes/your-active-theme-folder/.

After that locate the file named page.php that is your theme’s default page template file. Copy whatever you get after the header code and paste it in the full-width.php file on your computer. Once that is done delete the <?php get_sidebar(); ?>  line of code if it exists. This line fetches the sidebar and displays it in your theme. Once it is deleted, it will stop your theme from showing the sidebar when using the full-length width template. If the theme doesn’t display sidebars on pages then you may not find the code in your template file.

The full code will look something like this once all the steps have been completed:


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

          the_title( '<h1 class="entry-title">', '</h1>' );

            <div class="entry-content">

                        <?php the_content(); ?>

            </div>



            // 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 the theme folder. Now create a full width page using this full width template. Search for the page edit screen on the WordPress admin area and click on the drop down menu under the ‘template’ option. You will be able to see your full width template here. Save it and update the page. Visit your WordPress site now and you will find that the sidebars are gone. Your page displays as a single column. Use the Inspect tool to find out the CSS classes used by your theme and define the content area. Adjust the width to 100% using CSS and you have a Full Width Page in WordPress manually.

Create a full width page using page builder plugin

The easiest and most recommended method you can easily edit your fullwidth page and create different page layouts. Download the WordPress page builder plugin. Different themes are available; however, one of the best is the Beaver Builder plugin.

After activating the plugin on the page edit screen under the page attributes section you will find the fullwidth template option. After selecting the page template click the Save button and your page will be saved. Now go ahead and click on the page builder tab above the page editor. A page launch interface will show up that will allow you to see a live preview of your page with various page builder options.

Easy 3 Click Solution To Get Any WordPress Page Builder To Work With Any Well Coded WordPress Theme

Start by clicking on the templates button on the top. The plugins will offer you with a variety of different templates to choose. Click on the layouts option and you can include rows and modules. If you want a brand new template, you can build one after selecting the blank template option. Open the item details pop up and edit the various settings including the colors, fonts, background photos etc.

Add modules and widgets to your website if you want. Once you are done you can go forward and click on the dine button at the top. Select the save or publish option and you can now visit your page to see it in action.

Though many people think that creating full width pages in WordPress is tough it actually isn’t if you know how to go about it. With the three methods shown here you will be able to set up and launch your very own WordPress full width page in a few minutes.

divider
author
by KrishaWeb
under WordPress
Download this free ebook of

A Detailed Explanation Of The WordPress Platform

DOWNLOAD THIS FREE EBOOK OF

Website UI/UX guide for 2017

line

You have a visionWe know the way to get you there.