Now you know how Genesis renders out the structural wrap, but how do you configure it up in your child theme? Let’s explore how you add_theme_support. You’ll add and remove structural wraps from various HTML contextual sections to gain a hands-on knowledge of how to configure it in your projects. Let’s reverse engineer the function genesis_structural_wrap. For example:
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Genesis Structural Wrap Code Overview
Now you’ve seen what it does. It’s time to head into the Genesis framework codebase and reverse engineer the function genesis_structural_wrap.
Refactoring the Swapping Old Contexts Code
The swapping of the old contexts to the new contexts is another task. A function should do just one thing, but genesis_structural_wrap is doing multiple tasks. In this episode, you will refactor the context swapping code to another function, as part of clean, quality code.
Swapping Old Contexts
In the last episode, you saw that genesis_structural_wrap deals with swapping out old contexts and replaces them with the one versions. How does this code work? In this episode you will learn about PHP array functions and replacing out string patterns: array_search in_array str_replace
How does Genesis know to use HTML5?
If the intent of genesis_markup is to allow for either a HTML5 or pre-HTML5 child theme, then how does Genesis know whether to use HTML5 or XHTML? The child theme is responsible for declaring what it wants. Let’s take a closer look in the code.
Practical Customization Example – Grid Classes
Okay, you now know the markup codebase in the Genesis framework as well as how it works, its intent, and how to customize it. Let’s do a practical customization example, one that uses the Genesis styling classes, such as one-half and gives you a grid of posts. A grid is an arrangement of elements or content in a row and column pattern. In this episode, you will figure out how to add the column class to the HTML markup.
Genesis Markup – Overview
The genesis/functions/markup.php handles all of the HTML5 or pre-HTML markup as well as the attributes. There are multiple key instructions at play in this file including: genesis_parse_attr genesis_attr genesis_markup Let’s talk about the intent and structure of the markup file before you dive deep into each of these functions.
Lab Introduction
Let me introduce the lab to you to what you will be doing. You’ll get a briefing on the HTML markup and the sections of the codebase that are included within this lab.
Markup & Wraps – Developer’s Guide to Customizing Genesis
This lab is Part 2 of the Developer’s Guide to Customizing Genesis series. Before you can dig into the components, first you need to understand how Genesis handles the HTML markup attributes, switching between HTML5 and pre-HTML5, and structural wraps. In this lab, you will be customizing the HTML markup, attributes, and even organizing the Posts Page into a 2-column grid pattern.
Genesis Markup – genesis_attr – Part 1
Throughout the markup file, Genesis has been building up an array of attributes. This function, genesis_attr, assembles each of the attributes into the proper format as it builds up the HTML attributes markup. When complete, it provides you with a filter event, genesis_attr_{$context}_output to give you the ability to modify the markup before it is returned to the calling code. Let’s dig into this function and reverse engineer it.
