I’ve written about how to add custom CSS to WordPress. Instead of modifying your theme’s style.css file, creating a child theme, or using a plugin, I suggest you simply create a new stylesheet with the additional CSS rules and include them in WordPress using the wp_enqueue_style function. This way, your custom CSS rules are independent of your theme and you don’t have to worry about updates, and you don’t have to bother with creating a child theme either.
WordPress Appends a Version Number
However, if you use the default wp_enqueue_style function, WordPress will append a version number to the end. Let’s say you want to enqueue a CSS file called “custom-css.css” and use the following code:
function replace_some_default_styles() {
wp_enqueue_style( 'three_column', get_stylesheet_directory_uri() . '/custom-css.css');
}
add_action( 'wp_enqueue_scripts', 'replace_some_default_styles' );
After adding this code either to your functions.php (not recommended), or to the custom plugin holding your code, this CSS file will be included on your site like this:
As you can see, while the file now appears in the source code, there’s an annoying version number attached to the end. In this case: ?ver=5.9.3 . This is the current WordPress version number and it’s appended by default to all styles enqueued using wp_enqueue_style. The same goes for scripts enqueued using wp_enqueue_script. When the WordPress version changes, this version number changes as well.
Removing the Version Number
When WordPress appends a version number to styles and scripts like this, it can cause all sorts of problems – particularly those involving caching. I think it’s a good idea to instruct your CDN to ignore query strings, since there are other, more efficient ways to cache bust, and having a version number just introduces an additional layer of complexity.
Fortunately, removing the version number from the function is easy. We just need to modify this:
wp_enqueue_style( 'three_column', get_stylesheet_directory_uri() . '/custom-css.css');
into this:
wp_enqueue_style( 'three_column', get_stylesheet_directory_uri() . '/custom-css.css',array(), null );
So the entire block of code becomes:
function replace_some_default_styles() {
wp_enqueue_style( 'three_column', get_stylesheet_directory_uri() . '/custom-css.css',array(), null );
}
add_action( 'wp_enqueue_scripts', 'replace_some_default_styles' );
Simple! Now after you save your changes, you can confirm that the version number of the style or script is no longer a part of the URL.
Instructing Cloudflare to Ignore Query Strings
It’s a good idea to tell your CDN to ignore all query strings for static resources. This way, you don’t have to deal with multiple versions of files, which can cause all kinds of debugging issues when you make changes. Caching issues can be quite hard to isolate, especially if you have multiple layers of caching, starting from your server, and then on a CDN.
For Cloudflare, switching off the caching of query strings is easy. Just locate the “Caching” tab on your dashboard, and under configuration, select the option to ignore the query string like this:
Just a simple change and you’re done!
Save Auto-Versioning Headaches
Some developers use workarounds to ensure that they’re always using the latest version of CSS or JavaScript files. Auto-versioning is a popular hack that uses the “Last Modified” timestamp on a file to create a version number that’s unique to that particular file. So when it changes, you don’t need to worry about emptying various caches. It’s a neat trick, and I see how it has its benefits.
But I still worry that it adds an extra layer of complexity to your code and that it’s easy for someone to forget about it and for it to rear its head in unexpected situations later on. Far easier to just disable caching temporarily in production and then enable it when the site is ready to go live.
Remember – keep it simple!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Leave a Reply