Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 10 – Add Attention Boxes to the Front Page Template

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.

The next thing I want to do is add the attention boxes to the front page template and again, this is a function of registering sidebars and then hooking them into place very similar to what we’ve just done except now we have some additional responsiveness that we have to account for.

Register Sidebars in the Functions File

Let’s come back over here and go to our functions file and we’ll copy this register_sidebar. We’ll say register_sidebar and we’re going to call this ‘attention-box-1’ and then we’ll just call it ‘Attention Box 1 Widget Area’ and ‘This is the leftmost attention box widget’.

I like to give little clues like this so people know where things go. Hence the ‘This is the leftmost attention box widget area on the front page.’ Then we’re just going to repeat this one again and again and so attention-box-1, attention-box-2, attention-box-3. Then ‘This is the middle attention box widget area on the front page.’ and ‘This is the right most attention box widget area on the front page.’ So we’ve registered those sidebars.

Add Attention Boxes in Front Page File

Now what we’re going to do is come over to the front-page and in a way very similar to what we just did, we are going to…well, we’re just going to copy this function. Replace feature_box with attention_boxes and then this will be ‘attention-box-1’.

In fact in this case, I don’t want the aside. What I really want here is I want a different kind of HTML so I’m going to say div and then class=”attention-box” and then get rid of this div and then we’ll do that again and again. So, ‘attention-box-2′ and attention-box-3’.

Then it’s not going to happen after the header. It’s really going to happen before the footer. Let’s just turn the hook on. This says before_footer so that’s what we’re going to use, we’ll use this hook before_footer and this function is going there.

Now we have our 3 widget areas going in this place and they all have a class of “attention-box”. They’re all being wrapped in a class of “attention-box” so we save this and we’re going to upload both of those. Come over to our widgets, we’re going to refresh our widgets and now we have Attention Box 1 Widget Area, 2 and 3.

Add Feature Pages to the Widgets

Now we’re going to use a featured page and another featured page and I guess we’ll use a third featured page. We’re not actually going to style these or do anything with them but we’ll have them on the site.

So we’ve got these 3 different attention boxes with featured page widgets in them and if we refresh it, see they’re all sitting down here. Whoops, that doesn’t have anything in it at all.

Specify a Priority in Functions

Well, notice how they’re down below the footer widgets, this is when we’re going to start looking at a priority in functions because right now, this footer widgets function is being called before these are being called. So now they’re going below the footer widgets instead of above it.

They’re both being hooked to the same hook but we want this one to be called before this one is called. Now if no priority is ever specified, priority is always 10. So generally speaking you never specify a priority unless you need to and that’s way Genesis works, it does not specify a priority unless it needs to.

In this case, we want to add these before 10 so we’re going to add a priority of 9. Now this priority number is an integer so it does not get wrapped in these things here. If you don’t specify a priority number, 10 is the one that WordPress automatically assigns it but we’re going to specify 9. That means it should happen before the footer widgets is called.

Let’s save it, we’re going to upload it, we’re going to refresh it. Now we have all 3 of these things sitting right here above the footer widgets and that’s because we specified that priority.

Add Styling to the Widgets

I’m going to fix this because this doesn’t have anything in it at all so we’re going to show content and show page title. Note first that these things go all the way off to the left and all the way to the right, there’s no wrapping container for them. So we’re going to create that and then secondly, they’re not sitting side by side right, they are on top of each other so we need to add some styling to make these things work the way we want them to work.

Add Structural HTML

The first thing we’re going to do is give ourselves some structural HTML to wrap this stuff. We’ll say echo and then it’s going to be aside class=”attention-boxes” and then inside of that we’re going to say div class=”wrap”. So there’s the opening structural HTML. Now we’ll do the closing structural HTML, echo ‘div aside’.

Use Genesis Built In Styles for Columns

Something else we’re going to do is add another class to these boxes. Genesis has built-in styles for columns and since there are 3 of these columns, we’re going to use their one-third class so it’s not going to be just div class=”attention-box”, it’s also going to be one-third. This is going to make those all stack up side by side.

There’s one other thing we have to do though and I’ll show you in a moment but let’s upload that, come back over and refresh this first. Let’s start off by looking at this. First we have now our aside which spans the whole distance, we have our “wrap” which sets the page layout then we have our “attention-box one-third”, another “attention-box one-third” and a final “attention-box one-third”.

The reason why these don’t all fit here is because they all have the same left margin and what we need to do is add the class “left” or “first” let’s see, I think it’s “first” actually. Add the class “first” to this first box so if we come back over here, we’ve got one-third and now we’ll say space and first. Now we’re using all the built-in CSS to make this work right? And now each one of these things sits side by side.

Responsiveness Built In

Something that’s worth noting is that they also are responsive right, they’re already responsive right off the bat. They shrink down to a certain place and then they drop down below so we already have this. There’s some tweaking that we need to do obviously and we’re going to do that in a minute but nevertheless, it automatically still behaves responsively because we’re just hooking ourselves into existing built-in Genesis CSS. Infact, why don’t we just do that right now.

Tweak Responsive Behavior

What I’m going to do is add a minimum width to these things and then I’m going to add some padding inside of the media query. So I’m going to open up my style.css and I’m looking for my column widths first so we’ll come down here to column, typical elements, headings, tables, site containers, okay column widths.

Add Minimum Width

I’m going to come down below these and just say .attention-boxes and then min-width:300px; so that they don’t get any smaller than 300 pixels wide and then I’m going to also come down to my media queries which are down here at the bottom.

Change Padding

I’m not doing anything on these two media queries but down here…it’s really just this one here I guess, the bottom media query, the smallest media query. This one adds some padding too and it’s not going to be min-width, it’s going to be padding:0 and then say, 10px. So we give a little bit of padding when the thing gets small enough and now that’s our style.css files.

We’ll upload the revised style.css file, come back over here and refresh that and now when it gets to be less than 320 pixels. Okay so obviously misspelled that, I did there’s 3 t’s.

Here we go, backspace. Yep, can’t misspelled this stuff or it’s not going to work. Let’s inspect the element and it’s attention-box not attention-boxes so attention-box. The attention-box one works because it’s wrapped by that so now there we go so it doesn’t get down too small and then once you get down to that point, it just scales down like that.

0 Comments… add one
0 comments… add one

Leave a Comment