0

I've been researching this one for a while and can't seem to find the solution. But, I'd like to have a selectable template that I can use for certain blog posts to make them full-width by not displaying the sidebar while keeping the header, footer, and comments. My theme (Coral Dark) came with a pages-full-width.php template that accomplishes exactly this for pages. But, I have no templates to choose from for regular posts.

I've tried to create one myself by copying the single.php file and removing the <?php get_sidebar(); ?> code, but this does not work. I've also tried to add this to custom CSS (changing the post ID) as someone suggested, but no result there either:

.single-author .site-content,
.postid-4553 .site-content,
.postid-4253 .site-content
{
    flex: 0 0 100%!important;
    max-width: 100%!important;
    padding-right: 0px!important;
}

I also tried the Fullwidth Templates for Any Theme & Page Builder plugin which almost gave me exactly what I need, but no matter which setting I use, it eliminates the comments section.

I'm not quite sure, but I think the issue is my theme doesn't seem to refer to the sidebar as such, and instead seems to call it widget-area egrid. Not sure if that's accurate, but would make sense as to why simply removing the <?php get_sidebar(); ?> on these template tutorials isn't working.

Here's an example of a post that I'd like to apply this custom template for, just to eliminate the sidebar/widgets so the post is full width, but keeping the header, footer, and comments:

https://lordkayoss.com/2022/02/28/equipment-chronicles-chasing-quality-on-youtube/

Can someone help?

1 Answer 1

0

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.

5
  • Thank you for the detailed walkthrough. I followed your instructions thoroughly, but sadly, the result when I activated the child theme was the site content being shifted to the left, behind the sidebar widgets (screen shot): lordkayoss.com/images/child-theme-result.jpg. I went ahead and tried the new full-width template before deactivating the child theme to see if it would work. I deleted cache on the site as well as my complete browser history, but the template didn't seem to have any effect.
    – LK.
    Feb 11, 2023 at 7:25
  • Is there a way in the template to specify that it not display widget-area egrid? I could be wrong of course, but that may be where the problem is. Removing the <?php get_sidebar(); ?> code from the template doesn't seem to be effecting the sidebar at any time it's been tried. When I go into inspect mode on the browser, the sidebar is being referred to as widget-area egrid. The entire entry looks like this: <div id="secondary" class="widget-area egrid grid-30 tablet-grid-30 mobile-grid-100 pull-70 tablet-pull-70" role="complementary">
    – LK.
    Feb 11, 2023 at 7:34
  • Sorry to hear it's still not working. I realized I made a mistake in the style.css which may have caused the issue you see in your screenshot. I edited the css in the style.css codeblock to fix that. With regard to that widget-area egrid <div> , the only time it shows up is when it's outputted by get_sidebar, at least in the blank copy of the theme i downloaded. Any time I remove get sidebar from a template, whether it's single.php or page.php, it vanishes. Here is how it looks for me with and without the template active: imgur.com/a/WqZy9BL
    – Harrison
    Feb 11, 2023 at 14:41
  • Progress! I used the new style code you provided and uploaded/activated the updated child theme and the site looks mostly correct. The content is where it is supposed to be. Two things I noticed are the photo slideshow that plays just below the header in the Coral Dark theme isn't working, and the font for the website title has defaulted to something different. The good news is the full width template seems to be working for posts! I just tried it on a test post and it displayed correctly with no sidebar, and the header/footer/comments are all there. Is there a way to correct those two things?
    – LK.
    Feb 11, 2023 at 21:03
  • Actually, I see the issue for the slider and some other little things I've noticed. I wasn't aware that switching to a child theme would remove my Custom CSS from "appearance" and I'd have to reset the photo slideshow. I can fix these, no problem. The only one I'm not seeing at the moment is how to change the site title font back to the one it had before. But, I'm sure I can figure it out. Thank you for your help, friend! I believe you not only solved my original issue, but I've been wanting to implement a child theme for sometime, but wasn't quite sure how to do it properly. So double cheers!
    – LK.
    Feb 11, 2023 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.