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.
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.
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.
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.
Building the HTML5 with genesis_markup
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
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 […]
