Let’s reverse engineer to know how genesis_markup builds the HTML5 markup that is sent out to the browser. In this episode, you are learning about a lot of PHP including: conditional expressions falsey state ternary operator If you haven’t already, you should go and take the following PHP Labs, as these will help you to further understand PHP, WordPress, and Genesis: PHP Conditional Expressions Bootcamp PHP Variables Bootcamp
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.
Building the HTML5 with
Practical Customization Example – Figuring Out the First Column in a Row
Now you need to figure out how to add the first class to the entry’s article. How do you determine that a post is the first column in a row? You will use the modulus operator, which divides the post count by the number of columns and returns a remainder. You use this remainder to determine the first column in each row. Aha, let’s see if you can figure out how to accomplish this. Don’t worry, I’ll walk you through it, step-by-step, and explain it thoroughly. Let’s get writing some code together.
Genesis Markup – genesis_parse_attr
Ever wonder how the “context” you see in genesis_markup is assigned as a class attribute? This function, genesis_parse_attr, handles that assignment, merging it into the attributes. Then you have further granular control using the filter event: genesis_attr_{$content}. Let’s explore what this function and filter do.
Genesis Structural Wrap Overview
Structural wraps give you further styling control over your content, as they add either an opening <div class=”wrap”> or closing </div> HTML elements. But they have to be configured in your child theme for this additional HTML markup to be applied in your webpage. In this video, you will see what the structural wraps do, what their intent is, and how it helps you to style your web page. Structural wraps provide a consistent and DRY approach to containing the maximum width of your content, to ensure it does not run up to the edges of the browser screen.
When should you use genesis_markup?
Throughout the framework, you will see code like this: Notice how genesis_markup includes configuration for both HTML5 and pre-HTML5 (XHTML). What is the intent (or purpose) of the function genesis_markup? When should you use it in your child themes or plugins? In this episode, you will discover its intent as well as when you should use it. The intent is to allow for either a HTML5-powered or pre-HTML5 child theme. Genesis supports both. But when you build your child theme, you are specifying if it is a HTML5-powered theme or not. Therefore, you do not need to use this function […]
Wrap it Up
This lab showed you where you can find things within the Genesis framework. It gave you a basic walkthrough of the framework, where components are, and how to find what you’re looking for in order to customize it. Knowing where the components are within the Genesis framework helps you to build and customize themes for your clients. This lab will save you at least one (1) hour per project, if not more. Why? Because now you know the naming convention, file structures, where to find stuff, and how Genesis layouts the web page itself. You’ll know where to go look […]
Setting Up Genesis
The theme needs to be setup and configured before it can begin building and then rendering out the markup to the browser. During this stage, you are defining what you want within the web page, such as adding theme supports, registering new components (such as layouts or sidebars), and/or removing components or functionality.
Initializing Genesis
With all code, you first need to initialize it. Initialization prepares a codebase and environment for operation. It includes tasks such as loading files, constants, and setting default states. Pop Quiz Time After you watch the episode, answer these questions.
Initialize & Setup Overview
Let’s walk through the initialization and setup process for the Genesis framework and a child theme. This overview prepares you for the following two videos. We will also discuss what is considered an initialization task versus a setup task.
Event Naming Convention
The events in Genesis are named by a set convention. You will see this naming pattern throughout the framework. Let’s talk about this pattern and how you use it to locate the different files, components, and features within Genesis.
