Have you downloaded the latest child theme we have linked above?

What is wrong, the version number is not changing?

Perfect – thanks!

Thanks Divi Engine, it works with another class.
And i use another hook “wp_footer” for the custom css.

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?

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

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”

I see

Please check now, we have fixed the code to remove the extra file

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

Can you explain more what you mean about it not working? The child theme should work just fine

Thank you for everyone who used this feature

Please download the Child THeme on this post so you can see how to set it up, it should help you.

Anything else I need to do to transition to using this dynamic child theme on my current site?

Thanks

Perfect – thanks for the feedback. I know – not sure why no one else shouts about this method – it is the best 😀

Thanks Stefan for the comment! Have a great week

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.

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?

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!

Awesome – glad to have your back or arse, which every way you look at it! Have a great week

Correct 😀

I don’t think this is a Divi issue but rather something that happens on all child themes, no?

Not sure, is it your child theme or Divi that is loading twice?

Thanks for the comment Adam! Glad it helped.

Amazeballz

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!

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

I know right – a revelation for me too! Changed the game

Brilliant – thanks and glad it helps!

Glad it could help you 😀 I know, it changed the way I develop sites now!

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!

Thank You!!

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

My pleasure.. glad you liked it

ok! -Thanks for your detailed answer!

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?

Pleasure 🙂