A Real ‘Full Width Page’ Template for Twenty Fourteen

To create a real full width page – with no sidebars whatsoever – in your WordPress site while using a child theme of the default theme Twenty Fourteen, program this page template file with the file name real-full-width.php (important as this is referenced in the CSS) and save it in a sub-folder /page-templates in the child theme:

<?php
/**
 * Template Name: Real Full Width Page
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

<div id="main-content" class="main-content">

<?php
	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	}
?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			<?php
				// Start the Loop.
				while ( have_posts() ) : the_post();

					// Include the page content template.
					get_template_part( '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();
					}
				endwhile;
			?>
		</div><!-- #content -->
	</div><!-- #primary -->
</div><!-- #main-content -->

<?php
get_footer();

Add this section to style.css of the child theme:

.page-template-page-templatesreal-full-width-php .site {
	width: 100%;
}

.page-template-page-templatesreal-full-width-php  .hentry {
	margin: 0 auto 48px;
	max-width: 90%;
}

.page-template-page-templatesreal-full-width-php .site-content .entry-header,
.page-template-page-templatesreal-full-width-php .site-content .entry-content,
.page-template-page-templatesreal-full-width-php .site-content .entry-summary,
.page-template-page-templatesreal-full-width-php .site-content .entry-meta,
.page-template-page-templatesreal-full-width-php .page-content {
	margin: 0 auto;
	max-width: 90%;
}

.page-template-page-templatesreal-full-width-php .main-content,
.page-template-page-templatesreal-full-width-php .content-area {
	float: left;
	width: 100%;
}
.page-template-page-templatesreal-full-width-php .site-content,
.page-template-page-templatesreal-full-width-php .site-main .widecolumn {
	margin-left: 0;
}

.page-template-page-templatesreal-full-width-php .site:before {
	width: 0;
}

.page-template-page-templatesreal-full-width-php .site-content {
	margin-left: 0;
	margin-right: 0;
}

(not optimized)

Activate the template in the ‘Edit Page’ dashboard page, under ‘Page Attributes’ by ticking ‘Real Full Width Page’.

21 Replies to “A Real ‘Full Width Page’ Template for Twenty Fourteen”

  1. Dear Michael,

    Great tutorial. The featured image (slider) stretches nicely from left to right. Unfortunately this is not the case for the post attached to the featured image. Do you know a trick or missed I something in your tutorial?

    The website is under construction. When needed, I can mail you the access data.

    Thanks in advance, Wiepkje

    1. to start with, can you email me the link to your site?
      I will check the issue, and suggest a fix if it is something obvious and simple; otherwise, I am open to work on it for a small fee.

      1. Dear Alchymyth,

        My apologies. I just now see your reply. I did nog get an e-mailalert, so that’s the reason of my late reply. The problem I had, has been solved some time ago.
        But, you’re my favorite wordpress expert. I always check you first before I start a topic. So again my apologies and I hope you will help me in the future.

  2. Hi Michael,

    thank you very much for your template.
    A have a question: how to keep it responsive on mobile?

    Thanks

    Fabio

    1. not sure what you mean?
      as far as I can see, the page template seems to adjust to smaller screens automatically (not tested with actual mobile).

  3. Hi! Finally someone talks about a really full-width page. But I couldn’t find a way to apply that to posts. As in fact we cant apply taxonomy for pages, I am looking for a really full-width post.

    At the moment I have only got it as described here

    A new post type: domain.com/yournewposttype/pagetitle

    add_action( 'init', 'create_posttype' );
    function create_posttype() {
    register_post_type( 'acme_product',
    array(
    'labels' => array(
    'name' => __( 'Products' ),
    'singular_name' => __( 'Product' )
    ),
    'public' => true,
    'has_archive' => true,
    'rewrite' => array('slug' => 'products'),
    )
    );
    }

  4. Hi Michael

    Thank you for that code – that was just what I was looking for.

    Nevertheless I have a little problem here. If I put in an image and set it either to the left or the right, part of the image will be shown outside the margin. If I do not set any left or right alignment, when setting in the image, it will be placed fine at the left margin.

    Is it possible to add some css style to your css styles in order to keep the image inside the margin.
    Thank you in beforehand

    Mikael

    1. this is caused by the styles for aligned images within style.css of Twenty Fourteen.
      The WordPress forum has dealt with that problem already, so you might want to search the forum or ask your question there.

      1. PS;
        these styles are pushing the images over the edge of the content:

        .full-width .site-content blockquote.alignleft,
        .full-width .site-content img.size-full.alignleft,
        .full-width .site-content img.size-large.alignleft,
        .full-width .site-content img.size-medium.alignleft,
        .full-width .site-content .wp-caption.alignleft {
        margin-left: -168px;
        }

        .full-width .site-content blockquote.alignright,
        .full-width .site-content img.size-full.alignright,
        .full-width .site-content img.size-large.alignright,
        .full-width .site-content img.size-medium.alignright,
        .full-width .site-content .wp-caption.alignright {
        margin-right: -168px;
        }

        add corresponding CSS to your styles, with the page template specific body classes, to set the margin to 0 zero.

      2. Hi Michael

        Thank you for the answer.

        Now I know where to look for a solution. Maybe I can fix it myself.

  5. Hi, thanks for putting this up, I have managed to get it to work with the real full width page template which is great. Would you be able to tell me how I’d go about doing this but still include the left sidebar area ( left menu/2nd menu)

    What I’m trying to do is increase the content area by removing the right sidebar (content area) but then have the content display across the full width of the white part of the page but leave the left menu area (black) in place. I’m OK at this stuff if given instructions to follow and yours were great for a novice like me. Any help would be much appreciated.

    I hope this makes sense what I’m asking

    Yours Andy, Malvern in the UK

    1. if you don’t put widgets into the ‘content sidebar’ then the right sidebar will be gone; you then just need to adjust the CSS.
      the best place to ask this kind of question would be the WordPress.org support forum.
      it will be an advantage if you can provide a live link to your site.

  6. Thank you for your help. I already created a child theme of the default theme Twenty Fourteen, with your template file with name real-full-width.php and I saved it in a sub-folder /page-templates in the child theme. After that I create the style.css on the child team. However, when I try to open Model Page, I only have the same models I had before. How can I include real-full-width on the box ? Thanks for your reply. Regaards.

    1. what do you mean with ‘try yo open Model Page’?
      have you tried to assign the new page template to a static page under ‘page attributes’ when editing the page?

  7. I have implemented your suggestion. Now I want to expand the main content into the area freed by not having the left side bar. Have you tackeled that change as well?

    1. try and change some of the ‘max-width: 90%;’ in my suggsted styles to ‘100%’ (not tested or verified)

  8. the template still seems to have the ‘get_sidebar()’ code, otherwise you would not get the sidebar to show. also, the suggested styles seem to be empty without the correcting width parameters.
    without full access to your site, it is virtually impossible to find out why this is not working as described in my article.

Leave a Reply to michael Cancel reply

Your email address will not be published. Required fields are marked *