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.
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 […]
Visual Hook Guide and the HTML – Footer
Let’s continue exploring the Genesis framework’s HTML markup structure in a visual manner. In this episode, you will look at the footer component, which is from the <div class=”footer-widget”> (if you have footer widgets configured) to the closing </html>.
Visual Hook Guide and the HTML – Content
Let’s continue exploring the HTML in a visual manner. In this episode, you will look at the content component, which is from <div class=”site-inner”> to the closing “content” </div>.
Visual Hook Guide and the HTML – Header
It helps you to know the end result of the code when you see it. In this episode, you will use the Genesis Visual Hook Guide plugin to first visualize how Genesis structures the HTML. Then you will look at the actual HTML to see what has been built for you. In this episode, you will explore the header, which is from the opening DOCTYPE to the <div class=”site-inner”>. Here are some links to the Docx to help you out: get_header() genesis() Let’s Test What You Learned Let’s test what you just learned doing this episode with me. Take a […]
