Every year the WordPress Foundation releases a new default theme for WordPress, the massively popular content management system they develop. This upcoming years theme, Twenty Seventeen, was released some time ago.

In this tutorial, we'll quickly teach you how to create a Full Width page template within this theme.

Assuming you have a fresh installed version of the theme, follow these instructions. It is a prerequisite to understand the fundamentals of the WordPress theme hierarchy.

You will be editing one file:

  • wp-content/themes/twentyseventeen/style.css

You will be creating two files:

  • wp-content/themes/twentyseventeen/page-full-width.php
  • wp-content/themes/twentyseventeen/template-parts/page/content-page-full-width.php

First things first, instead of creating the files from scratch, it is easier to just clone the files. Copy the page.php template file, paste it and rename it to page-full-width.php

In your newly cloned/created page-full-width.php file:

Add the following to the top:

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


Next:

Change line 27 from:

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

To:

get_template_part( 'template-parts/page/content', 'page-full-width' );

Now the get_template_part() function will use the page-full-width template section instead of the page template section.

In the above step, you defined the Template Name so that you can use it globally on any page you want.

Side-Note: Since we prefixed the file name with page-, if you create a page in WP called 'Full Width', it will automatically inherit this template. Replace the - with _ if you don't want this to happen.

 

 

Now lets head onto the next step!

In wp-content/themes/twentyseventeen/template-parts/page/, clone content-page.php and rename it to content-page-full-width.php

In your newly cloned/created content-page-full-width.php file:

Change line 16 from:

<header class="entry-header">

To:

<header class="entry-header-full-width">

Change line 20 from:

<div class="entry-content">

To:

<div class="entry-content-full-width">

What you did above was change the class names for the Page Heading and Content Section.

Next you'll want to add these new classes to the style.css file so that your browser can render them correctly.

In the style.css file:

At line number 3756, hit enter twice to create spacing.

After adding spacing, add the following to line number 3757

body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column:not(.archive) #primary .entry-header-full-width,
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
display: block;
width: 100%;
}


At line number 3775, hit enter twice to create spacing.

After adding spacing, add the following to line number 3776

.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content-full-width,
body.page-two-column #comments {
display: block;
width: 100%;
}


If you are familiar with Cascading Stylesheets, you can further style these accordingly. This was just a quick jumpstart to getting a full-width page template working for the WordPress Twenty Seventeen Theme.

Code Snippet By

Mike Biegalski


Biegalski LLC

Bio

A professional full stack developer, having experience in all aspects of the development cycle. Actively diving into new technology just to experience the workflow and see how it functions.

Submit An Article

We are open to accepting articles written by members of the community. If you have a quality article that you would like featured please, submit the article here.