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.
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.
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>.
Visual Hook Guide and the HTML – Header
It helps you to know the end result of the code when you see it. In this episode, you will use the Genesis Visual Hook Guide plugin to first visualize how Genesis structures the HTML. Then you will look at the actual HTML to see what has been built for you. In this episode, you will explore the header, which is from the opening DOCTYPE to the <div class=”site-inner”>. Here are some links to the Docx to help you out: get_header() genesis() Let’s Test What You Learned Let’s test what you just learned doing this episode with me. Take a […]