Let’s build some real-world header layouts that you can use in your projects. In this layout, you will relocate the primary navigation to above the site’s header, i.e. the top of the page. Then you’ll remove the header right area, add a logo, and then center the logo on the page. This episode will involve PHP and CSS hands-on work.
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 Layout 1 – Mobile Styling
In this episode, you will continue styling Layout 1, but this time you are working on the responsive styles. You’ll work with the media query and learn how to adjust the styling for the mobile devices.
Custom Header Layout 1 – Styling
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. In this episode, you will walk through step-by-step how to style within Google Chrome. You’ll learn about the different CSS properties and what they do, such as: clear float width Whenever you need to know more information about a CSS property, I highly recommend that you go to CSS Reference on Codrops.
Custom Header Layout 1 – Structure
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.
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.
is_front_page() vs is_home() Showdown
There is a difference between the WordPress functions is_front_page() and is_home(). The state of these functions is determined by how you (or your client) configures the site in the Settings > Reading section (in the back-end). In this lab, you will see how different settings can cause a different set of states.
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 […]
Setting Up Genesis
The theme needs to be setup and configured before it can begin building and then rendering out the markup to the browser. During this stage, you are defining what you want within the web page, such as adding theme supports, registering new components (such as layouts or sidebars), and/or removing components or functionality.
Initializing Genesis
With all code, you first need to initialize it. Initialization prepares a codebase and environment for operation. It includes tasks such as loading files, constants, and setting default states. Pop Quiz Time After you watch the episode, answer these questions.
Initialize & Setup Overview
Let’s walk through the initialization and setup process for the Genesis framework and a child theme. This overview prepares you for the following two videos. We will also discuss what is considered an initialization task versus a setup task.
