Intended for the default theme Twenty Fourteen and building upon my article “A Real ‘Full Width Page’ Template for Twenty Fourteen” this new page template removes the left sidebar but includes the functionality of using the ‘content sidebar’ for a page, and still shows in full width if the content sidebar is not used for widgets.
It should keep the responsive layout by reverting into a one-column layout for small browser windows.
How to do it:
In a child theme of Twenty Fourteen, create a file within the folder /page-templates/ with the file name full-page-right-sidebar.php (the file name is important as it gets referred to in the CSS); add this code:
<?php
/**
* Template Name: Full Width Page wt Right Sidebar
*
* @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 -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_footer();
In style.css of the child theme, add:
/*for a page template full-page-right-sidebar.php;
full width page wt right sidebar - no left sidebar;
allows for the content sidebar to be used*/
.page-template-page-templatesfull-page-right-sidebar-php .site {
width: 100%;
}
.page-template-page-templatesfull-page-right-sidebar-php .site-content .entry-header,
.page-template-page-templatesfull-page-right-sidebar-php .site-content .entry-content,
.page-template-page-templatesfull-page-right-sidebar-php .site-content .entry-summary,
.page-template-page-templatesfull-page-right-sidebar-php .site-content .entry-meta,
.page-template-page-templatesfull-page-right-sidebar-php .page-content {
margin: 0 auto;
max-width: 90%;
}
.page-template-page-templatesfull-page-right-sidebar-php .comments-area {
margin: 0 auto;
max-width: 80%;
}
.page-template-page-templatesfull-page-right-sidebar-php .site-content,
.page-template-page-templatesfull-page-right-sidebar-php .site-main .widecolumn {
margin-left: 0;
}
.page-template-page-templatesfull-page-right-sidebar-php .site:before {
width: 0;
}
/*...........*/
The CSS is not optimized; you might need to adapt it for your particular design needs.
