Excluding Dynamic Filenames (The7 theme)
In this article
This video gives a quick overview of the steps explained in this article:
Dynamically Changing Filenames
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 Minification
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
style-12345678.css where the numbers are the variable, ever changing part of the filename.
This means: If you try excluding said file as
style-12345678.css, that exclusion won’t have any effect anymore when the filename changes to—say—
Excluding Dynamically Changing Filenames 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 this article’s section on how to exclude a group of pages from being cached:
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:
main-07f3e342a4.css?v=2.3.5 custom-07f3e342a4.css?v=2.3.5 media-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:
main-(.*).css custom-(.*).css media-(.*).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.