Create Full Width Page Template for Twenty Seventeen with WordPress Child Theme

In this tutorial, I will use Twenty Seventeen to show you how you can use a WordPress child theme and some code to create a new full width page template to display a static page in full width.

The new standard theme Twenty Seventeen is specially designed for business websites and has static pages in two columns by default. The title of the page is in the left column, the actual content on the right.

In the Customizer, the page layout can also be converted to a single-column layout, whereby the title and content are displayed one below the other. The theme centers the container to a maximum width of 740 pixels.

The narrow content area in both page layouts is used for usability, because short lines are generally easier to grasp and therefore readability is increased. The narrow content area is not absolutely necessary for static pages, which are mainly intended to display media such as images, galleries and videos.

Page with picture gallery in Twenty Seventeen

Let's say, for example, that I want to use a single, static page to display a picture gallery that largely dispenses with text.

With the Twenty Seventeen page layout I get this result:

A large part of the website is reserved for displaying the title, the images in the gallery are displayed correspondingly small.

With an additional full width template for displaying a static page in full width, different layouts can be implemented for static pages and thus more space can be created for the page with image gallery.

Create a full width page template

WordPress themes should never be expanded or adapted directly because all files are replaced during an update and any modifications are lost.

For this reason we are creating a Child Theme for Twenty Seventeen to add the new template. See also my tutorial on creating a child theme .

Then we copy the page.php from the parent theme Twenty Seventeen into our child theme. It serves as a template for our individual page template.

Since we don't want to overwrite the general layout of static pages with page.php , we rename the file to template-full-width.php .

To create the page template, it is sufficient to specify the Template Name parameter as a comment / file header at the beginning of the file:

 <?php /** * Template Name: Full Width * * @package Twenty Seventeen Child */ ?>

I have provided you with the complete code for the file as a Github Gist .

Create a static page with a full width template

Now a new static page can be created or an existing page can be edited and the new template can be selected in the box for page attributes:

WordPress now uses our new template file template-full-width.php instead of page.php to display the static page.

Add styling for full width content area

Changing the layout to display the full-width page takes just a little CSS. It is therefore not necessary to modify the template file itself.

It is important to know that WordPress adds new classes in the body tag for page templates and uses the file name of the page template.

With our page template, we have the .page-template-template-full-width class available, with which we can specifically add CSS code for our template, but do not influence the styling of the other template files.

First we overwrite the maximum width of 740px for single-column static pages of the theme: #content #primary { max-width: 100%; }

The next CSS code resolves the two-column layout with which the title and content are displayed next to one another: #content #primary .entry-header, #content #primary .entry-content { float: none; width: 100%; }

In addition, a little space can be added between title and content if these are now displayed below one another: #content #primary .entry-header { margin-bottom: 4em; }

The complete code for the style.css is also available in the Github Gist .

The result

Our full width template already works and the title and content are now displayed in their full width when the template has been selected.

All other static pages with a standard template continue to use the two-column page layout.