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.
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.
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, […]
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.
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.
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 […]
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.
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 […]
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 […]
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.