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.

Show comment
Hide comment
@halvardssm

halvardssm Nov 26, 2017

Hi! How do I add this to the theme?

halvardssm commented Nov 26, 2017

Hi! How do I add this to the theme?

@briancauley

This comment has been minimized.

Show comment
Hide comment
@briancauley

briancauley 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.

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.

Show comment
Hide comment
@daviddassau

daviddassau Mar 29, 2018

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

daviddassau commented Mar 29, 2018

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

@harshachandra

This comment has been minimized.

Show comment
Hide comment
@harshachandra

harshachandra 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

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.

Show comment
Hide comment
@MillennialDIYer

MillennialDIYer 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/

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.

Show comment
Hide comment
@fernandoweise

fernandoweise Jun 25, 2018

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

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?

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