Add Sidebar 2 to the Top of the Content Area in the Custom Template
Welcome back to the fifth and final part of Lesson 3 of the Customize Thesis Like a Pro tutorial series. In this lesson we are going to add a second sidebar above both the content part of the page and also sidebar #1 so it spans all the way across the top of this page. Similar to what you could see right here, right in this illustration of the post, you can see that we’ve got this Default Widget, that’s sidebar #2 stretching across.
The way that we do that is that before thesis_sidebars and before the thesis_page_loop we are going to put sidebar #2. So let’s go ahead and open up our editor again. And we’re going to look at this sidebars.php file that comes out of Thesis and the function that we’re going to put back in here is called thesis sidebar_2 and that brings up the thesis_hook_before_sidebar_2, and the thesis_default_widget_2 and the thesis_hook_after_sidebar_2. So we’re going to copy that and then we are going to come over to our custom_functions.php file. And then before our content we’re going to paste it with a semi-colon afterward.
Adding Additional HTML Structure for the Sidebar
Now we want to add a bit of custom HTML structure to this as well because we want to be able to control what its size and configuration is and right now we don’t have a good handle on it. So let’s give ourselves one more space here and we’re going to say echo, div, class= and we’re going to create our own new custom CSS class for this. And that custom class is going to be content_top_widget_area. That will be the name of our custom class and so we’ll put a closing div tag there. And then by current best practice widgets end up being li items of an unordered list. And so Thesis has this unordered list style called sidebar list and we want to put our widgets inside of that so that the styling stays the same.
What we will do here is create a ul and then it’s going to be class=sidebar_list, and we’ll go ahead and close that up. And then we’re going to come down and give ourselves another space and close these divs off. So we’ll say echo and add some quotation marks and then we’ll put the closing ul tag and the closing div tag in and then we’ll step outside the quotation marks and close the command with a semi-colon.
You’ll notice here that we’ve created this div with a class of content_top_widget_area and then inside of that we have added Thesis’ standard ul with a class of sidebar list and from now on every widget that’s put in here will get an li of widget and so it will keep the traditional Thesis styling.
Customizing CSS for the Sidebar
Let’s give it a try. We’ll open it up. Let’s upload this, then refresh the file. Wow, there we go. So we have success. We have this widget area here now that goes all the way across both of these things. And we can adjust the CSS so that we don’t have as big a gap here. But I want to whip over here into the Thesis Admin section for a second and if we go to Widgets under Appearance – widgets and under Sidebar 2 you know we could put a calendar in there for the moment. If we go back to our page once we’ve done that there’s our calendar. And since the space is big the calendar just stretches all the way across. But that’s just the peculiar behavior of this widget in particular. But you could easily imagine putting a content slider up here or some kind of special text or some images or what have you. There are a lot of things that could be done of course with this.
Now we’re going to take this widget area and instead of having it span all the way across the top we’re going to move it so that it just sits on top of the content box so that you can see how versatile this system is. We’ll open up and edit our custom_functions.php file and we’re going to take those three lines that we created and cut those out of there. And then we are going to go just after the thesis_hook_before_content, give ourselves a line, paste those there. Now we’ll save that document and we’ll upload this and we’ll refresh our screen. And now you can see that this widget area fills up only over the Static Home Page. Well we still have our “Hello World” there; we want to get rid of that as well. And maybe if we come back over here to the widgets and we drag our widget off of here and we get our little default one back taking up the space.
Benefits of Retaining Native Thesis Structure
So now here is the great benefit of using the native Thesis functions when we are creating our custom page. First off the styling stays the same. In the second place a lot of the functionality like the commenting functionality and that kind of stuff will stay the same. The widget styling will end up remaining the same if we use the same kind of structures which makes customizing it quite a bit easier. If every time you use a custom page and you have to recreate all of your own content from scratch, that’s custom CSS and custom functionality that you have to build back in rather than what we’ve done here which is kept as much Thesis functionality as possible while at the same time creating the custom page that we needed. This is as difficult as creating a custom page is: just create the function, test to see if it’s the correct page and then build your functionality back into it. It’s amazing how little code you need in order to reuse the native functionality in a custom way.
And that wraps up Lesson 3 of the Customize Thesis Like a Pro tutorial series.