Removing Sidebar from specific pages with CSS

  • Author
  • #1057959

    How can I remove the sidebar with CSS from specific pages? I have worked out that I can make it completely invisible but unfortunately only for the whole site.


    The blog I need help with is


    What you’ll need to do is open the page where you would like to hide it and view the page source in your browser. Find the body tag and look at the classes. One of the classes will be unique and you can use that in y our CSS selector to target just that page.

    For example, on this page:

    The body tag has a class called “page-id-222”. So you can use this CSS to hide the sidebar and make the main content area wider for just that page:

    .page-id-222 #secondary-content {
    	display: none;
    .page-id-222 #primary-content {
    	width: 100%;

    Note that you may need to adjust the width setting to whatever looks best to you.


    Thanks so much! It works! I’ve applied it to the page that you suggested and I have tried to do it on another page but I’m not sure I understand which is the page-id? If you look at the homepage of my site… which one would it be?

    For example, I thought that the page id for ‘The Red Bus Sessions’ page was 254 as far as I can see but it doesn’t seem to work…?

    Thanks so much!


    Oh I have managed to work it out on all pages but ‘Latest’ – for the life of me I can’t find the Id!



    Does .blog work for your Latest page?

The topic ‘Removing Sidebar from specific pages with CSS’ is closed to new replies.