This lab is Part 3 of the Developer’s Guide to Customizing Genesis series. In this lab, you will be learning how to customize the header component within the Genesis framework, which includes site header, logo/title area, header right, and navigation.
The header component is important as the top portion of the web page. It is where the site’s branding and navigation reside. The viewer’s eyes are drawn to this area. Let’s thoroughly explore the Genesis framework code and help you to know how, when, and where to customize it.
What You Will Learn
In this lab, you will learn about PHP, HTML, CSS, WordPress Core, and Genesis. You get to build the following custom layouts and features:
- You will rearrange all of the default elements
- Three (3) custom layouts
- Custom utility bar
Whew, there’s a lot to cover. So much so, that I broke this lab up into two separate labs to help you keep track of where you are. In this lab, you will learn all about Genesis. Then in the second half, you’ll get to customize the site header area by building the custom layouts and utility bar. Ready to have some fun!
Prerequisites
In order to do this lab, you will need to have completed:
The Audience
This lab is intended for Professional Developers. You will be in the codebase, reverse engineering the actual code itself in order to really know it. It will require some PHP and WordPress knowledge. However, I will point out the Docx articles for the various language constructs in the event something doesn’t quite make sense for you. If you are a beginner, you can work slowly, go to the Docx and learn each construct, and then rewind when necessary. If you’ve been building custom sites from scratch for awhile, then you can fast forward the bits that bore you.
Required Skill Level
This lab has stuff for everyone. For the beginner, you get a solid hands-on experience in PHP, WordPress, and Genesis. For the pro, you get all of that plus you get to learn about clean, quality coding, how to think about code, and how to find what you’re looking for in the codebase.
Whoever says that coding is hard, just smack them.
Episodes
Total Lab Runtime: 02:16:34
- 1 Lab Introductionfree 06:45
- 2 Genesis Header - Overviewpro 14:35
- 3 Detecting the Root Pagepro 14:26
- 4 Building the Site Title - Part 1pro 08:00
- 5 Building the Site Title - Part 2pro 08:33
- 6 Customizing the Site Titlepro 13:04
- 7 Styling the Site Titlepro 04:29
- 8 Introduction to the Custom Header Featurepro 07:31
- 9 Custom Header Feature in Genesis - Part 1pro 15:14
- 10 Custom Header Feature in Genesis - Part 2pro 10:51
- 11 Building the Site Descriptionpro 12:47
- 12 To Render or Not to Render - Header Right Sidebarpro 11:02
- 13 Building the Header Right Sidebarpro 08:28
- 14 Wrap it Upfree 00:49
What to Do Next?
