In this hands-on lab, you will be introduced to the Genesis framework, its file structure, codebase, and developer-friendly customization features. You’ll walk through its source code and be introduced to the Genesis-way. You’ll learn about why the child-parent paradigm promotes clean, quality code.
The Genesis framework is a professional developer’s theming framework. It is built on the WordPress Plugin API, where each sub-component of the HTML structure is fully customizable through the supplied action and filter events. Utilizing the event registry system, you are able to quickly and easily rearrange, remove, add, and/or enhance the theme’s components and structure. Genesis empowers you to do the work you need to get done on your project.
What Will I Learn?
This one introductory lab shows you where you can find things within the Genesis framework as well as what it build for you. In this lab, you will learn:
- The different components of Genesis
- The HTML markup that Genesis builds for you
- The event hook names for each of the Genesis components
- How to find what you’re looking for in order to customize it
Why is this important?
Time savings. When you know what the framework does and where to find the part that you want to customize, it saves you time. Period. It makes you more productive. You can build and customize themes for your clients faster.
Estimated Project Time Savings
When you complete this lab, here are the estimated time savings you will gain for each of your projects:
Estimated Project Time Savings: 1-2 hours
1hr x $30/hr1 = $30 in savings per project
1Assumes your hourly rate is $30 per hour and you do at least 1 project per month
Prerequisites & Suggestions
While you could just watch the videos, we find that you learn more (and it sticks better in your brain) by actually building code and working along with me. That’s why we call these labs: “Hands-on Labs.” If you’d like to work along with me, you’ll need the following:
- A copy of the Genesis framework. Head over to StudioPress and get your license now.
- A Genesis-powered child theme, e.g. your own, Utility Pro, Altitude Pro, or even the Genesis free starter.
- Your local development environment ready to go, meaning a local web server (DesktopServer, Vagrant, MAMP, WAMP, or whatever), editor, and Sandbox website. If you need help setting up your local environment check out our Local Development Environment and Workflow libraries.
- Install and activate the Genesis Visual Hook Guide as you’ll use to visualize the architecture verses HTML.
-
New(er) to web development? Click here to check out Introduction to WordPress Web Development
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.
Unlocked and FREE
We want to help you start off on the right foot by learning the basics of the Genesis framework. It is the theming framework for WordPress. We are supporting your developer growth by unlocking this entire hands-on lab. Come learn and grow your proficiencies.
« Developer’s Guide to Customizing Genesis
Break. Go rest your noodle for a couple of minutes.
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
What to Do Next?
