Our plugin is now converting the stylesheet and script’s URL by embedding the version number into the filename. But did you notice that the assets are not loading? Why? The filenames do not exist on the web server’s hard drive. Therefore, the web server cannot find the asset and serve it up to the browser. How do we fix that problem? We need to add a rewrite rule for our Apache or Nginx server to remove that version number before WordPress runs. Let’s do that now.
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.
Apache and Nginx Rewrite Rules
Convert with Regex
Using the Regex pattern we developed and tested in the last episode, let’s write the conversion code using preg_replace. We’ll add this code to our method and then test it.
Regex or Parse the URL?
Let’s talk about our strategy to convert the URL and relocate the version number into the static URL. We’ll first explore parsing the URL and then manually putting it back together again. And then we’ll explore finding it via a regex pattern.
Hook into WordPress
We need to hook into a filter event within WordPress to change the stylesheets’ and scripts’ URL. How do we find this hook? Let’s talk about a strategy first. And then let’s look in WordPress Core to see where it’s fired and what arguments we will get when our code runs.
Start the URL Converter Class
Let’s start building our URL Converter class, i.e. the class that will handle checking and then converter each assets’ URL. You and I will layout the basic structure of the class including some of the starter methods and initializers. We’ll create a runtime configuration file that will get passed to the object, allowing us to change the implementation. Then we’ll add the code to the plugin’s bootstrap file to launch, load the configuration, and then create (instantiate) the URL Converter.
Versioning Utility Helper File
In Part 1, we built a versioning utility helper file. We installed it into multiple themes. Let’s move that to our new plugin. Resources Ins and Outs of Namespace for WordPress
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 […]
Wrap it Up
Congratulations! You made it! I hope that you learned something new in this hands-on lab. This lab went through: Why we need versioning How to automate it Why automating saves us so much time and frustrations New design patterns How to make a reusable utility file and so much more If you have any questions or just want to discuss what we did, reach out in the Pro Forums. I’m here to help you.
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 […]