in your child theme, create a file with the name full-width-page.php, and add this code:
<?php
/**
* Template Name: Full Width Page
*
* @subpackage Twenty_Sixteen child theme
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php //get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php //get_sidebar(); ?>
<?php get_footer(); ?>
in the above example, both sidebar calls are commented;
you can keep this line in its original:
<?php //get_sidebar( 'content-bottom' ); ?>
and add the CSS for that into style.css of the child theme:
@media screen and (min-width: 56.875em) {
.page-template-full-width-page .content-area
{
float: left;
margin-right: -100%;
width: 100%;
}
}
This works great. Thanks for posting it!
Thread Starter
Martin
(@matotien)
Worked perfectly. Thanks a bunch.
Tried this solution > confirmed. Works seamless!
Okay… I did as explained above… where is the option to select this template? I don’t see it anywhere in the dashboard when editing the post. I see no difference so I assume I have to select the template somehow.
when editing the post
the template is only for pages
Thank you… sadly it looks like you answered me instantly while I was off figuring that out on my own. I almost never use posts so I had completely forgotten they’re different. I am actually doing a blog for once instead of a 10-page website like usual.
@nate22
if you want all single posts to be full width without sidebar, edit single.php in the child theme, and comment the sidebar call:
<?php //get_sidebar(); ?>
then add this to style.css of the child theme:
@media screen and (min-width: 56.875em) {
.single-post .content-area
{
float: left;
margin-right: -100%;
width: 100%;
}
}
alternatively,
just use CSS, i.e. also remove the sidebar via CSS
(in this case, you can work with a ‘custom CSS’ plugin instead of a child theme):
.single-post #secondary { display: none; }
@media screen and (min-width: 56.875em) {
.single-post .content-area
{
float: left;
margin-right: -100%;
width: 100%;
}
}
Thanks! The way I had done it previously was not as good as this. I will redo now as you suggest. Very much appreciated! 🙂
Hi there! I have followed these instructions (copied and pasted) and it did get rid of the sidebar, but my content is not covering the full width of the page. I will admit to now learning wordpress and php, so I am not sure what of the pasted code that I need to change, to make this truly full width.
http://www.dionescastro.com/aboutme/
full-width-page-mine code:
<?php
/**
* Template Name: Full Width Page
*
* @subpackage Twenty_Sixteen child theme
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php //get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php //get_sidebar(); ?>
<?php get_footer(); ?>
Style sheet code:
@media screen and (min-width: 56.875em) {
.page-template-full-width-page .content-area
{
float: left;
margin-right: -100%;
width: 100%;
}
}
as you are using a different template file name, you will need to adjust the CSS.
the CSS is referring to the template file name in this CSS class:
.page-template-full-width-page
you will need to use:
.page-template-full-width-page-mine
Awesome! Thank you so much, Michael!
I’m a little late to the ballgame here, but I had this same issue even after making Michael’s suggested changes, and it turned out that earlier I had disabled the sidebar widgets in an effort to have them not take up horizontal space. Once any sidebar widgets are re-added, Michael’s suggested changes work great.
Hi Michael, It is me again. So, I had lost my php and css from 3 weeks ago. And now, trying to create it. But, I notice that I have a large white space on the left. Could you help me to figure out why my page isn’t flushing to the left?
css
/*
Theme Name: Twentysixteen-child
Theme URI: twentysixteen
Description: Twenty Sixteen Child Theme
Author: Dione Castro
Author URI: nothing
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Twentysixteen-child
*/
h1 {
font-family: Verdana;
font-size: 50px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #cc0000;
}
h2 {
font-family: Verdana;
font-size: 50px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
}
@media screen and (min-width: 56.875em) {
.full-width-page .content-area
{
float: left;
margin-right: -100%;
width: 100%;
}
}
td {
font-family: Arial;
font-size: 12px;
border-width: 0 0px 0px 0;
}
table {
border-collapse: separate;
border-spacing: 0;
border-width: 0px 0 0 0px;
}
php
<?php
/**
* Template Name: Full Width Page
*
* @subpackage Twenty_Sixteen child theme
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php //get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php //get_sidebar(); ?>
<?php get_footer(); ?>
