Visual Hook Guide and the HTML - Header

Skip to episode playlist

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:

[optin-monster-shortcode id="fggc9bpbilvhcqol"]

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.php on about line 22. Open that up now. What is the first line of code in that function?

Right, it’s get_header(). Therefore, the framework is calling that function, which triggers WordPress to load the header.php file.

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_doctype you 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: genesis_html5_doctype().

Look at the code in that function. Notice what will get rendered out to the browser. It renders out:

[code type=”html”]
<!DOCTYPE html>
<head lang="en-US">
<meta charset="UTF-8">
[/code]

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.

When was the last time you got out of your chair and stretched? Just saying…

Episodes

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

Back to the lab's opening page.

Visual Hook Guide and the HTML – Header

Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis

Let’s Test What You Learned

Episodes

Learn

Help

General