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:
[html]/wp-content/themes/Divi/style.css?ver=3.0.34[/html]
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
[php]
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' );
}
[/php]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!
[php]
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_enqueue_style( 'child-theme', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
}
function custom_dequeue() {
wp_dequeue_style( 'divi-style' );
}
add_action( 'wp_enqueue_scripts', 'custom_dequeue', 1 );
add_action( 'wp_head', 'custom_dequeue', 1 );
[/php]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!
Hey, nice article. Thanks for that and the downloads. I just realized that the “style.css” is loaded twice on my website. Further investigation found, that the child theme style.css is now loaded by the functions.php in the Divi parent theme. See function et_divi_enqueue_stylesheet() line 363 in /Divi/functions.php (Divi Version: 4.17.6). Or did I get this wrong?! I dropped the “wp_enqueue_scripts” action in my child theme and everything works as expected. I’d be pleased to read your findings here. Have a nice one! 🙂
Is this just a fixed url? 🙁 I would like to see which external site / advertisement came from!
Same problem here, as of last update cant get filemtime to work on child stylesheets. Super annoying.
Have you downloaded the latest child theme we have linked above?
What is wrong, the version number is not changing?
hi there, unfortunately this isn’t working for me either with the new Divi update.
I had this code on several sites and it was working brilliantly, however since the new update last week it’s no longer changing the ver=# number on either the ‘divi-style-css’ or the ‘child-theme-css’.
They both appear to be always loading ver=1.0.0
any thoughts why this might be?
I use the code, but the child-theme CSS file is not loaded last. A CSS file is loaded afterwards: “cached-inline-styles”.
I am unable to post the link to Stackoverflow here because of SPAM, but details are listed under the following question:
“Let the child CSS file load last in the DIVI Theme WordPress”
Hi. We dont change the order of the cached-inline-styles, this is from Divi
Why do you want to change this, because of CSS hierarchy?
Try adding another class to make it a higher priority
Thanks Divi Engine, it works with another class.
And i use another hook “wp_footer” for the custom css.
Perfect – thanks!
This does not work in divi 4.10.x
You can advise the repair?
Thank you for everyone who used this feature
Can you explain more what you mean about it not working? The child theme should work just fine
As of version 4.10.X, stylesheet uses id = “divi-style”. the above code inserts a duplicate child-theme file and the filemtime function does not work
I see
Please check now, we have fixed the code to remove the extra file
If I want to start using this, do I simply just copy over the custom css and paste it within the theme options of this child theme? and also do the same with any modifications to the functions.php file that I have made?
Anything else I need to do to transition to using this dynamic child theme on my current site?
Thanks
Please download the Child THeme on this post so you can see how to set it up, it should help you.
What a great post! Thank you so much this great tip. I have an issue where Chrome displays latest CSS updates after clearing browser cache but Firefox just don’t react into anything and keeps showing old content. After your dynamic CSS, it now works perfectly on both browser and saves me from clearing up browser cache all the time.
Perfect – thanks for the feedback. I know – not sure why no one else shouts about this method – it is the best 😀
This works great!
I would recommend always using a child theme even if you’re planning on doing minor customisations. Personally, I always find myself needing to add more and more functionality which results in needing a child theme and more work for myself.
I’ve made it practice for all websites I work on now. And as mentioned in the article, it saves having to tell customers to clear cache, etc, which no-one likes to do.
Thanks Stefan for the comment! Have a great week
I don’t really need a child theme for any other reason. I sure hate to create a child theme just for this. Surely there must be an easier way to integrate this…
Hi Donna,
If you are adding custom CSS in a stylesheet you will need to create a child theme, so this would be the best way to do it. How are you adding your custom CSS?
Recently I started dealing with an issue where I wouldn’t see CSS changes (only later that day) but my host could. I cleared my cache, flushed my ipconfig, etc. but it all didn’t help. Eventually my host mentioned the concept of versioning. Then when I tried to find info on how to apply that to a Divi child theme I came across this post. And it worked! Thank you so much. If only I had found this days ago. 🙂
Thanks, Noëlle. Yes, this was my problem for so long when I used to build websites and the styling would not show. Such a simple solution and no more headaches and time wasted on clearing cache etc. Glad it helped!
Seriously saved my arse!
Awesome – glad to have your back or arse, which every way you look at it! Have a great week
do you have any idea why the style.css is loading twice in my inspector/source/child them folder when I use this method?
Not sure, is it your child theme or Divi that is loading twice?
I don’t think this is a Divi issue but rather something that happens on all child themes, no?
Correct 😀
Wasted serveral hours on several different days on this. Almost dropped Divi because I couldnt control my child theme properly. This code snippet has saved the day.
Amazeballz
Thanks for the comment Adam! Glad it helped.
This rocks! The best code I’ve found so far to solve this issue.
I know right – a revelation for me too! Changed the game
thank you for your code, it still works and fixes a lot of issues furthermore I understood some basics that I was missing. THANK YOU!
Brilliant – thanks and glad it helps!
sorry for a new comment, just wanna ask something, your code works very well on desktop browsers but on my android device huawei p20 I still have to delete manualy cache for viewing updates on style.css. Is there something that I can do for fixing this on android devices? many thanks
Hi Vassilis
Don’t apologize! I am sorry for the delay in replying to you 😀
Yeah I have this problem too – I think it is the phone itself that caches the files hard. Maybe someone else has a solution? If you ever get one please let me know and I will do the same!
Thanks!
Finally! Something that actually solves this longstanding problem!
Glad it could help you 😀 I know, it changed the way I develop sites now!
Hi am wondering what the code would be like if we want to use multiple style sheet in child theme.
Thank You!!
It really depends on what you want to do – do you want to make them “dynamic too”? Let’s say you want to add font awesome (No need to make this dynamic as you are not regularly changing this) and another CSS file (dynamic) and another CSS file (not dynamic – slick ) You can do it as such:
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( ‘fontawesome’, ‘https://use.fontawesome.com/releases/v5.0.10/css/all.css’, array(), 1.1 );
wp_enqueue_style( ‘another-css-file-name’, get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . ‘/css/another-css-file.css’ ) );
wp_enqueue_style( ‘slick-css’, get_stylesheet_directory_uri() . ‘/css/slick.css’, array(), 1.1 );
wp_enqueue_style( ‘child-theme’, get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . ‘/style.css’ ) );
}
As you can see above I have added font awesome from an external URL so I remove “get_stylesheet_uri()”. I have added another css file called “another-css-file.css” and in the child theme created a new folder called “css” and put this in there. You need to name your scripts differently so not the name “another-css-file-name” – you can call this whatever you want. As you can see “slick-css” doesnt have “filemtime(” so it wont be dynamic but this is not a problem as I dont think we need to update this regulary.
Oh and always put your child theme css at the bottom so that it overrides the other styles and is the most important.
I hope this helps, any questions just ask!
How does this work with Divi’s new functionality to generate Static CSS File Generation and
Output Styles Inline. Should this be enabled or disabled in Divi Theme Options “Builder” Tab?
The child theme does not affect the new functionality of static css file generation. Divi combines this code that is outputted into the head of the site. Your child theme css is different. CSS in head of site cannot be cached so you will see the update almost everytime. This is why putting the css in your style.css is important as you can cache it and it will speed up your site. Only drawback is you will have the deal with changes not showing – but the dynamic child theme solves this. Am I making sense? lol
This is by far the most cogent guide I have found to fixing a perennial problem. Thank you very much!
My pleasure.. glad you liked it
Thanks for an excellent article and guide! I´m not very good in coding and have a question: What does 20 mean in the code:
add_action( ‘wp_enqueue_scripts’, ‘divi_engine_dynamic_child_theme’, 20 );
Thanks for the comment. The 20 is the priority of the stylesheet. The priority changes where the CSS file is loaded in the head of the site. The lower the number the higher up the page it loads. Basically the browser will load the sheets from the top down so the stylesheet that is last will be the one that has the highest priority. For example if two CSS files have h1 {font-size:26px;} – which one does the browser know to use if they have different values? It uses the one that is loaded last (highest priority). With our example, we have to make sure it is loaded after the Divi style.css – so that is what the 20 is for. Does that make sense?
ok! -Thanks for your detailed answer!
Awesome work I’m going incorporate this into a new child theme I created this afternoon. Thank you muchly.
Pleasure 🙂