The de facto for theme files is to put the bulk of the customization into the functions.php file. That strategy makes customization less readable and maintainable. Building software packages, including themes, into modules, means you are splitting up the functionality into purposeful, single responsible files and packages. In this lab, you will learn about modularity, which is one of the keys to the clean, quality coding practice. Then you will take the Sample theme PHP files and convert those over into a modular architecture.
This hands-on lab is Part 1 of a multi-part “Let’s Build a Developer’s Genesis Starter Child Theme” series. This lab is an introduction to what you will be building as the architecture and components are explained. Then you will take the Genesis Sample Theme and break it apart into a modular structure of partials. Each step of the process will be explained as you actively progress through the lab.
To learn more about this series and each of the parts, see the main lab found here. It also includes all of the prerequisites that you will need to build this theme.
You will be using PHP namespacing instead of prefixing in this lab. If you are not familiar with namespacing, please watch this video first: Ins and Outs of PHP Namespacing.
Stop. You need some stuff first!
This lab uses version 2.2.4 of the Genesis Sample theme. Make sure you have this version before you start this lab.
Hands off the keyboard. Web development starts by thinking first, then planning it out, and then coding it.
Total Lab Runtime: 03:59:03
- 1 Lab Introductionfree 05:01
- 2 What the Heck is Modularity?free 13:12
- 3 The Why of Clean Codefree 12:47
- 4 Laying Out the Theme's Architecture - Part 1pro 09:04
- 5 Laying Out the Theme's Architecture - Part 2pro 10:34
- 6 Slicing Up the Sample Theme's functions.phppro 06:44
- 7 Initialization Tasks - Theme Constantspro 14:47
- 8 Initialization Tasks - Directory Constantspro 05:49
- 9 Setup Taskspro 38:00
- 10 Refactoring Theme Supportspro 08:01
- 11 Refactoring Image Sizespro 03:52
- 12 Genesis Structural Componentspro 05:10
- 13 Load Assets (Enqueue)pro 05:56
- 14 Theme Customizer Filespro 15:43
- 15 Theme Settings Defaultspro 06:34
- 16 Autoload Modulespro 11:19
- 17 Unregister Default Genesis Callbackspro 00:00
- 18 Test & Wrap it Uppro 06:30
Stylesheets by their very nature do not comply with clean, quality principles as everything is one gigantic file that is filled with redundancies. It's inefficient and error-prone to work with a stylesheet. But just like what you learned in Part 1, the stylesheets can be broken up into modules and partials using Sass. In this lab, you will take your first steps to working with Sass by splitting up the Genesis starter theme's stylesheet and converting it to Sass.
Check out the Genesis Theming Framework for more hands-on labs, insights, Docx, and more.
Check out the series page for more labs: Let’s Build a Custom Developer’s Genesis Starter Child Theme