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.

0 Videos Runtime July 12, 2016

Rethinking the Module Architecture

Let’s rethink our current module architecture and how we have the partials laid out. In the entry, is has multiple components. Right? It has the following components: entry header which has the entry title, post meta, and featured image entry content entry footer which has the post meta, typically for categories and tags It seems easier if you have a partial for each of these components. Why? Remember that this is your codebase. Therefore, it is your starting point on all jobs and theme builds. Having a partial for all the components gives you flexibility for all of the needs […]

0 Videos Runtime July 12, 2016

Lab Introduction

In this lab, you and I are going to finish the entry content 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 so far? Then watch these videos to see how Tonya thinks about refactoring.

0 Videos Runtime July 12, 2016

Git Commit

Then the last step is to commit your changes and then push them to GitHub, GitLab, or Bitbucket. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github. We also talk about shortcuts in PhpStorm’s console to help you be more efficient.

0 Videos Runtime July 12, 2016

Footer Widgets Styles

As you’ve been doing, you will first migrate over the media queries into the footer widget partial. Then we’ll discuss different variable naming for media query device widths. You’ll look at two different examples, including WebDevStudio’s wd_s theme and Tonya’s personal blog theme. You want the variables to be general enough to be relevant for each project that you build while still being purposeful and declarative.

0 Videos Runtime July 12, 2016

Site Footer Styles

Let’s start by migrating the media queries for the site footer. Then you will walk through the thought process and exercise of refactoring these styles.

0 Videos Runtime July 12, 2016

Lab Introduction

In this lab, you and I are going to finish the footer 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 so far? Then watch these videos to see how Tonya thinks about refactoring.

18 Videos 02:16:49 Runtime July 12, 2016

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.

0 Videos Runtime July 12, 2016

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!

0 Videos Runtime July 12, 2016

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.

18 Videos 03:59:03 Runtime July 12, 2016

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.

Labs

Rethinking the Module Architecture

Lab Introduction

Git Commit

Footer Widgets Styles

Site Footer Styles

Lab Introduction

Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme

Test & Wrap it Up

Unregister Default Genesis Callbacks

Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme

Learn

Help

General