74 | 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:

 * 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">

	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">
				// 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() ) {
		</div><!-- #content -->
	</div><!-- #primary -->
</div><!-- #main-content -->


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

This entry was posted in Easy Coding for Wordpress, Twenty Fourteen, WordPress and tagged , , , . Bookmark the permalink.

21 Responses to A Real ‘Full Width Page’ Template for Twenty Fourteen

  1. Wiepkje comments:

    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

  2. Fabio comments:

    Hi Michael,

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



    • michael replies:

      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. Blasphemous Rumour comments:

    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',
    'labels' => array(
    'name' => __( 'Products' ),
    'singular_name' => __( 'Product' )
    'public' => true,
    'has_archive' => true,
    'rewrite' => array('slug' => 'products'),

  4. Mikael Andersen comments:

    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


    • michael replies:

      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.

      • michael replies:

        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.

      • Mikael Andersen replies:

        Hi Michael

        Thank you for the answer.

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

  5. andy Jones comments:

    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

    • michael replies:

      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. Jorge C Henriques comments:

    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.

    • michael replies:

      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. Charles-Edouard Carrier comments:

    Thank you so much! But one question, what should I change to keep the right side bar, since i want to keep it to facilitate navigation even in full wide page. Cheers!


  8. craig comments:

    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?

    • michael replies:

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

  9. michael comments:

    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.