In this layout, you will relocate the primary navigation to below the header right area. You will style these elements while learning about different presentations for different devices. This episode will involve PHP and CSS hands-on work. In this episode, you’ll learn how you start with the structure to ensure the HTML is properly laid out and structured before you start working on the styling. The order and structure matters. You accomplish this back in the PHP scripts in your child theme. Then once it is laid out correctly, then you can work on styling up the front-end.
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 you to the second half of the Header lab. In this lab, you will get to build some real-world header layouts, layouts that you can use in your projects. This is a hands-on lab to help tie everything together from what you’ve learned so far about the Genesis framework.
Header Components – Developer’s Guide to Customizing Genesis
This lab is the Part 3 of the Developer’s Guide to Customizing Genesis series. In this lab, you will be learning how to customize the header component within the Genesis framework, which includes site header, logo/title area, header right, and navigation.
Wrap it Up
Let’s review what you did here in this lab before you move on to the second part of this lab. I broke up this lab into two separate labs to help you keep track of where you are, as there are a lot of videos and materials to cover. Now in second part of this lab, you will be customizing the site header area with three (3) different layouts and a utility bar.
To Render or Not to Render – Header Right Sidebar
The header right sidebar is a default widget area built into the Genesis framework. It allows you add different widgets into the site’s header including adverts, menus, search, social media, and more. Let’s explore how Genesis builds this sidebar.
Building the Site Description
The site’s description provides additional information about the site, such as its intent, tag line, or slogan. Let’s see how Genesis builds the HTML for this element.
Custom Header Feature in Genesis – Part 2
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.
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.
