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’s have fun with the site title by filtering the HTML, changing the text styling, and adding a logo within the CSS. While you can use the custom header feature to add a logo, using the stylesheet, you are able to load different logos based upon the actual device. For example, you will serve up a smaller image for a mobile device and specify a retina-ready image for retina devices.
Let’s continue building the site title. In this episode, you will see the four different options which affect the HTML element used to wrap the site title, i.e. <h1> and <p>. When is one selected over the other.
As part of the title-area, Genesis builds the site title, adjusting the HTML element based upon the page being built. In this first part, you will see how the clickable link and site name are pulled from the database and then formatted into HTML. You’ll learn about the HTML <a> HTML element, as well as what the intent is for making the site name clickable. Let’s walk through this build process.
Throughout the header code, you will find the function genesis_is_root_page(), which is used to check if the requested page is the root of the website. What does this mean? In this episode, you will explore the different options that trigger is_front_page and is_home. You will look at settings HTML and in the database to see the options which trigger either or both of these states.
The header area on your website is compromised of the following elements: genesis_before_header Site Title Area – Title and Description Header Right genesis_after_header – by default is the Primary and Secondary menus Let’s walk through the code and relate it to the actual web page elements.
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 […]
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.