Let’s build a custom Developer’s Genesis framework starter child theme. A starter child theme is built to your needs, standards, and style. It gives you consistency from project-to-project and saves you a ton of time (and moola) as all you need to do is add in the custom bits for each project.
This one lab will be a huge leap forward in your quest to level up in WordPress development. You will be learning about theming, PHP, WordPress, clean and quality coding techniques, Sass, and so much more. You’ll be learning how to think about maintainability and customization by utilizing modularity, DRY, view files, and the configuration architecture.
Remember that once you convert this theme, this is then your codebase. You do not need to go through this process again. Instead, you will work with this starter theme, copying it to a new project, and then customizing what needs to get done. Using the configuration files and Sass variables, it will save you time and money, thereby allowing you complete your projects more quickly. It will also increase your quality.
The Details
This child theme will include all of the goodies that we developers want, including:
- Sass – for modular and DRY styling
- Bourbon and Neat
- gulp – we need a task runner to process the Sass and any JavaScript
- Composer – for file autoloading
- Easy spin up and customization by using the “configuration architecture”
- Modular, clean code that is easily maintainable and customizable – as it complies with clean, quality coding principles, e.g. modular, DRY, single responsibility, and use view files
- PHP namespace instead of prefixing for function naming
Why Do This Lab?
I’m often asked about the intent (purpose) of this lab. You can easily copy the converted child theme as it’s freely available on GitHub. So why do this lab?
This lab teaches you about architecture, workflow, methodology, and techniques to save you time and money over the lifecycle of the theme. The end result is not that you get a new child theme, but that you dive deep into these concepts to help you become a better developer.
Therefore, it’s important that you use the Genesis Sample version specified in this lab. We are using version 2.2.4.
Yes, StudioPress has come out with a newer version. That’s okay. Once you get through this lab, then you will be better equipped to upgrade your new child theme, including adding the Customizer component.
Total Series Statistics
The entire series from start-to-finish is over 14 hours of mentoring on how to build themes, modularity, different strategies, Sass, gulp, and more.
Number of Labs: 14
Total Runtime: 13 Hours
Number of Episodes: 97
What You Will Learn
This lab is an exercise that will teach you the following:
- What modularity is and why you should care about it (hint: saves you so much time and makes code more readable)
- Architecting your PHP theme files and CSS Styles into modules
- Developing your own workflow that will save you time and make you more efficient and effective
- The process of converting CSS into Sass modules
- Why you want to use Sass and how it will save you time, frustrations, and money
- How to setup your own task runner workflow with gulp
Stop. You need some stuff first!
Let’s Get Your Local Machine Ready
Before you can do this lab, you will need to have your local web development machine setup and running. You will need to have the following installed and setup:
- Local web server, e.g. DesktopServer, Vagrant, WAMP, MAMP, etc.
- Professional editor or IDE, e.g. PhpStorm, Coda, etc.
- Git
- Node.js and npm
- Gulp or the Non-Task Runner Option – to compile the Sass modules
- Composer
- the Genesis framework by StudioPress
- Sample Child Theme – use version 2.2.4
If you need help getting your local machine ready, check out the Local Development Workflow Library. It has series for both Mac and Windows users.
Non-Task Runner Option: If you don’t want to go as far as to use a task runner, no problem. You can convert the Sass files over to native CSS using various applications like CodeKit (for Mac) and others.
Suggested Prerequisites
I highly recommend that you complete the Developer’s Guide to Customizing Genesis either before or after this series. This series will not teach you the framework or how to specifically customize it. Nope, this series is about building a modular, configurable codebase to speed up your development, increase the quality, and save you time.
It’s Using Genesis Sample version 2.2.4
This lab uses version 2.2.4 of the Genesis Sample theme. Make sure you go get that version, which is available to you here.
Starting Files You Need
You must use Genesis Sample version 2.2.4 for this lab. We will provide it to you for free. Click below and follow the instructions.
-
Click here to get the Genesis Sample theme and the code you are building in this lab.
The Audience
This lab is intended for Professional Developers. It assumes that you already have a local development environment, know how to use editor, and know some PHP, HTML, and CSS. This lab is not teaching you these languages per se. Rather it is teaching you how to build software packages.
Coding Building Labs
This lab is broken up into multiple parts to help you focus on the process and how to think about these concepts. You will want to progress in order through each of the parts in order.
Converting the Theme Files
The first step is convert the theme files into a reusable, modular architecture. Let’s get you started learning how to build reusable, maintainable, and readable themes.
Converting Stylesheet to Sass
These hands-on labs convert the Genesis sample theme’s stylesheet into Sass partials and modules. Let’s walk through the entire process together. I’ll share my approach and thought processes, explains each concept, and help you to master this conversion process.
While you could just copy and paste the finished Sass modules into your project, the entire point of this lab is to help you deeply understand how to build this on your own, how to adapt for yourself, why you want to use this approach, and when you want to use it.
The Task Runner – Gulp
Sass needs to be compiled to convert it into native CSS. That means you need a task runner or an app like CodeKit. Tasks runners are very powerful in automating many of the tasks that you do such as gathering assets (like styles and scripts), error-checking them (linting), concatenating them together (smooshing), and then minifying them. You can use either Grunt or gulp. In this lab series, you will build with gulp.
NOTE: If you don’t want to go as far as to use a task runner, no problem. You can convert the Sass files over to native CSS using various applications like CodeKit (for Mac) and others.
What to Do Next?
