WordPress Full Width Page Template twentysixteen-child


If you’ve read my previous blogs, you’d know I am using a child theme. I noticed that the theme didn’t come with a full width page template, so here are the simple steps to create one within your child theme.

Referencehttps://itsmetommy.com/2015/12/20/wordpress-child-themes/

Step 1

Copy page.php from the twentysixteen folder into your twentysixteen-child theme folder as a new file named page-wide.php.

cp /var/www/itsmetommy.com/public_html/wp-content/themes/twentysixteen/page.php /var/www/itsmetommy.com/public_html/wp-content/themes/twentysixteen-child/page-wide.php

Step 2

Edit page-wide.php within your child theme folder.

Add the following at the top of the page – remove all other lines between /** and */.

/**
Template Name: Wide Template
*/

Delete the following line.

<pre class="wp-block-preformatted"><?php get_sidebar(); ?></pre>

Change the class from content-area to content-area-wide.

<pre class="wp-block-preformatted"><div id="primary" class="content-area-wide"></pre>

and

</div><!-- .content-area-wide -->

Step 3

Add the following to style.css within your child theme folder.

.content-area-wide {
 float: left;
 margin-right: -100%;
 width: 100%;
 }

You will now have the option to choose Wide Template within WordPress Pages.

wordpress-wide-template

17 responses to “WordPress Full Width Page Template twentysixteen-child”

  1. Hi Tommy. This was very timely info for me – thank you. I am confident I have set up the child theme correctly as I have used it to customise the footer by creating a footer.php file. I’m confident I have set up the page-wide.php file correctly as I can see this page template in the drop down template choices in my WordPress Page Edit Attribute area. However I don’t think my coding is correct within the style.css file or the page-wide.php files as the text on my home page where I’m using the wide template is not lining up with the header image, which is what I thought it might do. It’s centered in the middle taking up about 75% of the page (http://yourfinancialfutureisnolaughingmatter.com.au/). Below is the guts of the page-wide.php file. Are you able to see anything in this that catches your eye as being incorrect?

    get_header(); ?>

    This is in the style.css file (originally just put your suggestion in and then added the additional to see if it would help).

    .content-area-wide {
    float: left;
    margin-right: -100%;
    width: 100%;
    }

    .content-area-wide .entry-content {
    margin-right: 0%;
    margin-left: 10%;

    }

  2. thank you for info. I had a bit of trouble at first, but overnight it seems to have worked its wonders. May have had something to do with de-activing a custom css plugin on site or just luck – not sure. Ending up using:
    .content-area-wide {
    margin-right: -100%;
    width: 100%;
    }

    .content-area-wide .entry-content {
    margin-right: 5%;
    margin-left: 5%;

    Before making changes to the margin at 5% and removing the float the margins/width seemed to behave differently depending on full-screen desktop or tablet or smart phone. The code above seemed to give a reasonable mid ground that worked pretty well at most ratios. Thanks very much for blog – appreciated info greatly.