I have never started a WordPress site for a client based on one of the default themes. I just didn't like them as a starting point - that is until the Twenty Seventeen theme arrived.
I really like the full-width image on the home page and the placement of the site title and tag line. I also think the parallax effect on the home page is pretty neat. I even like the half-page layout. It's something different and something that works well with most content. But, there are times when you just want or need to use the full page for your content.
With very little code, you can create a full-page template for the Twenty Seventeen theme. It really only involves some very simple PHP and some CSS. I definitely recommend that you create a child theme for this code. It's the best way to make sure your customizations won't be overwritten when WordPress updates. If you are not sure about creating a child theme, it's very simple, follow the directions
here or do a Google search. There are several good tutorials out there. (Don't want to create a child theme? See the notes in orange).
Step 1 (If you did not create a child theme, skip to Step 2).
After you create your child theme, create the following directory structure, replacing "your_child_theme" with the name of your theme:
wp-content/themes/your_child_theme/template-parts/page/
We will be cloning and customizing two files, one that will be placed in the directory you created above.
Step 2
We'll begin by cloning the
page.php file.
(a) Open the file at
wp-content/themes/twentyseventeen/page.php for editing. At the top of the file, just under the
<?php code starter, add the following:
/**
Template Name: Full Width
**/
(b) Next find the following line of code (originally, it was on line 27 of the file, but you just added the lines above to the top of the file, so move down appropriately):
get_template_part( 'template-parts/page/content', 'page' );
and change it to:
get_template_part( 'template-parts/page/content', 'page-full-width' );
(c) Now, save this file with the name,
page-full-width.php in your child theme directory:
wp-content/themes/your_child_theme/page-full-width.php
If you did not create the child theme, save this file (same file name) to the twentyseventeen theme directory:
wp-content/themes/twentyseventeen/page-full-width.php
Step 3
Now we are going to clone the default content file and customize it with some special CSS class names.
(a) Open this file for editing:
wp-content/themes/twentyseventeen/template-pages/page/content-page.php
(b) Now find the following line of code (around line 16):
<header class="entry-header">
And change it to:
<header class="entry-header-full-width">
(c) Next, find this code (around line 20):
<div class="entry-content">
Change this to:
<div class="entry-content-full-width">
In the next step, we will be writing some CSS that will use these new class names to alter the default layout of pages in the
twentyseventeen theme.
(d) Before moving on, save the above with the name,
content-page-full-width.php in the following directory:
wp-content/themes/your_child_theme/template-parts/page/content-page-full-width.php
If you did not create a child theme, save the file (with the same name) to:
wp-content/themes/twentyseventeen/template-parts/page/content-page-full-width.php
Step 4
In this step we will add the CSS rules to give us the desired full-page effect. Open the
style.css file in your child theme directory.
I add the following lines to the end of the
style.css file and make sure they stay at the bottom. This helps to insure that no other rules will take precedence over this code.
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%;
}
.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 did not create your own child theme, I would recommend that you put the above code in the twentyseventeen default style.css file near similar code. The default style sheet is found at:
wp-content/themes/twentyseventeen/
For the first block of code above, add it at line 3756 - remember to put line breaks above and below it. And for the second block of code, add it at line 3775.
You can, of course, add any other custom styles you would like to the
.entry-header-full-width and
.entry-content-full-width classes.
That's it! Now when you are creating a page, you can choose the "Full Width" template in the Page Attributes section (see image). I hope you find this code helpful.
Note: you can find plugins that will do this for you. But, why bloat your site with all the code associated with a plugin, when you can add the simple code here? I obviously wouldn't. 😎😎
