Alright we have the right conditions. Now Genesis will build the image’s CSS first and then the text color. Let’s continue our exploration of genesis_custom_header_style.
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.
Custom Header Feature in Genesis – Part 1
Now let’s dig into the Genesis framework and see how it builds the CSS and loads it into the site’s head to display the selected image and/or text color. In this episode, you will discover when Genesis determines not to generate the CSS styles. What causes it to bail out of the callback function? Let’s go found out.
Introduction to the Custom Header Feature
WordPress provides a custom header feature in the Theme Customizer. You have control of whether to provide a custom header within your client theme. It allows your client to change the logo, site header image, or site title color. Let’s take a look at how you configure it in the child theme and then what the results are in the browser.
Styling the Site Title
Let’s finish up the customization of the site title by styling our new logo and site name elements. You will be writing the CSS to get the logo and site name aligned horizontally with one another.
Customizing the Site Title
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.
Building the Site Title – Part 2
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.
Building the Site Title – Part 1
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.
Detecting the Root Page
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.
Genesis Header – Overview
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.
Lab Introduction
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.
