The reason for this post

So during my adventures in web design I have come across a few hurdles – one being the CSS delivery.

It really frustrates me when I make a CSS change to my file, upload it to the server, clear Cloudflare and what ever caching plugin I am using and the CSS changes don’t show on the site. This is due to the fact that the browser (chrome, Firefox or whatever) is caching the CSS so is showing the old version, even though there is a newer version available.

So the old solution for myself was to clear my browser cache and hey presto, the changes appear! This was ok, but when a client calls to say that they cant see it, you say clear your browser cache – but what about their customers? Do we have to tell everyone to do the same? Surely there is a better way?

Well YES there is ! Using dynamic CSS basically does this. It forces the browser to re-download the CSS file when ever there is a new version. So it still gets cached until your server says: “Hey, I have a new version for you”. Brilliant hey?

How does the browser know if there is a newer version?

Well it is quite simple really. Have you ever seen a version number after a script such as:

/wp-content/themes/Divi/style.css?ver=3.0.34

Well the “?ver=3.0.34” is the version of the CSS file. If you increase this number the browser will know that there is a newer version and download it automatically.

Just for your knowledge – ver=3.0.34 is the Divi version that the site is using, so if you update your Divi, the browser will know and download this version.

So the next question is how do you change the version number of your child theme css every time you make a change and upload it to your server?

How to add Dynamic CSS to your child theme

In a previous post (here) we spoke about how to properly call your CSS, to not use @import but instead use enqueue to call you CSS.

Dynamically calling your CSS takes this process one step further.

Just to refresh your memory, we add the following in your functions.php to normally call your CSS

add_action( 'wp_enqueue_scripts', 'divi_engine_child_theme' );
function divi_engine_child_theme() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Now to dynamically call your css we need to add a special parameter to the style.css that changes the version number. There are a number of ways to do this. Whilst experimenting we came up with a solution that worked well – but thanks to the a guy called Eugene Kopich on the Elegant Themes Community Group on Facebook we have a slightly better version. So we will go with his ๐Ÿ˜€

First we enqueue the Divi style.css the same way, then we dequeue (remove) the child theme css and then finally enqueue (add) another version of the style.css that changes the version number every time you upload a newer version. The code (“filemtime”) gets the time that the file was modified (overwritten on the server) so the version number now becomes the time you added it. When you add a newer version, the time changes and so does the version number. Therefore the browser knows that there is a newer version and downloads it automatically!

add_action( 'wp_enqueue_scripts', 'divi_engine_dynamic_child_theme', 20 );
function divi_engine_dynamic_child_theme() {
	wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css', array(), et_get_theme_version() );
	wp_dequeue_style( 'divi-style' );
	wp_enqueue_style( 'child-theme', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
 }

Horaay

That’s it, how when you make a change, it will force the browser and you won’t have issues with clients and customers seeing an old version of your CSS.

Download a template

We have created two templates for you to download. One that is the normal and one that is the dynamic version.

Feel free to use these as your “starter” child theme files. You can change the theme name, URI etc.. Just leave the Version as Divi. Oh and change the screenshot.png to be your new website ๐Ÿ˜€

Hope this helps and let us know how you get on!

Share This

Share this post with your friends!