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 2 – Create the Dynamic Sidebars (Widget Ready Areas)

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.

Build the Dynamic Sidebars

Welcome back to Part 2 of this lesson on creating a footer with dynamic sidebars. In this second part of the lesson we are going to actually create the dynamic sidebars.

Go to WordPress that is wordpress.org and we’ll come up here to search the codex and we are going to search for dynamic sidebars. Okay, Function Reference/dynamic sidebars – go ahead and select it.

The way dynamic sidebar works is that it goes out to see whether or not there is one and whether that sidebar contains any widgets. If it does contain a widget it returns the answer true and displays those widgets. If it doesn’t contain a widget it displays the answer false. I want you to understand what we’re going to do here in just a few minutes then.

Review the Syntax

This is the standard code but if you look down here it says Here is the recommended use of this function. So the recommended use of the function is not using it like this but it is instead to ask the question if there is not a dynamic sidebar then do this. Otherwise it will automatically do what it’s supposed to do with the sidebar.

We are going to use this syntax with it and we are going to do this inside of the context of the Thesis HTML structure. Open up our custom_functions.php file, copy this comment, paste that comment and then this creates the dynamic sidebars. In this case we do need a function so we’re going to say function, we’ll say byob_fat_ function_sidebars and then opening and closing parenthesis, move over to outside of that, put your opening curly bracket, hit Enter, put a closing curly bracket. So here’s the function – oh pardon me, not fat_function but fat_footer_sidebars. There we go, nice descriptive name.

Create the HTML Structure

Now we’re going to start the HTML structure. In order for us to do this we need to escape the PHP and we may as well give ourselves a little bit of space and then return to PHP. So that’s sort of like opening and closing brackets. Then we are going to give ourselves a wrapping div. That is a div that completely encompasses each of these individual ones. So that is going to be div-fat-footer-sidebars. We’re going to create that class and then close that – okay so there’s our main structure.

This is going to wrap everything and now all we have to do is to create a structure for each of our individual widget areas. So create another div and that’s going to be id= and that is going to be byob-footer-sidebar-1 and give it a closing div.

Now we’re ready to add the stuff that goes inside of our dynamic sidebar. As you probably recall the next thing to do is to insert the div id for ul sidebar list. If you don’t recall that come and take a look at this Thesis eStore site. If you inspect the element you can see that under div id=sidebars, under div the next order of organization is ul sidebar_list. This is actually the code that we are going to be using here. We’re going to type in ul  sidebar_list. We’ll copy it anyway. So then that’s ul class, equals, paste that in – sidebar_list, close that off, add the second closing ul tag, hit Enter and now we’re going to add the dynamic code.

This is where we step back into PHP.  That is the opening php tag – let’s go get the code from the codex. Go ahead and take this, copy, come back over, paste – if dynamic sidebar, then an opening bracket and a closing bracket. We need to put the name of it in here now and that name is going to be footer sidebar 1, that’s what we’ll do first. In fact we can just copy this and it should be in single quotes. If (!dynamic_sidebar (‘Footer Sidebar 1’).

Now what’s going to happen here is if there is not a dynamic sidebar then whatever happens in here is going to be done. If there is a one then footer 1, sidebar 1 will be executed.

Insert Thesis Specific Elements

Next we’re going to put the code in that Thesis always uses for this purpose and I have it here. If there’s not a dynamic sidebar Thesis always inserts this li class widget with all of this here. Copy that, come back over here and paste that in. Obviously you’ll be able to get this from the code below this video.

What happens here is we’re going to put Footer Sidebar 1 in here. Copy. In the case of no widgets in the dynamic sidebar footer sidebar 1, then this default behavior of Thesis is going to show up. So that is it completed. We’ve got our ul sidebar_list, we’ve got Footer Sidebar 1 inside of byob_fat_footer_sidebars, then we’ve got our function that calls it.

So we’ve got that for number 1. Of course we’ve got four of these so we are going to  now go up to div id, Footer Sidebar 1 and copy all of that and paste it four times. One, two, three, four – and then we are going to change Footer Sidebar 1 to 4 and 4 and 4 and then the next one up with be 3, the next one up will be 2. We need a total of 4.

Hook the Function to the Page

Now that we have this function we need to hook it to the correct location and in this case we’re going to hook it to the Thesis footer. Copy that function name, come down here to the bottom – we’re going to say add_action, opening and closing parenthesis, opening and closing single quotes and then the name of the hook, thesis_hook_footer and go outside of that, coma, space, opening, closing single quotes and then paste our function name, byob_fat_footer_sidebars. Then come over here and put a semi-colon and save our custom_functions.php. Open it up in Filezilla and upload it. Refresh it in Firefox and then scroll down and take a look at it and there you go.

You’ve got Footer Sidebar 1, 2, 3 and 4. Now what we have to do is we have to add the CSS styling that will make these things side by side and fit in this spot.

That wraps up Part 2 of this lesson.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment