The member asks if he needs to use custom templates in order to create a site where each page has similar structure but with different colors. We discuss the various methods of customization of a Thesis website. I describe the 3 types of customization available in Thesis:
- Customizing using custom classes and CSS
- Customizing using hooks and filters
- Customizing using custom templates
We look at two important aspects of his questions, namely “how do you customize a blog page?” and “how do you manage a website having the same structure but with different appearances?” This conversation includes:
- Discussion on Thesis Template Decision Tree
- Short overview of the template functionality of WordPress 3.1 and Thesis Theme 1.8
- Discussion on hooks and custom class to manipulate your website
- Using filters in custom templates
Rick: So in a moment here, I’m going to ask you to tell me… in a moment, I’m going to ask you to tell me or talk to me about what kinds of changes you want to see in a custom template. Because with the advent of Thesis 1.8, there’s an awful lot of customization that couldn’t be done before, that does not require the use of it. And so before I get any further with that, I’m going to start off… Jed, I’m going to start off with you, actually. And un-mute your microphone so you can tell me what you want to do with the custom template. Okay Jed, can you hear me?
Jed: Yes, I can.
Rick: Great. Could you just make sure you talk loudly as you do this because I can’t hear you very well. Go ahead.
Jed: Okay so I don’t necessarily have anything specific in mind. I just have seen sites and I guess I didn’t… I probably should’ve come up with an example where I just… a page within a site looks quite different visually aesthetically than another page, right? I assumed that it has to do with this custom template and you know, I’m pretty handy with certain CSS changes and you know, with the training that you provide as well as some other stuff around the web.
I kind of get the basics of putting functions in and you know, creating differences like that. But I just was… this is one thing that I just hadn’t explored yet and I know… and I don’t know if this site…I’ll have to see if I can find it real quick. I’ll give you an example but basically, every single page that you click on is a different color. It’s a similar background but its shade is different and it just has a pretty unique effect to it. And I going to think that I’m going to do that but it just gave me this idea that there’s a lot more flexibility as it concerns the look of a website that is possible without necessarily being a you know, trained web designer.
Jed: That’s probably the beauty of Thesis. But then again, I don’t even know if that site was Thesis-related. I didn’t even look at that but it just gave me that idea. And then I guess a specific issue that I was having was maybe a problem with the site is one site that I’ve helped somebody with. I’m unable, for some reason, and maybe this is by design and I just don’t understand it but I have it set up so that the front page is not the blog but the blog is, obviously it’s a separate page and I set it up so it appears on the page that’s called Blog. I can’t eliminate sidebars from that blog page to make it a nice, open… because in this case, these folks wanted real big sidebars and the content column is super narrow. It’s okay for what they want for many cases but on the blog, it doesn’t look right because the content is squeezed in into a very small column. And so I thought it should be as simple as calling that a “no sidebars” template but it’s not working. So I need to know if that was by design or if that has something to do with the site there. And if so, maybe I can create a custom template that eliminates that.
Rick: Well, that’s a… you’ve actually raised 2 very interesting subjects in this area of customization. And the 1st one is if you have the similar structure on a site, how do you vary up the appearance of it while still you know, essentially having the same structure? And the other one is how do you customize the blog page? Because the one problem with this thing here is that since Thesis asked a question: “Is it a page?” very first. If it’s a homepage, it’s not a page. If it’s the homepage, it doesn’t have any triggers for customization. There’s no longer any trigger to let you… anything to hook a customization on to. Whereas…
Jed: Not even with the basic dropdown of a no sidebar…
Rick: Exactly. Because it doesn’t ask you the question about “no sidebars”. I mean, even if you got a no sidebars there. Well, even if you’ve got a no sidebars option on that page itself, when the question is being asked, “Is it a page?” it ignores that setting because it’s not a page. It’s a home. And so, even if you’ve set that what you think of as a page to “no sidebars”, WordPress thinks of it as a homepage. And since WordPress thinks of it as a homepage, the answer to this question is no. And since it’s NO, it never again asks whether or not it’s some kind of a template because it’s not some kind of a template, it’s a homepage. However, there is a way to do what you want to do and it actually is fairly easy in the context of Thesis 1.8. It didn’t use to be easy but it is easy now.
What this does is that wraps this question about custom templates up into I think, one sensitive area which is how do you customize the homepage and how do you customize single post pages? Because Thesis customization up through 1.8 really only allows you to customize for a page. It didn’t provide any opportunity for customization of home and provided really only a couple of mechanisms for customizing a single post. And in that sort of a nature of this decision matrix where it asks if it’s a page first and when it says, “Yes, it’s a page.” Then all of this customization is available. And when it says, “No” then you only have a couple of classes of customization available.
Jed: And is that because the ability to create you know, the “Yes” option from pages of the whole tree that goes on from the page if the answer is yes, is it difficult to cause that same matrix or whatever you want to call it, to each one of the below options as well? To the home to post category? Is that a…
Rick: Well you know, I don’t think it is difficult necessarily. WordPress 3.1 will be introducing the ability to have custom post templates. Before WordPress 3.1, if you wanted to have a custom template for a single post, any kind of a single post, you had to use a plugin that did some special stuff. In WordPress 3.1, that plugin may not be necessary and you may be able to define post-templates as individual elements just like you could page templates. But because posts were always assumed to be the same in WordPress, Thesis just continued that and you know, I think, yes it’s theoretically possible for Thesis to have, inside this decision matrix, you know, if it’s page, “Is it custom? If it’s home, is it custom? If it’s a post, is it custom?” But it’s not built that way currently.
However, what I think of as 3 different classes of… or levels or mechanisms for customizing the appearance of a site in Thesis. And you have the 1st thing that Thesis ever came up with was hooks. And so you can customize any post and at the homepage, any page, anything that WordPress can identify as a uniquely published page. So category, archives, 404 pages, any of those things… you can customize those by hooking something to that page. So for example, you could hook a new sidebar to the bottom of any one of these pages. Or any one of these… we’re going to call them pages but we use that page in that context is different than this page, right? You can hook you know, anything to any of those hooks regardless of whether it’s a homepage, a post page, a category, an archive or some other kind of archive.
And so you have that 1st level of customization where you can hook something into it. Then you have the 2nd level of customization which Thesis adopted fairly early on which was the custom class. And as it is, every single… again, every single iteration of a potential page is assigned a custom class and automatically by Thesis. And so you can see that, for example, if we look at the source of this page… view page source. And right here at the top of my body class = custom, isn’t that interesting? Well there you… that is interesting. Actually I was expecting there to be one other element beyond that. I was expecting it there to be another addition on to this body class = custom that is not there. Let’s see, let’s go to video lessons. Page source and look at… yes, okay. I see. So you can see here that it is custom and then space video lessons and these are 2 different classes that have been added to the definition of this page.
And so if we go back over and we look at how that might be applied in… that’s the automatic thing. So I could automatically say, in a custom CSS, I could say you know, .custom .video lessons and then something else. You know, some other selector to change and it would change it only on this page. So for example, let’s just look at that in Firefox just for grins. This is maybe getting a little off field. But you have this one… well, while Firefox is running… you have this Thesis custom body class. It gives you a chance to do the thing you were asking for at the beginning which is essentially, have a different color for every page.
If we just bring up that page, here’s that custom body class. Custom video-tutorials and so if I want to say, make this title different on this page but not on any other page, that is my h1. And so what I would do then is edit CSS, custom CSS. And then I could down here say, .custom or and then .video-tutorials which is the custom class that Thesis has assigned to this page. And then say, .headline_area h1 and then I could just say you know, I could just say color:red;. See how that’s changed that? Because I assigned this body class, that is custom.video-tutorials, which is the body class that Thesis has assigned to this page, I can identify one specific selector or any individual selector and make it different than the rest of the site. And if I took that out and I made it just .custom, what happens here is every headline h1 tag goes read on the site because every single page on the site has .custom in front of it. But when I add that .video-tutorials, then only this page will have it and no other page will have that property for that selector.
Jed: And the headline_area that you have in there, is that so that if you have an h1 tag somewhere else in the body, it doesn’t affect it there?
Rick: Yes, that’s right. And you could just do that but you shouldn’t have any h1 further down, it’s true. If it was an h3 and if this was the sidebars, I don’t even have an h3 on this page. But if we did h3 just like this, it would affect the sidebars and the content both. And you probably don’t want to do that for both sidebars and content so in that case, you wouldn’t use headline_area but you’d use format text, for example, as the selector. You know, just making the selector more specific.
Jed: I see
Rick: So that is… this is the default way, the automatic way to have styles that apply specifically to different pages or posts. However, there is also another way and that is for you to assign it yourself. So if we go to for example, to a post and let’s see… how to create content-sensitive sidebars…there’s my post. We edit that post and we come down here to SEO Details and Additional Style. I can add a custom CSS class right here. So I can say test, okay. That’s now a class called a “test” where if I… well, I’m just going to go ahead and update that. And then while that’s updating, we’re going to go over and take a look at that specific page and we’ll look at that post.
And now you can see that test has been added to this… to my custom class. So I could easily do the same thing as we did before, right? And I can put test in a bunch of different pages so all of my test pages could have this specific style. So now .custom.test and then we could do… oh .custom.test h1 color:blue, right? That will affect only this page again, right? Or only this single post again because I assigned the custom class of “test” inside the post itself. And if I… under… yeah, right here under CSS class. And so if you want to repeat it several times so you don’t want it just to be page specific, then you put your custom class in here and Thesis will put that class attached to the page and then anything you assign to that selector will get this test. Okay, so that’s….
Jed: You wouldn’t necessarily put anything there… if you had customizations you want done just to that page, you just let Thesis assign its normal class and do it that way, right?
Rick: Yes, that’s right. Well only to be as a specific page, yes. So that’s the 2nd level of customization and neither of those 2 levels right, either hooks or Thesis custom class, requires you to have a custom template. They’re completely independent of custom templates. Then you have 3rd level of customization which is the custom template itself. And the 3rd level of customization is reserved only for pages on the way Thesis is currently designed. Now I misspoke at the very beginning of this though, when I said there are 3 sorts of classes of changes, one of them is hooks. What I should’ve said was one of them was hooks and filters because it’s via a filter that you are going to remove the sidebars from your homepage. And if we go over to DIY Themes and go to the User Guide, and let’s see… I guess we’re going to have to search for it. Let’s see… no sidebar filter…remove sidebars on homepage. There we go. So…
Jed: Even if your blog is an inch?
Rick: This will work regardless because…well, in the first place, is home always addresses the blog page regardless of what you call it.
Jed: Regardless of where it is?
Rick: And regardless of where it is. If you called home, this question is home, is answered by this setting. If you look at reading settings and it says, “Your front page display is a static page”, so your post pages, whichever page you select, whichever page you select here, that is home as far as WordPress is concerned. And so when you say, “It is home”, it will always be the blog page. If you change your blog page in that settings, this will apply to the changed page. It won’t apply to the same page as it was applied to before. It always asks the question if it’s home. And so what you do here is if it’s home, then you return false else, return true. And then you add this filter: Thesis show sidebars and the no sidebars. And so the filter is “Thesis show sidebars” and the answer is “no sidebars” and when you return false, then the “no sidebars” is what gets displayed. And if you return true, then sidebars are displayed. And then all you have to do is add this custom class to the home so that the home ends up with the CSS definition for a no sidebars template so that the content spans all the way across.
So actually, if you just cut and paste this code into your custom functions_php file, you will no longer have sidebars on your homepage. It’s very simple to do that.
Jed: Okay, great.
Rick: So okay. So the… let’s see…just looking at these questions over here.