Twenty Sixteen child theme

The default WordPress theme Twenty Sixteen is very cool one and it gives you plenty of room for further development and styling of your website/blog. It comes with black border by default which some people may dislike, and it does not provide the full width page template. In this post you can learn how to remove the black border from Twenty Sixteen default WordPress theme and also how to create a full width page template.

Create Twenty Sixteen child theme

First of all I created a child theme of default Twenty Sixteen WordPress theme so any further modifications (and future theme updates) won’t spoil the theme core files.
Detailed instructions about creating and working with child themes can be found here.

Create full width template page

After activating the child theme I created a php page in text editor and named it full-width-page.php The page contains the following code:

<?php
/**
 * Template Name: Full Width Page
 *
 * @subpackage Twenty_Sixteen child theme
 */

get_header(); ?>

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

            // Include the page content template.
            get_template_part( 'template-parts/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();
            }

            // End of the loop.
        endwhile;
        ?>

    </main><!-- .site-main -->

    <?php //get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php //get_sidebar(); ?>
<?php get_footer(); ?>

Note that the sidebars are commented thus won’t appear on the pages anymore. This file is included within child theme folder.
After this you have to open style.css file located in child theme folder and paste the following code at the bottom:

@media screen and (min-width: 56.875em) {
    .page-template-full-width-page .content-area
    {
      float: left;
      margin-right: -100%;
      width: 100%;
    }
}

Now I have full width template to choose when I create a new page in the Dashboard.

Remove black border from the theme

Next step is removal of the black border, which is cool to have in the first place but if you don’t like it or if you are developing a customized version of some website/blog, then open style.css file located in child theme folder and paste the following code at the end of it:

body:not(.custom-background-image):before,
    body:not(.custom-background-image):after {
        height: 0px !important;
    }
.site {
    margin: 0;
}

Save and upload back to the server and this will remove the black border from the Twenty Sixteen theme 🙂

You are free to use the child theme I prepared for this post which comes without black border from the following download link:

Twenty Sixteen child theme download