Quantcast
Channel: Michael (aka alchymyth) – TransformationPowerTools
Viewing all articles
Browse latest Browse all 12

A Real ‘Full Width Page’ Template for Twenty Fourteen

$
0
0

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


Viewing all articles
Browse latest Browse all 12

Trending Articles