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
Here are some links to the Docx to help you out:
Let’s Test What You Learned
Let’s test what you just learned doing this episode with me. Take a few moments to see if you can answer these questions.
If anything doesn’t make sense or you need more clarification, go to the Pro Forums and ask me. I want to help you to really get this. Knowing how to find stuff in the framework is going to save you hours and hours of time. That’s money in your pocket!
What triggers WordPress to load Genesis' header.php file?
When you do
genesis()at the bottom of each template file, that calls a function in the Genesis framework. That function is located in
genesis/lib/framework.phpon about line 22. Open that up now. What is the first line of code in that function?
get_header(). Therefore, the framework is calling that function, which triggers WordPress to load the
The first thing that happens in the header.php file is 'genesis_doctype' event fire. If you are using a HTML5 theme, what function in Genesis will run when this event fires? Hint: Open header.php and then search for the callbacks that are registered to it.
When you did a search for the callbacks that are registered to the event
genesis_doctypeyou found the callback is
genesis_do_doctype. Right? That function is found in the file
genesis/structure/header.php. Look at the code in that function. I said it’s a HTML5 child theme. Therefore, the function that is called is:
Look at the code in that function. Notice what will get rendered out to the browser. It renders out:
<!DOCTYPE html> <head lang="en-US"> <meta charset="UTF-8">
Does that make sense to you? I’m helping you to navigate through the Genesis framework and find how it is building the head portion of the web page.
Break. Go rest your noodle for a couple of minutes.
Total Lab Runtime: 02:47:43
- 1 Lab Introductionfree 10:07
- 2 The Why of the Genesis Frameworkfree 09:26
- 3 Web Page Sequencefree 07:33
- 4 Web Page Sequence - in the Codefree 14:54
- 5 The Intent of HTML and its Markupfree 08:45
- 6 The Intent of the Themefree 11:17
- 7 WordPress Event (Plugin API) Refresherfree 12:19
- 8 Visual Hook Guide and the HTML - Headerfree 10:10
- 9 Visual Hook Guide and the HTML - Contentfree 10:01
- 10 Visual Hook Guide and the HTML - Sidebarfree 09:22
- 11 Visual Hook Guide and the HTML - Footerfree 08:34
- 12 File Architecturefree 12:32
- 13 Codebase Architecturefree 10:03
- 14 Event Naming Conventionfree 08:50
- 15 Initialize & Setup Overviewfree 07:50
- 16 Initializing Genesisfree 06:09
- 17 Setting Up Genesisfree 08:15
- 18 Wrap it Upfree 01:36