Need Help With Making Full-Width Template for Blog Posts (common methods aren’t working)

Question

Got this working on a test site by downloading the coral dark theme and making a child theme for it. Making a child theme might seem a little daunting if you’ve never made wordpress themes before, but it’s the most sustainable and overall best way to do this in my opinion. And it’s actually pretty easy. I will go through the steps I took. You can find background information about child themes in this section of the theme developer handbook.

First, create an empty folder on your computer and name it coral-dark-child.

Next create a text file inside that folder called style.css. Open that file and copy/paste the following:

/*
Theme Name: Coral Dark Child
Template: coral-dark
*/

@media (min-width: 768px) and (max-width: 1024px){
  .full-width-post.tablet-grid-70 {
    width: 100%;
  }

  .full-width-post.tablet-push-30{
    left: 0;
  }
}

@media (min-width: 1025px){
  .full-width-post.grid-70{ 
    width: 100%;
  }

  .full-width-post.push-30 {
    left: 0;  
  } 
}

The heading at the top of the file tells wordpress this is a child theme, and that it needs to look at the “template” or parent theme, Coral Dark, for most of the necessary files.
The tablet-grid-70 and grid-70 css classes are restricting the content to 70% of the screen width on medium and large screens. We are going use our own full-width-post class in our custom template to override this, setting elements to 100% width when they have both a ‘grid-70’ class and a ‘full-width-post’ class.

Now create a another text file in the coral-dark-child folder called functions.php. Copy/paste the following:

<?php

function coral_dark_child_enqueue_styles(){
  $theme = wp_get_theme();
  
  /*parent theme stylesheet*/
  wp_enqueue_style( 
    'coral-dark-style', 
    get_template_directory_uri() . '/style.css', 
    array(), 
    $theme->parent()->get( 'Version' )
  );
  
  /* our child theme stylesheet */
  wp_enqueue_style( 
    'coral-dark-child-style', 
    get_stylesheet_uri(), 
    array( 'coral-dark-style') 
  );
}

add_action( 'wp_enqueue_scripts', 'coral_dark_child_enqueue_styles' );

Here we use wp_enqueue_style to add the css we defined in style.css to the site. We have to call it twice, once to load the parent theme css, then again to load our child theme css.

Lastly, we’ll make a custom page template that will actually display our full-width posts. You had the right idea when you copied the single.php file, that’s basically what we’re going to do here. But first, we’re going to make another folder inside the coral-dark-child folder called page-templates. Inside page-templates we’re going to make another text file called full-width.php. The overall folder structure now looks like this:

coral-dark-child
 -style.css
 -functions.php
 -page-templates
   -full-width.php

Now in full-width.php copy/paste the following:

<?php
/**
 * Template Name: Full-width
 * Template Post Type: post
*/

get_header(); ?>

    <div id="primary" class="content-area egrid full-width-post <?php coral_dark_column_class('content'); ?>">
        <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'content', 'single' ); ?>
            <?php $parg = array(
                'prev_text'          => esc_html__( 'Previous post', 'coral-dark' ),
                'next_text'          => esc_html__( 'Next post', 'coral-dark' ),
                'screen_reader_text' => esc_html__( 'Post navigation', 'coral-dark' )); ?>
            <?php the_post_navigation($parg); ?>

            <?php
                // If comments are open or we have at least one comment, load up the comment template
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            ?>

        <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->
    </div><!-- #primary -->
  
<?php get_footer(); ?>

This is almost an exact copy of single.php from the parent theme.
The commented-out header sets the name this template will be identified by on the “edit post” screen in the admin area. The “Template Post Type” line tells wordpress this template is for posts specifically, as opposed to pages.
One difference from single.php is that we have removed the get_sidebar() call because there is no room for the sidebar in the full-screen layout.
The other difference is that we have added the “full-width-post” class to the outermost <div> (the one with id “primary”). This means the css we wrote earlier can target this div, telling it to take up the full width when this template is active.

At this point, you should have a working child theme. Create a zip file of this folder and upload it your site via Appearance->Themes->Add New. Activate the child theme. Then, edit the post you want to make full-width. Click the link to the right of ‘template’ in the right hand menu and you should get a dropdown that allows you to select the “full-width” template. You might have to clear your browser cache to see the change take effect on the front end.

The beauty of this being a child theme is that if it’s not looking right or anything goes wrong at any point, you can just revert to parent theme. Also it won’t interfere with updating the parent theme. Hope this helps.

Related Posts: