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 11 – Part 4 – Add Custom Footer

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to the fourth part of this lesson on creating a fat footer with multiple widget areas in Thesis. In this part of the lesson we’re going to look at how to add the custom footer portion of this. If you want to see what that looks like come back over here to the site. You can see what I have is copyright information then my own attribution and that’s what we’re going to add to this styling here.

Add the HTML Structure

Come over to our Thesis website and open up our custom_functions.php file and in custom_functions.php what we will do here is to create a new function and that’s going to be our custom footer.  Let’s start a function. It will be function byob_custom_footer and then opening and closing parenthesis, opening bracket, closing bracket, give it some space. As we did before we are going to create a wrapping div and then our individual divs. The wrapping div will be for this bottom strip of the custom footer and inside that wrapping div there will be a left and a right portion.

Start by opening up PHP and then we’ll start our wrapping div. Div, say id, equals, byob-footer, outside of that, and then let’s close the div and fix that indentation problem. We’ll give ourselves a bit of space and then inside of this we are going to add another div and this will be the left hand div, div class, equals, byob-footer-left. We won’t put anything there yet, we’ll just add the same thing for right –we can just copy that, paste it, replace left with right. So that’s the HTML structure for making adding a custom footer.

Include Copyright and Attribution Code

Now inside of the HTML structure we’re going to place the code for the copyright and then the code for our own attribution. First, copy the code for our copyright where I already have it working and you can of course copy this from the code below the lesson. Here we are calling a WordPress function called bloginfo and that’s going to put the name there and then it’s going to put the copyright date because that’s what this little php thing means – the copyright date. Then we’re going to echo the date for that copyright date and then we’re going to add the text, All Rghts Reserved. That’s what this string of code means. Regardless of what you’ve called your website, if you use this what’s going to happen is you will put current year in and it will put in the name of your blog.

Then in the footer-right we’re going to put in essentially a basic text link. I’m going to copy again from myself and paste in here. So it’s the Website designed by, then here’s the link to my web design site with the name of that site there. That’s just a standard HTML link. Then we need to add this.

So I’m going to copy this add-action from above, paste it there – add-action, thesis-hook-footer  and then I want to add this byob_custom_footer. We will open up Filezilla and we will paste it – or we’ll upload it, we’ll come over here to our site and refresh it and now you can see that we have the Thesis eStore Lesson 11 – that’s the name of the site, Copyright 2010 – All Rights Reserved and then down here it’s not very easy to read but Website designed by Tailoring the Web.

Remove Admin Link and Thesis Attribution

Now all we have to do is add CSS styling to this to make the custom footer work. Plus I want to get rid of the Thesis attribution and my Admin link. The way we do those last two things is to open up our Dashboard, go to Thesis, Design Options and under that we’ll go to Display Options and down to Administration. Unclick Show Admin link, come back up and save, come back over here and refresh and now that link down here is gone.

Getting rid of this is going to be done inside our custom_functions.php file so open that back up for one last item. We may as well put it right here and we’re going to say remove_action, thesis_hook_footer, over, and then say thesis_attribution. That will remove that link. If we come up here and say save the document, then upload the document and then refresh it you can see that is gone and now Thesis eStore Lesson 11 and that are here.

We need to add the custom CSS. Start by inspecting the element and then we will go ahead and edit CSS – custom.css, go down and so that is – we are going to take our byob-footer. First, come up here to fat-footer-sidebars and we’re going to copy that because we’re going to give this thing the exact same configuration – float:left, width:100% and then we are going to copy byob-footer and we are going to replace this name with that so now it’s byob-footer, float:left, width:100%.

Next inside of that we are going to do very much the same thing so we’ll copy float:left, width:200 pixels. Instead of this grab byob-footer-left, copy it – now this is not an id, it’s a class so we’ll put a period there and then paste that. You can see now it has jumped over to the left and it’s only 200 pixels wide. Let’s make it 300 pixels just to make sure it shows up in one long line. It looks like actually we’re also going to need to give it a text align of left – text-align, colon, left, semi-colon. There we go, now it’s lined up.

Now come over here and give ourselves byob-footer-right and make it float:right and text align right then you can see that has jumped over here to below and now all we need to do is press it down into this green section.

We can do that probably most easily by giving div id=byob-fat-footer-sidebars a height. If we do that it should force this down. Come back up over here and give it height of say 415 pixels. Copy that, grab the whole section now, come back over to custom.css file. Grab that whole section again, paste it, save the document, open Filezilla, upload the document, come back over, close this for a moment, refresh – okay there we go. We’ve got this information there and that one there; we can easily change the color of this text so that it shows up better and you can do that in Thesis Design Options because there is that section where this color was established.

That wraps up Part 4 of this lesson, Add a Custom Footer in Thesis.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment