Build Your Own Business Website header image

How to Use Post Formats in Thesis – Part 4 – Add Custom Body Class

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

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 part 4 of this series on Using Post Formats in Thesis, we add a custom body class to the post format so that you can add different styles to a specific format. Code used in this lesson is shown below.

Code used in this lesson

<div class="sfcode">
<pre class="brush-php syntax">function custom_post_format_body_class($classes) {
$classes = $classes;
if ( has_post_format( 'aside' )){
$classes[] .= 'format-aside';
if ( has_post_format( 'quote' )){
$classes[] .= 'format-quote';
if ( has_post_format( 'link' )){
$classes[] .= 'format-link';

return $classes;
add_filter('thesis_body_classes', 'custom_post_format_body_class');</pre>

Video Transcript

Rick: And if we view the page source and look at our body class, this has the body class of custom which means it’s going to be difficult for you to say, have an aside kidn of style. So what we can do then in that case is add the custom body class to this and I would do that with code myself. We can also do it otherwise. But to do that with code, what you would do is you would create a function like I’ve done here, custom post format body classes. This is a filter. This is a Thesis filter that allows you to add things to that body class.

Now if this was vanilla WordPress, if you were working for example, in 2011 theme right now, WordPress automatically would add that format aside class to the display of the post format. So this little term here, this exact format-aside class would be added to the body class in vanilla WordPress. So what we’re doing is here is we’re just taking this vanilla WordPress behavior and we’re applying to Thesis.

And so the first thing we do is this filter captures a variable called classes and we’re just making sure that we take the value of this variable and place it again in the variable with the same name. So classes = classes and then we aks the question, “If it’s a single…” then we’re going to add a body class to this. And then we say… so if it is a single and if it has post format aside then add format aside. If it has a post format quote then add format quote. And if it has a post format… oh, this should be link here… link then add the format link to it. And then what happens is classes is an array. This little variable is an array and so this adds a new element to that array. This adds a new element to the end which is essentially classes array with a concactenation symbol and then the new value for the last element of that array. And then we return the value of classes.

Now if it’s not a single, the return value of classes is the same as the value as it came in. The return value of classes only changes, in this case, if it’s a single post and if it’s one of these 3 post formats. And then what we do is we add to the Thesis body classes filter, our new filter which is custom post format body classes. So now what we’re going to do is copy this and then come back over and paste it here. So custom post format body classes, save it, upload it and now when we refresh this, we’re going to have a new body class added to this page. So if we view our page source, scroll down, now you can see it’s got custom and then format aside associated with it which means now you can make a change to the style of this class or this type of post format using custom CSS.

So if we open up Firefox, I’m just going to give you a quick little example of that. Okay if we open up Firefox… okay and then edit CSS and we come to custom CSS and we scroll down here to the bottom and say .custom .format-aside. And then now we could say… oh let’s see, let’s just say format text… .format_text. Now what we can do is we can… let’s just say we make the text red and italic. Color: red and then font style: italic.

Okay so now what you’ve done is you have a… you’ve created a post format-specific kind of CSS that will only apply to… well, let’s make it only apply to the p tag now. There we go, so it doesn’t apply to our little h2 but it does apply to the p. And I wonder why it doesn’t apply to that. I must have a different tag aroudn it or something. Must be. But nevertheless, it gives you a way of styling you know, this entirely separately from all of the rest of the post formats or all of the rest of the styles your site. So copy that… well actually… okay, Rachel? So does that make sense, Rachel?

Rachel: Yeah, that’s pretty cool. Yeah, yeah.

Rick: And obviously, there’s a whole bunch of other stuff that you could do, right? I mean, there’s just… but this is sort of the underlying concept where what you can do is… what happened to that? You know, this has little symbols that you had next to it and you know, you can… this one doesn’t have tags and this one does have tags and you know, all the rest of that stuff. You can set all of that kind of thing in Thesis using a combination of the custom loop API, the custom body classes and then post formats. And so… and at that point, it’s as easy as you could possibly want it to be to switch between styles for this post because you could say, “Oh, well this one is in aside. Now let’s make this one a gallery or whatever.” And you know, the WordPress gods would probably frown on you using the gallery style for something that’s not a gallery. But you know, it’s your website. You can do whatever you want with it.

Rachel: Yeah.

But in any case, Thesis standard post formats and if you enable them then you can select them from the post screen. And once you’ve done that, you can use the custom loop API and the custom body classes to completely restyle the way the content is displayed and what content actually is displayed.

Rachel: Right, right. Okay, cool. That’s perfect. That’s what I want.

Rick: Okay. Well, I’m glad that’s what you were looking for.

Rachel: So can you send me the code that you were working on?

Rick: Yes, I will post that whole block of code in the forum here when we’re done with this.

Rachel: Okay, great. Perfect. Thank you so much.

Rick: You betcha. I’ll talk to you later.

0 Comments… add one
0 comments… add one

Leave a Comment