Build Your Own Business Website header image

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.

Lesson 5 – Part 3 – Apply Styling to Groups of Pages, Posts and Archives

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the 3rd part of Lesson 5 of the Customize Thesis Like a Pro tutorial series. In this 3rd and final part of the lesson, we are going to use the custom body class to apply styling to groups of pages and posts based on that custom body class.

Vary Header Image for a Specific Category of Posts Using Custom Body Class

We’re going to start off with the green apples banner. We have the green apples banner currently applying itself to the green apples archive. But I think it would also be a good idea if we applied the banner to all the posts inside of green apples. So we’re going to take this custom body class that the Thesis theme created and attach it to all various posts. This same styling that we’ve created will then apply to those posts.

The Thesis custom body class in this case was cat_green-apples. So let’s copy that and then come back over to our site. Go to our dashboard and we’ll go to Posts and let’s look at every post in the green apples category. We’ll apply styling here. I’ve got these 3 so let’s edit the Irish Peach one first. Scroll down here to custom css class and we’re going to paste that there. We come up, update it and then we’ll go back to that page again and update the next one. Green apples, update it, and we’ll go back to the 3rd one. Okay and let’s go ahead and look at the post.

View the Thesis post and here we are at Granny Smith apples and we have applied the styling –  it’s got the banner. If we go to green apples, it’s got the banner. If we go to Newton Pippin, it’s got the banner. Back to green apples, Irish Peach. So we’ve got this custom class that we have applied both to all of the green apples posts and also the green apples category and we could do that to each of these different kinds of posts or these categories of posts if we wanted to have a category specific banner that showed up on all posts in the category and on the category archive itself.

Vary Header Image for a Group of Pages Using Custom Body Class

The final one of these we’re going to change is taking a group of pages and apply a custom class to those groups of pages. If you remember, in demo 1, when we edited the page we gave it this custom class of red-group. So we’re going to take demo 1, let’s see, demo 2…well, that was the unique one, wasn’t it?  We go to demo 3 and edit the page and assign that class, red group, update. We’ll go back to the site, demo 4, edit the page, paste that in there, and update it. And now, we have assigned that Thesis custom class to 3 specific pages.

The only thing we have left to do is to  write the css to apply to those specific pages to apply the styling. So we’ll go ahead and copy this again and here, we’re just going to say red-group. So it’s red-group logo. The background URL is going to be a different image. We come back over to Images and it is redgroup.jpg, so we’ll copy that. Come back over to our custom css file, replace the image name with the correct one, save the document, upload it, and then view it.

So demo 1, there it is, red-group. Demo 3, 4, and 5 go back to the traditional. Demo 2 is the unique. The blog is going to be the traditional. Green apples is going to be unique. Bananas will be traditional. The individual banana posts will be traditional. And so, we have a way of assigning different css to individual pages and to different pages depending upon what custom class they have. And while I’ve used this example with headers, this is actually the case for everything. You can change the way the navigation bar is styled based on custom class, you can change the style of text and heading, you can change everything in terms of how the page looks. What you can change in css, you can change on a page using that custom body class.

And so that wraps up Lesson 5, Using the Custom Body Class in Thesis to Apply Styling to Groups of Pages and Posts.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
5 Comments… add one
5 comments… add one
  • Philippe Zamor May 14, 2011, 11:19 am

    I just jumped on board with your site and this lesson was the first one I looked at and WOW; very nicely explained, nicely detailed with and easy to understand language.

    I really am happy with my Investment.

    Looking forwards in answering all my questions in regards to Thesis and many other things about WP et al. Very Good Job Rick.

    If definitely shows that you put a lot of love in your site.

    Thanks
    Philippe

    • Rick Anderson May 15, 2011, 10:41 am

      Welcome to the site! I’m delighted you’ve already found it useful.

  • David Voelker April 2, 2012, 5:26 am

    Rick –

    I just had one of those a-ha moments with Thesis and solved a problem that had been difficult to chase down thanks to this series.

    I appreciate what you have done here, this has saved me time and money.

    • Rick Anderson April 3, 2012, 6:38 am

      That’s great David, I’m glad you’ve found the site to be useful

  • kunle biglawal December 6, 2012, 8:47 am

    Great video.Understood every bit of it. everything becomes clearer to me now. Thanks Rick.

Leave a Comment