One of the most common annoyances web developers face is caching is a pretty basic concept. Whenever you visit a site you’re downloading files. These range from C assess to image files. The web would be quite slow if you had to download those same files over and over again. To solve this your browser will store copies of those files and then load those copies rather than downloading the same files again. This provides a better user experience overall as developers. We want this but not during the development phase of a plugin or theme.
If I made a change to a C Ss file then I won’t be able to see those changes as the browser will load the cached version rather than the updated version. Right now I have my browser opened up to the home page. I’m going to press F twelve on my keyboard to open up the developer tools. One of the most helpful tabs is the Network tab select that tab. Now, this tab will display a list of files that have been downloaded and how long it took to download them. It also keeps track of the order downloaded and size so you may be thinking how does this relate to cash. Well, this time provides some really helpful information to determine whether a file was cached or not before we view what’s cached. Let’s filter the results. Right now the Network tab will display every single file downloaded I’m going to filter this to only display C Ss files so that this doesn’t get cluttered. I want you to do the same.
Once you have the CSL filter on refresh the page the page shouldn’t load normally but let’s focus on the Network tab. Taking a closer look at the science column you’ll see that the browser only loaded cached versions of the files. It doesn’t matter how many times you refresh the page it will always load these files from the cache any changes we make will not be reflected on the page. There are a couple of ways to get around this. The first immediate option is to check this box that says disable cache. I don’t recommend you check this box. While this does allow the latest version to load this option will affect all sites we visit. This includes Facebook Youtube etc. If I hover my mouse over this option then you’ll also see that the developer tools have to be opened up in order for this option to work. I’m going to uncheck this box.
The second solution would be to press control F5 on our keyboards. This will force the browser to clear the cache for the current site and refresh the page. After a while, you’ll see that the true size of each file is displayed. This indicates that the file was downloaded from the server and not the browser’s cache. This works but it isn’t ideal. I hate having to refresh the page twice because I forgot to clear the cache on the first refresh. The ideal solution would be to trick the browser into downloading the file.
Let me show you what I mean. If you look at the file names you’ll notice that WordPress adds a query parameter called br which is short for version. The value for this will be the actual version of WordPress. This simple trick forces the browser to download the latest version of the file if work presses update it. It works rather well. However, if I refresh the page again then you’ll see that the version never changes. This works perfectly for upgrades but not so much for development. Luckily we can modify this behavior easily. Let’s open our editors and view the NQ file. We worked on in the previous election. We’re going to start with the style sheets first the WP register style function we’re using here has a fourth parameter called version. Right now we’re only taking advantage of the first to the third parameter it would be an array of dependencies but none of our files required that kind of power. So I’m going to pass in an empty array. The fourth parameter allows us to pass in a custom version number if we don’t want to use the word press version number by default. This will be set to false which will let WordPress pick the version instead of hard coding a version. I’m going to pass in the time function now I’ll refresh the page and view the network tab. I applied this to the Google font so we should see the file size appearing for that file. As expected the file is now loading from the server. If I were to hover my mouse over the file name you’ll see that the full-year URL includes the version query parameter the value for this will be the value of the time function. This is great but it can definitely be improved. Let’s switch back to the editor. The next logical step would be to update its function. But there’s a problem with that. Let’s say we were finished with our theme. We would have to come back to this file and update the values again. Then if we wanted to make changes we would have to update the values once more before moving forward. That can be a bit annoying but this can be solved easily. I’m going to open the functions file inside this file. We have a section called setup.
Personally, I like to create a constant that determines whether we’re in development mode or not. You don’t have to do this but I recommend you do as it’ll make your life easier. I’m going to create a constant named J U Dev mode with a value of true. Then let’s go back to the queue file and create a variable named version right below you arrive variable. The value for this will be J you Dev mode time false basically.
I’m checking if development mode is on. If it is all set the version to the value returned by the time function. If development is off then all set the value to false below in the register function. I’m going to replace the tying function with the version variable like so now I’m going to do the same for the rest of the register functions for the script functions. I’m going to update these from false to the version variable. That’s it.
Now we don’t have to update all of this in the future. Switching between development and production mode it’s as simple as modifying one value. Let’s refresh the page and see the changes the page should load normally without any errors. If we were to view the network tab then you’ll see the version for our files is completely dependent on the current time. We no longer have to worry about caching.
