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.
Let me introduce the lab to you to what you will be doing. You will be exploring the Genesis framework codebase while you customize the header of your sandbox website. You will see where the elements are built and then rendered with Genesis, as well as how to change, filter, remove, add, and rearrange whatever you want to achieve a unique design for your client.
Let’s review what you did here in this lab before you move on Part 3.
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.
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.
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 […]
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:
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.
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.
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
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.
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.