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.
In this lab, you will also get to dive into the
genesis/lib/functions/markup.php file as well as structural wraps to reverse engineer the following key instructions:
You’ll see how these work, how to configure them, and how to use them in your child theme.
You’ll learn a lot about HTML, PHP, WordPress Core, and of course Genesis. In addition, you’ll learn about the intent of code, refactoring, clean code in practice, how to think about code and customization, and more.
You’ll need to have your local Sandbox website setup and ready to go, as you will be writing code in this lab.
Required Skill Level
This lab has stuff for everyone. For the beginner, you get a solid hands-on experience in PHP, WordPress, and Genesis. For the Pro, you get all of that plus you get to learn about clean, quality coding, how to think about code, and how to find what you’re looking for in the codebase.
Once upon a time, there was a developer... You! This is going to be a good story...
Total Lab Runtime: 02:51:01
- 1 Lab Introductionfree 04:47
- 2 Genesis Markup - Overviewpro 06:55
- 3 Genesis Markup - genesis_parse_attrpro 14:12
- 4 Granular Customization with genesis_parse_attrpro 13:13
- 5 Genesis Markup - genesis_attr - Part 1pro 16:44
- 6 Genesis Markup - genesis_attr - Part 2pro 11:31
- 7 When should you use genesis_markup?pro 15:05
- 8 How does Genesis know to use HTML5?pro 04:35
- 9 Building the HTML5 with genesis_markuppro 08:15
- 10 Markup Helpers for Empty Class and Accessibilitypro 08:50
- 11 Practical Customization Example - Grid Classespro 11:12
- 12 Practical Customization Example - Figuring Out the First Column in a Rowpro 09:47
- 13 Genesis Structural Wrap Overviewfree 07:42
- 14 Genesis Structural Wrap Code Overviewpro 16:24
- 15 Swapping Old Contextspro 09:37
- 16 Refactoring the Swapping Old Contexts Codepro 06:00
- 17 Configuring Structural Wrapspro 04:54
- 18 Wrap it Upfree 01:18
This lab is the Part 3 of the Developer's Guide to Customizing Genesis series. In this lab, you will be learning how to customize the header component within the Genesis framework, which includes site header, logo/title area, header right, and navigation.
Check out the Genesis Theming Framework for more hands-on labs, insights, Docx, and more.
Check out the series page for more labs: Developer’s Guide to Customizing Genesis