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
Pro Tip
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.
Prerequisites
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.
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.
Keep It Simple, Stupid (KISS) - the best kiss you'll get in code.
Episodes
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
What to Do Next?
