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 […]
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.
Header Right Styles
While working on refactoring, we discover that the search form is within the base partial. Hum, but that is a widget. Therefore, it should be a separate partial within the Widgets Module and not in the Header Module. Let’s refactor and create a new partial. Then you’ll finish up the header right styles refactoring. Once you get this episode complete, you will have a completed Header Module.
Title Area Styles Part 2
Now you will continue refactoring by identifying potential variables to remove the hardcoded literals within the partials. Good candidates are colors, font sizes, and dimensions such as width and height.
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.
Title Area Styles – Part 1
There are multiple strategies for refactoring. I will show you multiple ways to accomplish the same objective. We will walk through the thought process of why you might want to use one over another. The point is: use what works best for you. For example, where do you put .header-image styles? Do you embed them into each sub-component such as the .title-area? Or do you make a separate partial just for the specific use case of .header-image? Let’s talk our way through it for you to determine what works best for you. A rule of thumb for deciding where to […]
Dividing Up the Title Area Styles
In this episode, you will walk through a couple of different approaches to handling the title area. Notice that it is comprised of the base styles for the title area plus the site title, site description, and header image styles. Ah, each of those is sub-components within the sub-module. So how would you handle the Sass styles? A good rule of thumb is: can you quickly and easily find the styles. By breaking them up into partials for each of the sub-components, you can more easily find what you are looking for just by reading the partial’s file name. All […]
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.
Base Styles
Let’s start by migrating the media queries into the base styles of the site header. Then you will walk through the thought process and exercise of refactoring the base styles.
Lab Introduction
In this lab, you and I are going to finish the header module by bringing in the media queries, refactoring, and assigning new variables. Why don’t you try to finish this module on your own using the strategies that you learned in Part 2b Navigation Sass Module? Then watch these videos to see how Tonya thinks about refactoring. Remember, you want to build this module and all of your codebase to fit the way you think, how you work, and your workflow. There are many different ways to solve the same problems, i.e. many different ways to write code. Don’t […]
Refactoring Image Sizes
Your homework in the last episode was to refactor the image sizes on your own. In this episode, we’ll walk through how to move the image size name and arguments into a configuration variable. Just like the theme supports, calling the image sizes over and over again is WET and unnecessary. Let’s refactor to clean up the code and remove the redundancies.
