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 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

Forget Hard Coding – Genesis

Let’s take the code we developed in the Twenty Seventeen theme and move it over to a Genesis child theme. I’m using the free Genesis Sample child theme.

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.

0 Videos Runtime July 9, 2017

Understanding the Problem

In this episode, let’s discuss what the problem is with using URL query string. It’s important for you to understand the problem first in order to solve it. Right? Do this episode before you move on. Let’s start by analyzing the speed of this lab using Pingdom’s website speed test. Here’s a link to the test that I ran. Running the test, it explains why it scores query strings: Resources with a “?” in the URL are not cached by some proxy caching servers. Therefore, the problem is that some proxy caching servers may not cache the resources. That means […]

0 Videos Runtime July 9, 2017

The Intent of ?ver=1.0.0

Why does WordPress append the ?ver= whatever your version number is? Why does it ask us to provide a version number when we enqueue? Why? What is the intent of versioning? Answer: It’s for cache busting. Why? Browsers cache when you view the web page. It holds a local version in its cache. If the URL doesn’t change, then the browser will pull from its local cache. That means the viewer will NOT see your changes. Whoopsie. Appending the version number of the asset to its static URL changes the URL. That’s why WordPress handles it for you. But you […]

0 Videos Runtime July 9, 2017

Load the Theme’s Minified Stylesheet

Stylesheets are huge. We want to serve up optimized assets to reduce the time for rendering web pages. Right? Smaller files equal faster download times. In this episode, you will be minifying the Twenty Seventeen’s stylesheet using an online service. Then you’ll build the code that loads it.

Labs

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

Forget Hard Coding – Genesis

Version Numbering Scheme

Cache Busting Strategies

Understanding the Problem

The Intent of ?ver=1.0.0

Load the Theme’s Minified Stylesheet

Learn

Help

General