Let’s put what you learned in Part 3 into action. In this lab, you build multiple custom site header layouts and a utility bar in order to see how easy it is to create child themes with the Genesis framework.
This lab is Part 4 of the Developer’s Guide to Customizing Genesis series.
Make sure you have completed the first half of this lab by clicking here.
In this lab, you will do and learn about the following:
- Discover where to find the events and code you need to use in your child theme
- Focus on getting the HTML structure right first before working on the styling
- Learn to think about the components and how to organize them
- Work in the browser and then port those changes to your stylesheet
- Learn about CSS clean code to avoid the repeating patterns. Keep it DRY.
- Learn that size matters in the stylesheet
- Getting HTML out of the business logic by using a view file
- and there’s even some CSS deep dives too
Here’s a pro tip, from me to you: For CSS, make sure you go and bookmark, the CSS Reference on Codrops. Sara Soueidan did an amazing job of laying out an interactive, thorough reference for each CSS property. I use it for my styling. You should too.
In order to do this lab, you will need to have completed:
You will want a copy of the Genesis Sample child theme for this lab. It’s free.
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.
Hands off the keyboard. Web development starts by thinking first, then planning it out, and then coding it.
Total Lab Runtime: 02:09:18
- 1 Lab Introductionfree 05:33
- 2 Custom Header Layout 1 - Structurepro 09:02
- 3 Custom Header Layout 1 - Stylingpro 11:54
- 4 Custom Header Layout 1 - Mobile Stylingpro 07:00
- 5 Custom Header Layout 2 - HTML Structurepro 13:58
- 6 Custom Header Layout 2 - Stylingpro 14:02
- 7 Custom Header Layout 3 - HTML Structurepro 16:11
- 8 Custom Header Layout 3 - CSS Stylingpro 12:48
- 9 Let's Build a Custom Utility Bar - Structurepro 15:39
- 10 Custom Utility Bar - Styling - Part 1pro 11:57
- 11 Custom Utility Bar - Styling - Part 2pro 09:32
- 12 Wrap it Upfree 01:42
The Loop is a vital component in WordPress, as it handles building and rendering out the content onto the page. The Genesis framework handles the loop for you, as well as providing you with the hooks you need to customize each theme for your client. In this lab, you will be diving into the loop structure, looking at the entry header, title areas, entry content, post info, post meta, and more.
Check out the Genesis Theming Framework for more hands-on labs, insights, Docx, and more.
Check out the series page for more labs: Developer’s Guide to Customizing Genesis