Let’s review what you did here in this lab before you move on Part 3.
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.
Markup Helpers for Empty Class and Accessibility
Genesis provides a couple of markup helper functions that you can use in your child theme and plugins. One is for removing the class attribute, while the other adds a screen reader class attribute for accessibility. Let’s take a look.
Genesis Markup – genesis_attr – Part 2
Let’s continue by reverse engineering genesis_attr to you to know how it takes the array of attributes and then converts it into the HTML string that you saw in the last episode.
Granular Customization with genesis_parse_attr
Now you know how the function works and what its intent is. Let’s go and change the markup for the default contextual areas of the HTML markup, i.e. the default stuff in the Genesis framework. You will be doing the following hands-on, code writing stuff in this episode: Manipulate and customize the site header as well as the entry markup; Change the class attribute by removing it, adding a new class, and even overwriting; Add an id attribute Add a data attribute for data-post-id, which will give your JavaScript more information when needed You get to have some fun with […]
Configuring Structural Wraps
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:
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.
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.
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.
