Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 11 – Implementing genesis_markup and genesis_structural_wraps

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.

There’s something that I’ve not talked about yet in this Introduction to Creating Child Themes for Genesis 2 that is important and that is implement genesis_markup and genesis_structural_wraps.

Why use genesis_markup and genesis_structural_wraps?

Now, genesis_markup and genesis_structural_wraps are functions that are designed to preserve both forward compatibility so it allows your child theme to adapt as Genesis changes so it doesn’t break if Genesis 2.1 changes some things and it also allows you to take advantage of schema.

I’m not going to show you how to take advantage of schema because that’s a more advance concept but building in the ability to take advantage of schema in the structural HTML that you write is I think really a critical ability.

Sometime in the future I’ll do a seminar on schema and how to add it and then how to deal with it and that kind of stuff. But right now we’re going to use two functions, genesis_markup and genesis_structural_wraps in order to future proof our child theme and in order to make it so we can take advantage of schema with our new HTML and so that all happens right here.

Structural Wraps in Code Snippets

Rather than this echo aside stuff what we’re going to do is..well actually, it doesn’t start there. It starts with with structural wraps and under Code Snippets so let’s go to that Structural Wraps section. Now, the Structural Wraps section is the thing that adds that div class=”wrap” to all of these Genesis structural elements. This may be counter intuitive, it certainly was for me, what we’re doing is this theme support is automatically added already, it already has support for this.

Using add_theme_support

When we add theme support, what we are doing is giving ourselves the ability to remove structural wraps from something or add structural wraps to something else. If you use this add_theme_support but don’t include all of the existing ones, it will actually take the structural wraps away from the existing ones.

The other thing to say about that is that this looks like XHTML markup and in fact, it is XHTML markup so what you have to know is that add_theme_support for structural wraps for header actually does add it to the HTML5 site header element. So you don’t have to change this to the HTML5 names which is I think a little counter intuitive but nevertheless.

So we’re going to come back over here to our functions file where we’re doing all the rest of our add_theme_support. Whoops, wrong functions file, add_theme_support ‘genesis-structural-wraps’ for these things and then we’re going to add it for one more and that is ‘attention-boxes’.

Now in this case, it’s important that this term here, ‘attention-boxes’ is exactly what we use in the other functions so I want you to keep that in mind as we do this.

Use the genesis_markup Function

Then what we’re going to do is come back over to our front page and instead of this echo statement, we are going to start with a function called genesis_markup. And genesis_markup takes an array of values, you have to have all these values in it.

The first value is ‘html5’ and this is where you would say aside and then what you’re going to use is this sprintf function which is %s and it will automatically add the right name in here. The class the name and everything else because we added this %s there and then the next one is ‘xhtml’.

It would be nice if you didn’t need this but you actually do need ‘xhtml’ here for this to work properly and so I’m going to say div id=”attention-boxes”‘. This is what happens if ‘html5’ is not activated.

Then the third element is ‘context’ and ‘context’ is when are you going to actually use this. In that case, this is that ‘attention-boxes’ right there, this is the ‘context’. Now this is absolutely critical to being able to later add schema because this ‘context’ will attach your schema function to this very specific thing. I will make sure to use that as an example in the future seminar.

Use the genesis_structural_wraps Function

The other thing we’re going to do is the genesis_markup and then we’re going to use genesis_structural_wraps and that is a function that takes a couple of different options. The first one is again the ‘context’ up here and then the second one is whether it’s open or close.

Now, if you don’t specify anything it’s automatically going to be open so what we’re going to do down here is the same thing, ‘attention-boxes’ and then close. So there’s the opening structural wrap, here’s the closing structural wrap and then we want closing genesis_markup and now ‘html5’ is the closing aside, it’s the closing div and it’s the same ‘context’.

Now, this looks like a lot more code but along with this comes a lot more function and the ability for not only yourself but somebody else who comes along and uses your skin to assign a schema to this markup section. It may be different than the one you’re going to assign to it and they don’t have to hack any code to do it because you’ve given them the ability to do it right here by using genesis_markup and giving it a ‘context’. Then you’ve preserved the future life of the skin by using genesis_structural_wraps here.

Let’s save this and let’s look and see what happens when we do it. The answer is it’s going to look exactly the same as it did before. Whoops, what did I do wrong? Something. Okay, I’ve got my code in here wrong somehow or another. Let me look at my example. It’s not wraps, it’s wrap. Okay genesis_structural_wrap although I still have something not right because now if I inspect my element I’ve got <aside “attention-boxes” but I don’t have the “wrap” and that’s because, oh it is ‘attention-boxes’.

Well, maybe I haven’t uploaded the functions file, maybe that’s the problem. Yeah, that was it, I didn’t upload that. So now we have our aside “attention-boxes” our class “wrap”, we’ve got our boxes and then we’ve this closing out again.

I know that last little bit kind of seemed complicated but it’s the tools that you can use to create easily indexable aspects of your template and so I encourage you to go to that extra effort of using the theme support for structural wraps and then genesis_markup in order to provide really maximum functionality out of your Genesis child theme.

0 Comments… add one
0 comments… add one

Leave a Comment