Excluding Dynamic Filenames (The7 theme)
In this article
Dynamically changing file names
Most of the time, when you want to exclude a CSS file from minification, it will have a simple filename like style.css. Excluding this kind of file from minification is easy, because the file name never changes. You can read more about how to exclude static file names here:
Resolving issues with file optimization
However, sometimes you may see a theme or plugin use dynamic filenames. This is, for example, the case with The7 theme. It uses dynamic filenames like the following one where the numbers are the variable, ever changing part:
This means: If you try excluding said file name as is, the exclusion will lose its effect when the filename changes its variable numeric part, for example:
Excluding dynamically changing file names from minification
How can we successfully continue to exclude the CSS file even when its filename changes? We will use a Regular Expression (RegEx) to do this. You can read more about the basic concept in the section on how to exclude groups of pages from caching in this article:
Exclude Pages from the Cache
The same principle can be used to exclude dynamic filenames.
In our example we’re going to use a test site with The7 theme installed and activated. Looking at the source view in our browser we can identify 3 URLs to CSS files with alphanumeric extensions in their filenames:
These are our dynamic file names:
media-07f3e342a4.css?v=2.3.5 custom-07f3e342a4.css?v=2.3.5 main-07f3e342a4.css?v=2.3.5
With a little abstraction applied, their structure looks like this:
[base file name]-[dynamic extension].css?v=[version number]
Note: With other themes or plugins you may encounter differently structured dynamic filenames. This is just one possible example.
In order to exclude all of these files from minification, we will apply a Regular Expression as a placeholder for the
[dynamic extension] part of the filename. We also strip the
[version number] part as it is an optional query parameter and not required for the file to be loaded.
Thus we end up with the following:
media-(.*).css custom-(.*).css main-(.*).css
When adding these variable filenames to the exclusion option in WP Rocket, we obviously add the complete URL path to those files as seen before in our source view. WP Rocket will trim the URL down to a relative path for us.