Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twenty Seventeen Full Width page template
body.page-template-template-full-width #content #primary {
max-width: 100%;
}
body.page-template-template-full-width #content #primary .entry-header,
body.page-template-template-full-width #content #primary .entry-content {
float: none;
width: 100%;
}
body.page-template-template-full-width #content #primary .entry-header {
margin-bottom: 4em;
}
<?php
/**
* Template Name: Full Width
*
* Description: A custom template for displaying a fullwidth layout with no sidebar.
*
* @package Twenty Seventeen Child
*/
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/page/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();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();
@halvardssm

This comment has been minimized.

halvardssm commented Nov 26, 2017

Hi! How do I add this to the theme?

@briancauley

This comment has been minimized.

briancauley commented Jan 3, 2018

Hey!
You can add the code in style.css to your theme's style.css file. Upload the template-full-width.php file to the rest of your theme's directory on your file server. Once you do this you will see "Full Width" as a drop-down option in your page editor.

@daviddassau

This comment has been minimized.

daviddassau commented Mar 29, 2018

You are a rock star, my friend. Thank you!

@harshachandra

This comment has been minimized.

harshachandra commented May 14, 2018

Works like a charm. To be more precise, below are two things you need to do:
1> Add template-full-width.php file at this location:
wp-content\themes\twentyseventeen\template-full-width.php
2> Append the code in style.css to this file:
wp-content\themes\twentyseventeen\style.css

You are done. This is how it shall appear.
capture

@MillennialDIYer

This comment has been minimized.

MillennialDIYer commented Jun 10, 2018

Thanks!

Would there be any other easy way to add the standard post template format (column + side bar on the right) to pages, as well? I've been trying but this is still a bit beyond me.

Edit: Never mind. Found the solution here: https://www.cssigniter.com/add-custom-page-template-using-child-theme/

@fernandoweise

This comment has been minimized.

fernandoweise commented Jun 25, 2018

Great, thanks!
But do you know how can I set ALL pages (homepage, categories, search results, etc.) as full-width?

@ist4000

This comment has been minimized.

ist4000 commented Oct 24, 2018

I tried as told here https://themecoder.de/2017/04/12/full-width-page-template-fuer-twenty-seventeen-mit-wordpress-child-theme-erstellen/
But what I got are two rows with huge margins on the left and right. In the one row the title of the page. In the other the content. Basically nothing changed. What's wrong?
I copied the php content to the page.php of the child theme and the css to the styles.css.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment