Need to remove the sidebar from post/ blog

Hello James,

Unfortunately this is not possible by default, but it can be done by altering the CSS a bit ??

Let me know if this solution suits you, I will send you the fix on how to do it.

Best regards,
Marius

I need to do this too. Please could you help me marius?

I want to remove it from the blog post AND the blog page please.

Yes me too .. please send solution to me direct or post here

As Marius explained, you can hide the sidebar using CSS. There are two problems then:

1. How to add the CSS.
2. What CSS should be added

First, how to add the CSS. Zerif Lite does not have a custom CSS option, so your two choices are:

1. Create a child theme. You would then add any overriding CSS to your child theme’s style.css file.
2. Use a CSS plugin like Jetpack or Custom CSS Manager. Some of you may already have Jetpack installed, so to activate the custom CSS option, go to Jetpack → Settings and activate Custom CSS.

Note that you do not want to modify any theme files directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost.

Now that you have a way to add your own CSS, what CSS rule do you need to add to hide the sidebar?

Here are the two general rules:

<SELECTOR> .sidebar-wrap {
   display: none;
}
<SELECTOR> .content-left-wrap {
   width: 100%;
}

The first rule hides the sidebar while the second rule expands the width of the content area to fill in the space left by the hidden sidebar. The value for <SELECTOR> depends upon what types of pages you want to hide the sidebar. If you read the documentation for the body_class() function, you’ll see that the body element is assigned a particular class name depending upon what type of page is being displayed. The blog page, for example, will have the class blog assigned to the body element. So if you want to hide the sidebar on the blog page, you would write your rules like this:

.blog .sidebar-wrap {
   display: none;
}
.blog .content-left-wrap {
   width: 100%;
}

Note the period before the blog class name. When creating selectors for CSS rules, class names have a period prepended to them, while IDs have pound signs (aka hash tags) prepended.

If you read the body_class() documentation further, you’ll see that all single posts will have the class single-post assigned to the body element, and all pages (i.e., non-post pages), will have the page class assigned. So if you want to hide the sidebar on all single post pages, add these two rules:

.single-post .sidebar-wrap {
   display: none;
}
.single-post .content-left-wrap {
   width: 100%;
}

One final note: each post or page will have a unique ID assigned to it, so you can even hide the sidebar for an individual page or post. If you edit a page or post, you’ll see the ID as a number up in the address bar. If you want to hide the sidebar on a page that has an ID of 123, you would use this class name: page-id-123. If you wanted to hide the sidebar on a post with an ID of 456, you would use this class name: postid-456.

Thanks! The single post works great but the blog page does not, what should I do?

Can you please post a link to your site so I can take a look? Thanks.

IT’s https://nutritionistinmanchester.co.uk

Thanks!

Don’t know why this theme doesn’t assign the standard WP classes, but instead of .blog, use .page-template-template-blog-large.

THANK YOU!!!!!

Hi CrouchingBruin: thanks for the explanation and help.
What if I want to keep some of the information in side bard and remove some?

For example I like to keep “RECENT POSTS” and “ARCHIVES” and “CATEGORIES” but to remove “RECENT COMMENTS” and “META”.

Thank you very much for your help.

The hiding of individual widgets is site dependent. That is, WordPress assigns a unique identifier to each widget, but it’s probably going to be different on each site. What you can do is do a view source on a page that displays the sidebar and do a search on <aside. The <aside> element is used to contain the widgets. Inside the <aside tag will be an ID that identifies the widget. You can use the ID to hide that widget.

For example, if the <aside tag for Recent Comments looks like this:

<aside id="recent-comments-3" class="widget widget_recent_comments">

Then you would add this rule to hide it:

#recent-comments-3 {
   display: none;
}

Note that you add a pound sign (#) to the beginning of ID names.

I’m having the same issue – I need the graphics on https://www.uticacm.org to be wider and even though I have them set to 2000-3000 px wide they do not fill the current content area.

@dotcalmv, exactly which images are you referring to? I don’t see any images on the home page which look like they should be wider.

Hello, I have removed sidebar on backend via widget area however archives, meta and search is still showing when I go live on the page. I have a look on the backend again and they are not there. I know some themes need time to refresh but it has been 8 hours.