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:
body.page-template-template-full-width #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:
body.page-template-template-full-width #content #primary .entry-header, body.page-template-template-full-width #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:
body.page-template-template-full-width #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.
This method does not seem to have any effect on the start page, even if I select the new full width template for the embedded pages. How can I use the template for the homepage?
Hello Frank,
Yes, that's due to the WordPress template hierarchy. See also the diagram at https://developer.wordpress.org/themes/basics/template-hierarchy/
With TwentySeventeen, static pages are usually displayed with the page.php. With the created page template, a more specific template can be used, the template-fullwidth.php.
The start page is a special case and not a normal, static page. This can also be seen from the fact that this is not created as a page in the backend as usual.
Therefore, the page.php is not used here, but rather the front-page.php in the case of TwentySeventeen. This is different depending on the theme, not all themes have a front-page.php.
The start page of TwentysSeveenten or the front-page.php then displays the last blog posts or the embedded pages depending on the settings in the Customizer. However, separate template files are used for this, which are loaded within the front-page.php.
Page templates are therefore only possible for static pages in the individual view, not for the start page.
To change the start page, the front-page.php can be overwritten with a child theme.
LG,
Brian
Hi brian,
Thanks for the explanation. How can I build the blog posts into a static page? The SiteOrgin widget Post Loop enables me to create a static page.
Is there another way to statically display the blog posts in the full template without a widget?
The WordPress core settings allow this. Under Design> Customizer> Static start page a static page can be selected instead of the last posts.
Then another page can be selected as a contribution page. This then shows the blog instead of the normal content.
For a full-width display of the blog index, however, the home.php must be overwritten with a child theme and the styling for this template must be adapted.
With the core option it is practically impossible to use extra page templates.
Thank you for your explanation. I have to say that I use another theme called Smartline (which was also developed by you).
My train of thought was as follows: I copy the code from Frontpage.php and create a new file called Blog.php. Leave the Slidebar out and enter a new name for the Blog page template in the Blog.php header. Then I create an empty static page with the new page template (Blog.php)
But what do you do if the theme doesn't offer a blog page as a dynamic page for selection in the dashboard?
Hi brian,
thanks for your great tutorial; Exately what I was looking for. Unfortunately he still pulls the sidebar for the full-width-template.php, only that it is now arranged above the content. What would an additional css code be for the full-width template to suppress the display of the sidebar there?
Have the site in maintenance mode; would like to release it if you want to take a look.
Thank you again for your tutorial and the code 🙂
Julia
Hello Julia,
You are welcome!
Are you using TwentySeventeen? The theme basically does not display any widgets on static pages, which is why no widgets should appear with the copy of the page.php.
If the tutorial is used for other themes, the page.php will often also load the sidebar. If the static pages normally display widgets, the integration of the sidebar in the full-width-template.php must be deleted.
The sidebar is normally loaded with the following line of code:
This can be deleted in the full width template.
Best regards,
Brian
Hello Brian,
Does this tutorial only apply to the TwentySeventeen theme or can I also apply this to the TwentySixteen theme?
Hello Steven,
The tutorial refers to TwentySeventeen.
It works exactly the same for TwentySixteen, only different CSS code has to be used to override the standard 2-column layout.
Haven't tried it, but the CSS code might look something like this:
@media screen and (min-width: 56.875em) {
body.page-template-template-full-width #content .content-area {
float: none;
margin: 0;
width: 100%;
}
}
Best regards,
Brian
Thanks for the tip. I'll give it a try.
I followed your instructions, but unfortunately I cannot see the selection "Template" in the page attributes after creating the child theme. What am I doing wrong?
WordPress recognizes the templates by the header, the file header at the beginning of the file and the template name variable must therefore neither be missing nor misspelled.
I can now select the “full width” template (forgot to activate the child template (^^ beginner's error - sorry), but the page is still displayed in two columns ... am I too stupid for the whole thing?
The conversion to the full-width layout is done using the CSS code described in the tutorial.
It is important to use the correct class at the beginning. WordPress adds a new class in the body tag when selecting the page template and uses the template's file name for this.
The class .page-template-template-full-width becomes from template-full-width.php
If the new template file is named differently, the CSS class in the style.css must be adapted accordingly.
I mean, I did everything right, the files are all named the same as in the tutorial, but it doesn't work
Maybe there is just a syntax error in the CSS code. A missing comma or curly bracket can ruin the entire styling.
Hello Brian,
first attempts at walking with WP ...
Full-with at TwentySeventeen would be great.
I followed your instructions "slavishly" - unfortunately no success.
I can select “Full With” as the template in the page editor, but there is no change.
page.php is copied from git and renamed, style.css has been extended to include the git code at the end. No own names or anything like that ...
Any idea?
Difficult to tell from a distance. In the end you shouldn't forget to select the newly created full width template in the page attributes.
Otherwise I would analyze the page with the developer tools from Firefox or Chrome and check whether the CSS code is active.
LG,
Brian
Hello Brian
First of all: Thank you for this great tutorial on layout in WP 2017
Compliment!!
I have a WP 2017 running on the page http://www.fsj.de (beta-beta) - under the standard conditions the content column - i.e. the content in the middle of the page - is too narrow for me. MaW: I would like this (center) content to be wider.
In addition, I would like the right side column to be correspondingly small and oriented to the right edge.
I can't get there with the following code:
edit the following in the “Additional CSS”
.wrap {
max-width: 100%;
}
The right side column is also "enlarged".
What can you do!?
I'm looking forward to a tip. VG Martin
Hello Martin,
Thank you and sorry for the late reply.
Unfortunately, the article is of little help here because it is about a full-width page template.
The width of the content area and the sidebar are defined in the style.css. These can be specifically overwritten with your own CSS. The browser's developer tools can be used to find the required classes. You can also find instructions on this on the Internet.
Many Greetings,
Brian
Hello Brian,
First of all I have to write to you that you give very precise answers and that they are understandable for every reader. Thanks!
Now to my question :
Is it possible that my other pages will have my start page look instead of the narrow cover (with a video of the start page)?
If so, where or how should I do it?
Thank you for your help.
Keep it up….
JM
Hello JM,
Thank you, I'm glad.
Unfortunately, the question has little to do with this post and depends somewhat on the theme used.
I would therefore recommend asking the question in the WordPress.org Support Forum: https://de.wordpress.org/support/
There may be able to help somebody.
Best regards,
Brian
moin - it's a shame that there is no answer to my above question.
If so - then just take my post off your side.
vg
Hello Martin,
Sorry, I usually always reply to every comment.
I probably unlocked several at the same time and then overlooked your comment. Sorry!
Best regards,
Brian
Hello Brian,
Thank you for your contribution, which I also find useful, to make it easier to enter an extensive form on the non-profit website of a doctor, which I am helping a little to set up. He wants to collect and discuss “unexpected treatment successes” on his side. Actually, however, I came across your blog because I was looking for the answer to another question that is also related to this project, namely: In which file (or database table?) Is the assignment of a post to one (or more) categories under WordPress saved? I looked for a wolf, but couldn't find anything about it in Google or various WordPress tutorials. Of course, it doesn't really belong here ...
(By the way - for my own website bibelwelt.de I use the OneTheme theme Leeway ...)
Greetings
Helmut
Hello Helmut,
The posts are saved in the WordPress database in the wp_posts table, the categories and keywords in wp_terms.
Posts and terms are linked in the third table wp_term_relationships.
The additional table wp_term_taxonomy, on the other hand, is more used to define the type of term, ie whether it is a category, keyword or custom taxonomy.
Actually, you should hardly ever access the database directly (but work with the upstream WordPress APIs and functions) and therefore you do not need to know how WordPress stores the data.
Many Greetings,
Brian