The next thing we need to do is begin styling this front page. We setup a bunch of Thesis Design Options that work for our typical page so we’ve got our color, our headlines and things like that that work just fine for our typical page but don’t work with the front page.
Style the Front Page
We need to find a way to distinguish between the front page and all the other pages plus you can see this layout is dependent upon us using the no sidebars template. If we come back over here and switch to edit page, instead of taking no sidebars, we use default and look at the page. Now we have this essentially the wrong style of front page here.
The chances are when somebody uses your theme, they are going to create their front page and unless you tell them specifically, they need to use the no sidebars template. They’re going to say, “hey, how come my home page doesn’t look right? because it doesn’t look right to me now”. What we’re going to do is force the home page to take this no sidebars template.
Now, we could choose not to do that. We could give them the flexibility of using the standard template on the home page versus using our nicely designed template but we’re not going to do that, we’re going to force them to make that choice. Then we’re also going to need to add some front page specific styling.
Add Custom Body Class
You probably already know that Thesis automatically creates body classes for pages. If we view the page source here and come down to body, you can see that here’s our custom body class, it’s custom then it takes the “learn-to-build-a-website-just-like-this” which is my title of this and it places that as a custom body class then it adds home here.
Now, we could use this home as a styling mechanism except that it also ends up being applied to the posts page if the posts page is the home page. What I really want to do is add a custom body class that does not reference home and is not dependent upon a specific page title but instead, references what we’re doing with the static front page. We’re also going to add a custom body class.
There are two things we’re doing here, we are going to remove the sidebar from the front page and we’re going to add a custom body class to the front page so that we can style it the way we want. We’re going to do that with Thesis filters.
What is a Filter?
A filter is actually a WordPress function and it’s a system whereby you can capture and modify some value or some content. Now, you can capture the value and subtract from it, you can capture the value and replace it with the whole new value, you can capture the value and augment it. There are lots and lots of different filters and some filters act like switches. Thesis has a bunch of filters that act like switches.
Thesis Show Sidebars Filter
The first filter that we’re going to talk about is the Thesis show sidebars filter which acts exactly like a switch, that is, it’s either on or it’s off, it’s either true or it’s false. Now, the way filters work is that when you add a filter, what you’re doing is passing the value of that filter into your function. You have the opportunity to modify, change or whatever that filter and it returns the new value back to the place where the filter was created, so back into either Thesis or WordPress.
We’re going to look at that with the Thesis show sidebars filter first. If we come over here and look at the Thesis show sidebars filter, this looks for either true or false. If the filter says true, then it displays sidebars and if the filter says false, then it doesn’t display sidebars and it adds a no sidebars class to the content, that’s Thesis behavior.
Thesis has this filter that acts like a switch and it’s by default always true so what you’re going to do is capture that filter of the value of which is true. If you don’t want the sidebars, you’re going to change that true to false and return false back to the value.
Remove Sidebars Filter
We’re going to copy this and come to our front_page_html and in this section, we’ll paste that code and say, crtc_remove_front_sidebars and we’re going to get rid of the conditional statement here because the only thing this thing is going to do if we call it, is it’s going to return false. If we call crtc_remove_front_sidebars, it’s going to return false and we’re going to take this filter. Rather than having it sit out here, we are going to come up into our function and we’re going to add the filter.
The name of the filter is thesis_show_sidebars so add_filter (‘thesis_show-sidebars’, and our function that’s acting on that is ‘crtc_remove_front_sidebars’ so it’s grabbing the filter and it is returning false. That’s the only thing this is going to do, you could ask if but it doesn’t make any sense because the if statements are already up here.
If it’s the front page, then it’s going to use this filter, return false to the thesis_show_sidebars and no sidebars are going to show up. That’s the first filter, let’s upload the function, come back over to our page and refresh this. Now the sidebar is gone and all the styling that was associated with that content is gone.
Add Custom Body Class
We’re going to do exactly the same thing now with the Thesis body class. If we again look up here at our Thesis body class, it’s custom learn-to-build-a-website-just-like-this home. Actually, customize-support, it must be coming from this plugin itself and not actually be present on the site. Let’s just look at the page source, look at the actual source here for a second. Right, it doesn’t exist in the source, that’s something that when you click inspect element, this feature adds the body for whatever reason.
We’ve added our no_sidebars filter, now we’re going to add a custom body class. A custom body class works a bit differently than does the no_sidebars filter or the show_sidebars filter and the Thesis body class filter returns an array. An array is a list of pieces of information in this case and for Thesis body classes it returns an array of classes.
If we were to look at the array for this page here, that would be displaying a custom as the first element in the array and “learn-to-build-a-website-just-like-this” is a second element in the array then it would say home as the third element in the array. It uses that to construct this custom body class, custom learn-to-build-a-website-just-like-this and home, those are 3 separate classes in the body class array that Thesis adds.
Place Value of the Filter to the Variable
What we’re going to do is add an additional class to that array. That additional class we’re going to add is front_page. If we look at Thesis body classes, we’ll just come back over here again, copy this, we’ll do this filter here and paste that. Now, this is going to be the crtc_front_body_page-class.
The way filters work is if you put a value here, that automatically puts the value of the filter in this variable name. It doesn’t matter what the variable name is, this could be fishsticks but it takes the value of the filter, places it in this variable then you can mess about with the variable here.
In this case, what you have is classes with our array brackets. This means that you’re going to add a new element to the array which is my class. If it didn’t have these brackets, it would try to add my class to one of the elements in the array which sucks. Since we know it’s in array, we’re going to use the array brackets with this concatenation symbol which means that it’s going to add a new element to the array rather than adding this to an existing element.
Add Filter Statement to the Controller
We’re not going to use my class, we’re going to use front page. Now that class has been changed so we’re going to return classes. These classes used to have 3 elements in the array and now it’s going to have a fourth one which is going to be front_page. Again, we’re going to take our add_filter statement and we’re going to put it up in our controller.
We’re going to take the real name of this, crtc_front_page_body_class. The way this works is if it’s the front page, we’re going to add the filter to the Thesis body class filter. This function, what it does is add front_page to that Thesis body class filter and it returns that. We’re going to save it, upload it, come over to our page and refresh it. If you look at the page source, you can see that in our body, we have added front_page.
Now it’s got 4 elements, custom, learn-to-build-a-website-just-like-this, home and front_page. You can see that doesn’t exist on any other page. We’ll come to our About Us and view the page source and in our About Us, it’s custom customer-centric-about. If we come over to our Articles and view our page source, in our Articles it just has custom. You can see that what we did is only being applied correctly to our front page.