This episode is an introduction to the lab where you are going to convert a typical stylesheet over to a modular architecture. You will use Sass as the means to accomplish this, as native CSS does not provide that functionality. In this lab, you are going to learn about why modular CSS saves you time, makes your code and workflow more efficient, improves maintainability, and advances you forward in building higher quality products. Then you will begin slicing up the style.css file and migrating it over into the Sass partials. This is the first step to the conversion process from […]
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
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.
Test & Wrap it Up
First, you and I will finish the migration of the Customizer CSS file, as I failed to finish it in the video. Then we’ll activate and test your new modular WordPress Genesis developer’s starter theme. Congratulations! You just migrated over all the PHP files from the starter theme and loaded it into your new modular architecture. WooHoo! Way to go!
Unregister Default Genesis Callbacks
NOTE: There is currently NO VIDEO for this episode. At this point, you have the child theme loading before the Genesis framework. When you need to unregister default callbacks, nothing is going to happen. Why? Because Genesis has not loaded yet. Therefore, the callbacks are not registered in the WordPress event registry table. They get registered when Genesis runs add_action or add_filter. You need to make a change then to adjust the theme.
Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
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.
Autoload Modules
Up to this point, you have been building the modules and files for your theme. Now it’s time to load each of the files within these modules. In this episode, you will walk through the de facto practice of repeating include() to get all of the files included. Then you and I will start refactoring out the redundancies while you learn about the why of it. Let’s get all the files loaded into your theme. As mentioned in the video, you will be setting a default using the PHP ternary operator. If you need to brush up on how this […]
Theme Settings Defaults
StudioPress includes a file called lib/theme-defaults.php. This file sets the default theme settings which are found in Genesis > Theme Settings. In this episode, you will refactor the redundancies and then add these into the setup of your new theme.
Theme Customizer Files
Next, you need to move the theme customizer files from the Genesis Sample Theme to your new developer’s theme. You’ll start by copying the files into your theme. Then you’ll start refactoring by applying the PHP namespace and removing the prefixing. You’ll give the functions purposeful names so that each tells you specifically what it does, i.e. what the expected behavior is when you call the function. You’ll be reorganizing the helper functions into a helper file. Also, there are some functions embedded within a function, which makes the code less readable. Let’s refactor those and make them their own […]
Load Assets (Enqueue)
Now, you need to migrate over the scripts and style (assets). In this video episode, you will create a new asset loader file, which will handle the WordPress enqueuing process for the assets.
Genesis Structural Components
In this episode, you will move each of the Genesis structural components into their respective files. You’ll be specifying the PHP namespaces and each callback.
