CHILD THEME: additional page templates

written by: Jeff McNear

The parent theme already has page templates for pages with a sidebar, full width pages, and a page which contains specific Woo Commerce queries.

Since we have changed the overall width of the container, in some instances the full width view is too wide to be legible, so we have created a contained class:

.content-area.contained {width: 100%;float: none;margin-left: auto;margin-right: auto;max-width: 1100px;}

Contained Full Width

which is used in a page template:

<?php
/**
 * The template for displaying full width pages.
 *
 * Template Name: Contained Full width
 *
 * @package storefront
 */
get_header(); ?>
<div id="primary" class="content-area contained">
<!-- ADDING IN ANOTHER CLASS TO MAKE THINGS NARROWER AT DESKTOP -->
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) :
the_post();
do_action( 'storefront_page_before' );
get_template_part( 'content', 'page' );
/**
* Functions hooked in to storefront_page_after action
*
* @hooked storefront_display_comments - 10
 */
do_action( 'storefront_page_after' );
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();

No Title

Since we anticipate instances where we won’t want to show titles on a page, we also have a “no-title” template

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *Template name: No Title
  * @package storefront
 */

get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) :
the_post();
do_action( 'storefront_page_before' ); ?>
<!-- TAKING APART THE INSERTION TO DROP THE TITLE -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content();?>
</article><!-- #post-## -->
<?php	do_action( 'storefront_page_after' );
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->

<!-- ALTERNATIVE WIDGET REGION -->
<div id="secondary" class="widget-area">
<?php if ( ! dynamic_sidebar( 'page-sidebar' ) ) : ?>
<?php endif; // end sidebar widget area ?>
</div>

<?php
get_footer();

Absolutely Full Width

Since we anticipate needing an unrestricted width page with no title we have an “absolutely full width” template

<?php
/**
 * The template for displaying full width pages.
 *
 * Template Name: Absolutely Full width
 *
 * @package storefront
 */
get_header('alternate'); ?>
<div id="primary" class="content-area uncontained">
<!-- ADDING IN ANOTHER CLASS TO MAKE THINGS NARROWER AT DESKTOP -->
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) :
the_post();
 ?>
<!-- TAKING APART THE INSERTION TO DROP THE TITLE -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content();?>
</article><!-- #post-## -->
<?php	
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();

notice that we are pulling an alternate header file

The key difference between the two header files is the class assigned to the main container div … in the default header it is “col-full” which we have contained a 1600px

<div id="content" class="site-content" tabindex="-1">	
<div class="col-full">

where as in the alternate header it is an uncontained “clear”

<div id="content" class="site-content" tabindex="-1">
<div class="clear">