Build Your Own Business Website header image

How to Remove the Sidebars from the Blog Page, Posts and Archives in Thesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to remove the sidebars from the blog page, posts and archives in Thesis. We use the filter to remove sidebars and then add another filter to add it back to pages where you want them to show up. We also show how to add a filter in the content that we want to be full width by creating a no sidebars class and create Thesis content classes.

Video Transcript

Member:  There’s a script that you paste into the custom functions and the custom CSS that makes the blog post page in Thesis go to a single column as opposed to having a sidebar. I have the script working which I could like maybe email to you or something somehow but I can’t. I don’t know how to write the syntax or adjust it so that it works on a single post page, the home page and on the other class of post page. I guess the blog, the normal news feed or whatever it is.

Rick:  It sounds like you’re really only applying it in 2 conditions. You’re going to apply it to the single post page and you’re going to apply it to the main post page. Is that right?

Member:  Yeah.

Rick:  Because you’re not going to apply it to archives.

Member:  Yeah, not applying it to archives.

Rick:  Okay.

Member:  I got it from the thesis website, how to put that in there but then I couldn’t figure out. It’s either you change out this one worked and then it’ll keep the custom functions script to make it single or whatever. But I want to be able to do it on both and I don’t know how to type it because every time I do, I have to manually, by ftp, replace that custom functions php file because I think I’m just typing it wrong.

Rick:  Yeah. That’s the way you should be adding it anyway though, right? You shouldn’t be using the custom file editor. You should simply be editing on your local machine and then uploading it using ftp every time. Ultimately, it may seem like it’s a little slower at the beginning but once you have your system set up for it, it’s much faster to recover from errors like that. Can you show me your code if you show me your screen? Can you show me your code?

Member:  Yeah. How do I… this is my first time on so how do…

Rick:  Well, you should, right now, have a little dialogue in front of you that says “Share your screen.”

Member:  Okay. You have to be a little patient. I’m going to log in really fast to this other site but I’m going to go ahead and do it.

Rick:  That’s alright. Okay.

Member:  Okay, I’m on this site called, if anybody else is watching…

Rick:  Yes.

Member:  It’s a site for people to do… my client has a club that do light shows and globe sticks and LED, gloves and all that and they throw out nightclub parties. So if you look on the news page, if you click on the news page, that’s my normal…

Rick:  Your posts page?

Member:  Yeah, my posts page and you’ll notice that I have it as a single column. If you click on one of the actual news stories, it’ll go through a bar. So I’ve already altered this a little bit. Let me log in real fast.

Okay so I go into Thesis, Custom File Editor. Let me show you what I’ve done so far and there’s two you put in. You put one in through the custom.css and that’s going to be this one right here that I’m highlighting. I have denoted it as no sidebars for post pages begin and end. And so I got .custom .no_sidebars #content width of 940 pixels.

Rick:  Okay.

Member:  That’s my content area and then you go on to the custom functions php file. I’m not much of a coder so I felt pretty cool that I was doing something fancy here. I was doing a looping filter in the custom function, this little edit thing here. But it’s the Thesis way to do this. So I guess here it is right here, if you can read this little…

Rick:  Okay. You don’t need to zoom it. Go ahead and zoom back out. You’re missing a couple of pieces. You’re missing the piece that tells the posts page to be full width, right? For a moment, we’ll go back to your CSS file.

Member:  Okay.

Rick:  Okay, see how he’s got custom .sidebars… no, go back up to the top. Custom .no_sidebars content and a specified width? See that? You don’t currently have a mechanism for adding the no sidebars class to those pages. So even though you’ve figured out a way of removing the sidebar, you haven’t figured out a way to add this no sidebars class to those pages.

Okay so it takes 3 things. I’m going to make myself the presenter here. Let’s see, change presenter, make the presenter. It takes 3 things. Actually, really, it probably only takes 2 things and that is the filter to remove the sidebars and the filter to add the no sidebars class to those pages where you want that to show up. In custom functions php, that would look something like… well in fact, I think I have this code on this thing here, let’s see. Okay, I lied. I don’t have the code just sitting here.

What I would do then is start off by creating a function. You should not be doing this in your custom file editor and you shouldn’t be admitting to me that you are.

Member:  I understand.

Rick:  Okay so BYOB and let’s see, posts no sidebars. Post… oh no, remove sidebars from posts. Okay, what’s happening here? Okay, there’s our function name. There’s wrapping the function. Then what we would say is if is home, that gets you the post page. Return false. Okay and then else if and then is single. That applies to every single post. So if is single return false and then else return.

What you’ve done here is you’ve asked, “Is it the blog page?” which is if is home then return false. Else, if it’s a single post, return false. Else, return true. Then you do the add filter and then this is Thesis sidebars filter or something like that. Okay, where is the Thesis filter? Filters, here we go. So it is Thesis show sidebars. Okay so Thesis show sidebars and then it’s the name of this.

Okay what happens here then is at this filter, it will run this function and if it’s the homepage, return false which means no sidebars will show. Else, if it’s single, return false which means no sidebars will show. Else, that is in every other condition, return true. So this gets rid of the sidebars.

However, the next thing you need to add is another filter to the content. That is really, almost exactly the same thing.

Member:  By the content, you mean the rest of the website or you mean the content…

Rick:  No,  I mean the content that you want to be full width. So BYOB, full width no sidebars full width filter. And if is home… actually, we have to get the content filter first and take the content filter. Let’s see, content classes. Okay, Thesis content classes is the filter. So in this case then, it is… I’m sorry, I’m drawing a very brief little blank here.

Member:  No problem, no problem. In the mean time, I’m going to also look up where I thought I had to be in there.

Rick:  Okay, this is it here. Okay so we put classes in here. Classes if is and then we’ll say classes equals classes and then if it’s home, classes equals… actually it’s plus equals. It’s not plus equals. It’s actually an array. So classes equals full width. Is it full width or is it no sidebars? What’s that class again?

Member:  I don’t know. I should have done my homework a little better for you here.

Rick:  No, that’s okay. I’m going to get there in right now.

Member:  I found it on the… okay.

Rick:  Okay so this is no sidebars. That’s the class. No sidebars.

Member:  Okay.

Rick:  So not full width but no sidebars. So if it’s home, classes equals no sidebars. Else, if it’s single, classes equals no sidebars and then we’d get rid of this else. Now we just end up with return, return to classes. Okay so what happens is… oh and then we need the Thesis content classes filter, is that right?

Member:  I think so.

Rick:  Thesis content classes, okay. And actually, you don’t need that CSS code because Thesis already has a definition for this no sidebars.

Member:  Okay.

Rick:  You don’t need that. You could eliminate that and all you’d really need is these two functions. So one function removes the sidebar and the other function makes the content, adds no sidebars to the content class.

Member:  Okay. This is affecting the post pages, right? Not the regular pages.

Rick:  This affects the home which is the blog posts page and it affects single posts only.

Member:  Single posts, okay. And then you know, really quick on the category and I showed you the listing of all those..

Rick:  Those are archive pages. It won’t apply to those.

Member:  Okay. I think that’s how I usually show like if I make it a news and I make everything else a subcategory to that, to the parent category for a post, I have it be that way. But I don’t usually use the home class for the…

Rick:  Well there wouldn’t be any reason for you to have all your blog posts categorized as news and then look at your news archive page. If you did that, it would essentially be ignoring the ordinary WordPress behavior which does that for you automatically.

Member:  Okay.

Rick:  I mean, what the blog page does automatically is show all of your posts. That’s what it does by definition. So all you have to do is specify which page you want to be your post page and that is home. In WordPress speak, is home is “Is it your post page?” And if it’s your post page then this stuff happens. But unless you wanted it on regular category archive pages and if you did want it on regular category archive pages, you could add another else if and just say else if is archive.

Member:  Oh okay.

Rick:  And then it would apply to all category tag, author, date, archives.

Member:  I see. So when you were talking about archives, you’re talking about the screen that shows a listing like that type of thing or are you talking about the thing that looks kind of like the home page but it’s just under that category?

Rick:  An archive is a listing of all the posts in a given taxonomy. So a given category, a given tag, a given whatever. If we’re at my blog and we select one of these categories down here… you know what? I don’t have any categories on here right now. But if you select a category, it will show you all the posts in that category and that thing is an archive page, category archive.

Member:  Oh okay.

Rick:  Okay, Lesson Subjects on my site, that’s a taxonomy and this Lesson Subjects with a term website design is a taxonomy archive page. It shows every post, everything on my site that is related to this website design question. Now, mine is way more complicated than just tags and categories but it’s exactly the same thing. When you click on one of these things, it brings up an automatically generated archive page and it could be a category archive or a tag archive or a custom taxonomy archive or date archive or an author archive. Any page that shows all of the posts associated with a certain thing is an archive page.

Member:  I understand. I guess I’m using my archives a lot so I use a multi-category thing. I use a… for the category cloud on the bottom so that they can…

Rick:  Yeah. Okay well I will post this code for you in the forum, under the Live Answer Code section so that you can have it at the end of the session.

Member:  That would be wonderful. Could I ask you to add the archive thing on there, if you don’t mind? So the filter… the added filter, else if archive?

Rick:  Sure. So you could say if is single, if is home, if is single and then essentially if is archive. And you don’t need to do anything to your custom CSS to do this. You don’t need to specify the width of 940 pixels. It will automatically take the width that you have defined as your page width.

Member:  Okay.

Rick:  Okay?

Member:  I think that’s a really good job. I’m just trying to put this all up. Thank you so much.

Rick:  You’re welcome. Talk to you later.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment