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.
Reference: https://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.
17 responses to “WordPress Full Width Page Template twentysixteen-child”
Thanks. I needed to add this to style.css as well:
.content-area-wide .entry-content {
margin-right: 0%;
margin-left: 10%;
}
I didn’t need to add this code to my style.css, but thank for pointing out how to edit the entry-content area for those that do.
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%;
}
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.
Glad it worked out. Have a good one.
Where do I past step 3 in the style.css file?
You need to create a style.css file within your twentysixteen-child folder. Paste the code there.
vi /var/www/itsmetommy.com/public_html/wp-content/themes/twentysixteen-child/style.css
should I copy the style.css from the twenty sixteen theam folder and edit it and delete everything in it and just paste the following?
.content-area-wide {
float: left;
margin-right: -100%;
width: 100%;
}
I wouldn’t. Simply create a new style.css file within twentysixteen-child.
Ok thanks for your help! I’ll post if I need anything else, I appreciate your help.
do you by chance have a default style.css for twenty sixteen? I deleted mine accidently.
https://www.dropbox.com/s/ic3z7qqungt7y6p/style.css?dl=0
Thank You, also I realized I am backing up the site and could get it there, I appreciate your help.
i reinstalled the twenty sixteen theme, and did steps 1-3 this is what I get under appearance
Broken Themes
The following themes are installed but incomplete.
Name Description
twentysixteen-child Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.
Are you sure you’re not looking at the wrong blog? This blog is how to add a full page template to an already existing child theme. The below blog is how to setup the actual child theme.
https://itsmetommy.com/2015/12/20/wordpress-child-themes/
I did both steps, created the twentysixteen-child theme and then did the next step where I edited the files.
I have the files in my dropbox, Whene I go into Theams I get a msg that stylesheet is missing
here is the link
https://www.dropbox.com/l/scl/AAAvYvPbmbkd31-W-JyElNG7ZATMQojGJy4
Thank You so much, I appriciate you and for the level of help you provide.
Thanks its all working