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 […]
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.
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.
Event Naming Convention
The events in Genesis are named by a set convention. You will see this naming pattern throughout the framework. Let’s talk about this pattern and how you use it to locate the different files, components, and features within Genesis.
Codebase Architecture
In the previous episode, you explored the file structure. In this one, you will walk through the Genesis framework’s codebase. You’ll explore the actual code. We will focus on the main structural templating files. Here is the link to the PHP while Docx.
File Architecture
Web pages are comprised of various components, such as the header, footer, navigation, content areas, etc. Genesis divides up its architecture into components. In this episode, you will explore the file structure of the framework in order to find the various components. You’ll learn about the intent of each of the sub-modules, where files are loaded.
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 – Sidebar
Let’s continue exploring the HTML in a visual manner. In this episode, you will look at the sidebar component, which is from the closing “content” </div> to the <div class=”footer-widget”> (if you have footer widgets configured). You will look at both the primary and secondary (sidebar-alt) sidebars.
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>.