Remove Sidebar Space From Single Post

Support
#1

hi

I have my site width set to 950px and my single post width set to only 80% of that with a max width of 750px.

I have used CSS to remove the right sidebar in single posts, as the blog settings are content left and sidebar right. That is what I want for the main blog page, with no sidebars on the single post pages.

What I am finding is the single post pages are still offset to the left as if the sidebar was still there. Here is what I have in CSS

`.single-post .x-sidebar.right {
display: none;
}
.single-post .x-main.left {
  width: 80%;
  max-width: 750px;
}`

I also added display: block; to try and center it, but that did not work. How is it possible for the single post pages to be the width I set and centered with no sidebar space on the right?

Additionally, if I decided I wanted to have a sidebar just for a particular single post page, how is that possible? Is it all achieved in CSS or better to adjust the child theme .php file that handles sidebars?

Regards

#2

Hi,

Yes, it’s much better to use php rather than css.

You can add the code below in your child theme’s functions.php file

if ( ! function_exists( 'x_get_content_layout' ) ) :
  function x_get_content_layout() {
    $content_layout = x_get_option( 'x_layout_content' );
    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $layout = 'full-width';
      } elseif ( is_singular( 'post' ) ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }
    return $layout;
  }
endif;

I made is_home and is_singular(post) to full width.

is_home() is your blog page and is_singular(post) is your blog post page

 if ( is_home() ) {
        $layout = 'full-width';
      } elseif ( is_singular( 'post' ) ) {
        $layout = 'full-width';
      }

Hope that helps.

#3

hi Paul

Thanks so much for your reply.

Would not full width refer to the width of the setting in Layout and Design, which for me is set to 950px? I actually want my blog posts page to be no wider than 750px with no sidebar. Yet I want the blog page to actually be that full width of 950px but have a sidebar.

I would also like the ability to place a sidebar on various individual blog post pages when desired.

Just double checking that what you have supplied addresses this

Thanks again

#4

Hello There,

Thanks for updating in!

With your custom css:

.single-post .x-sidebar.right {
  display: none;
}

.single-post .x-main.left {
  width: 80%;
  max-width: 750px;
}

This code will just hide the sidebar and set the width and maximum width of the content area. The content area will still display on the left side and there is still a big space on the left which was for the sidebar which is now hidden.

Paul suggested that you change the layout instead. With the code given, it gives the single blog posts layout with just a fullwidth and no sidebar setup. With a custom css, you can still make sure that it is 80% and with a maximum of 750px like this:

.single-post .x-main.full {
  width: 80%;
  max-width: 750px;
}

.single-post .x-main.full because it will be fullwidth.

If you do not want to implement Paul’s suggested code and stick to what you have already did. You will have to modify your custom css and make use something like the code below to eliminate the offset sidebar space.

.single-post .x-sidebar.right {
  display: none;
}

.single-post .x-main.left {
    width: 80%;
    max-width: 750px;
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Hope this explains briefly.

#5

hi Rue

Thanks for your reply

Yes I realised what Paul was trying to achieve and how and am quite happy to go that route, but I did not want the blog index page to be full width - just the single posts pages. For the blog index page, I wish it to use the sidebar right as per the Customiser > Blog settings. If is_home is full width, will it not eliminate the sidebar?

Regards

#6

Hello There,

If you use Paul’s suggestion, your condition would be likely this:

if ( is_home() ) {
        $layout = 'content-sidebar';
} elseif ( is_singular( 'post' ) ) {
        $layout = 'full-width';
}

Please let us know how it goes.

#7

Hi Rue

Thanks so much for your reply

I currently don’t have access to any pages at the moment, so am working through gaining access again. I will try this when I can get in.

And if I wished to show the sidebar for a particular single post, is this possible via CSS? Would I just target the particular page using my original code and the page ID?

Regards

#8

Hi,

You can add another conditional statement in your php code.

eg.


if(is_page( 42 )) {
    $layout = 'content-sidebar';
}

where 42 is the page id

You may add it before this line return $layout;

To get the page id, you may refer to the link below

Hope that helps.

#9

hi Paul

Thanks so much for your reply.

That’s an even better way to do it than CSS.

Thanks again

#10

Glad we could help.

Cheers!

#11

hi Rue

I did think this issue was put to bed, but I added in the CSS code you gave me to adjust the width of the single post pages and it still sits off to the left as if there is a sidebar, yet the functions.php file clearly has the following as per Paul’s supplied code:

} elseif ( is_singular( 'post' ) ) { $layout = 'full-width';

Here is the code you gave me so as to allow me to adjust the width of the page manually, but it is still not right

I tried adding display: block; to see if that would center the page, but no go there.

Any suggestion, Rue?

regards

#12

Hi again,

Replace your CSS with the following code:

.single-post .x-main.full {
    width: 80%;
    max-width: 750px;
    margin: 0 auto;
}

That should do the trick, let us know how this goes!

#13

hi Nabeel

Thanks for the reply

Yes, of course. The same thing I use to center images on pages. My apologies for not thinking of it

Much appreciated. That is perfect

Regards

#14

You’re welcome.