This member wants to apply custom CSS statements to all of the pages that use a specific custom template. We discuss how to do that using Thesis custom body classes. Thesis has a built in system of adding a specific CSS class to any individual page. We use the Thesis SEO Details and Additional Style to accomplish this. We also look at the correct syntax for accomplishing this.
Select the link below to watch a high definition version of this video
[S3VIDEO file=’public/liveanswers/LA12-20-10a1-custom-templates-part3.mp4′ bgimage=’https://www.byobwebsite.com/wp-content/uploads/2011/02/LA12-20-10a1-custom-templates-part3.jpg’ displaymode=’overlay’]
Jason: This looks like it answers…
Rick: Did I lose you?
Jason: … for different pages, yes? So I would have to go to the custom file like you just did and then identify the different formats that I want for each individual page using that template. Is that right?
Rick: Well the easiest thing to do would be to go into your… I’m going to make you a presenter here so that you can go into this page and we can see what you’re doing. So you are now a presenter and what I want you to do is share your screen and then go into your dashboard and go that specific page to edit that page and I’ll show you how to handle that. In the meantime, while you’re doing that, I’m going to email you this code so that you can stick it in there. So go to your dashboard, your WordPress dashboard there Jason, and then I’m going to turn your microphone back on. You’re back on now.
Jason: Okay. So we’re on the page, in my dashboard
Rick: So now scroll down in there
Jason: I’m here
Rick: Yeah, stop there. You went too far now. You’re right there, css class. If you were to put a name there say, I mean I don’t know. If you had a name for that custom template and you put that name in here, we could substitute that short name for the page name in the custom class that we put in the CSS file. And then all you’d have to do is add that css class to this box every time you wanted to use that specific template. Does that make sense? Go ahead and put a name in there.
Jason: Not entirely
Rick: Do it and I’ll show you
Jason: Okay. Show me exactly what to do. So what do I do here?
Rick: Put some class name in there
Jason: So we can call this… so the class will basically identify the template itself?
Jason: Okay so we can call it landing page
Jason: I’ve already done that at one point. Well, okay
Rick: Although, it shouldn’t look like that. This is css class so it should be landing-page and it should be lowercase just like… yeah. Landing-page… okay so go ahead and save that page and once it’s been saved, what I’m going to do is I’m going to refresh it on my browser. So I’m going to take you away from the presenter now. I’m going to stay the presenter, I’m going to show the screen, I’m going to refresh this and let’s just take a look and see whether or not that worked. New page source, no. Did you update your page? Jason, did you update that page?
Jason: I did. I did it again right now, I thought I did. Okay, it’s updated again
Rick: Okay, here it is. Now it says landing page
Jason: Okay, great
Rick: And actually, you can see that that already exists now. This has already been done. I’ll turn your microphone off again. So once upon a time, you knew this information and what you did was, you built a custom class called landing-page and you gave it the content, you floated it left and you gave it a width of 606 pixels. And then the same thing is true with the sidebars. You gave it a width of 320 pixels and then you got rid of that little….well, actually you didn’t get rid of it. You just moved that little image. If I close this to see that image showing up here where we’ve got that line down here and that was because you know, once upon a time you did this. All you need to do is from now on, is to put that custom class landing-page on every page that you want this style applied to. Does that make sense?
Jason: That sounds totally simple. I think that you actually set that up for me Rick, and the piece that I was missing was how to duplicate it page after page
Rick: Okay. So the way you duplicate it page after page is you just add page numbers to that list in your custom functions php file and or page id numbers, right? And then for each one of those pages, when you save it as a custom template, you need to give it that landing-page custom class and it’s going to work for it every time.