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 25, 2017

Planning Our Plugin

Let’s plan out our plugin. There are multiple features and considerations that we need to think about before we start writing code. In this episode, we will talk about the strategy of reducing redundant code and how to architect a custom site. We talk about why using the same file embedded into each theme and plugin can increase your costs, risks, and time. Then we’ll talk about the different tasks that this plugin will do, including: Move the versioning utility file out of the theme, i.e. that we built in Part 1, and put it into our new plugin. Strip […]

0 Videos Runtime July 12, 2017

Convert into Utility File – for Reuse

The code that we’ve built is a utility file. But for it to be reusable, we need to do the following: Remove the enqueueing callback and put that into a separate file. Protect the utility functions from loading into memory if they’ve already been loaded by another plugin/theme. In this episode, we’ll do some refactoring and housekeeping. But you also get to learn about this design pattern and why it is so critical in our strategy: In this episode, you’ll refactored in the Twenty Seventeen and Genesis Sample themes. Plus, we’ll demonstrate including our new utility file into a plugin […]

17 Videos 03:18:22 Runtime July 12, 2017

Remove Query String from Static Resource URL

In Part 2 of the Better Asset Versioning series, let’s dive into how to remove the query strings, i.e. the ?ver=1.0.0 from the static resources. Static resources are the scripts, fonts, styles that we enqueue. When you run speed tests on sites like Pingdom, a common ding to the performance score is this very topic. Let’s build a plugin that removes the query string and places it inline as part of the static URL.

0 Videos Runtime July 11, 2017

Applying It to Scripts

We’ve done the theme’s stylesheet. Now we need to apply the same strategy to the scripts and any remaining supplemental stylesheets. In this episode, you and I will refactor the Twenty Seventeen’s enqueue code while we discuss the strategy. Step-by-step, we’ll work through it together. As we do, we’ll find a flaw in our original code.

0 Videos Runtime July 11, 2017

Refactor to Improve Our Code

Before we move on, let’s stop. We have a flaw in our strategy, specifically in the stylesheet URI callback. Challenge yourself and see if you can find it. Think about it. Part of your work here on Know the Code involves thinking through and planning out code construction. I’m trying to teach you how to strategize, think about code construction, and do problem solving. There are times when we’ll stop and look at potential problem areas. Our code has a flaw in it. See if you can find it on your own.

0 Videos Runtime July 11, 2017

Load the Minified Stylesheet in Genesis

Now it’s time to port the changes over to the Genesis theme. The code is exactly the same as all that we did was a callback for the “stylesheet_uri” event filter in order to change the stylesheet’s URL to the minified version. Let’s do the same steps to the Genesis theme.

0 Videos Runtime July 11, 2017

Strategy Session: Minified or Full for Theme Version

This episode is different. In this one, we’re talking strategy. It’s time to think about how we should approach setting the theme’s version. Should we use the minified or full stylesheet? Does it matter? Hmm, first, we need to look at how WordPress does it. Then we’ll look for a mechanism to change between the files. Let’s walk through WordPress Core and look at how it extracts the stylesheet’s version. We’ll explore wp_get_theme(). Spoiler alert: there is no mechanism. Bummer. Okay, then let’s talk through if we need to change our code or not. If you use an automated minifier, […]

0 Videos Runtime July 10, 2017

Forget Hard Coding – Grab Stylesheet’s Version

Part of Strategy 2 is to grab the stylesheet’s version and use it as the theme’s version. This strategy eliminates redundancy and utilizes the version number that is required in the theme’s style.css header DocBlock. When? You want to use this strategy when it’s time to deploy or release the theme. You don’t want to use it in development or test modes.

0 Videos Runtime July 10, 2017

Version Numbering Scheme

Before we go any further, let’s talk about version numbering scheme. There is no best practice or set standard that all must adhere to. Rather, each group, company, or team needs to define and standardize their version numbering system. WordPress uses a three sequence numbering scheme: 4.8.1, where the third sequence is a minor release. I recommend that you read this document, especially if you are going to work in Core. Other libraries, frameworks, and applications define and use their own numbering scheme. Take a look at Wikipedia’ Software versioning article. Quickly you’l notice that there are multiple strategies that […]

0 Videos Runtime July 9, 2017

Cache Busting Strategies

Now you understand what a query string is, why WordPress uses it for the version, and why it’s a problem. Now, let’s talk about different strategies to ensure we get the benefits of cache busting. The strategies are: Use a CDN. This is your best strategy for performance. Make sure that all asset resources that you enqueue or load into the DOM have a version assigned to them. ALL of them. Let WordPress handle changing the static URL. Place the assets into a folder that is named by the version number. Embed the version number into the static URL.

Labs

Planning Our Plugin

Convert into Utility File – for Reuse

Remove Query String from Static Resource URL

Applying It to Scripts

Refactor to Improve Our Code

Load the Minified Stylesheet in Genesis

Strategy Session: Minified or Full for Theme Version

Forget Hard Coding – Grab Stylesheet’s Version

Version Numbering Scheme

Cache Busting Strategies

Learn

Help

General