When I introduced the Divi Children 3 release I mentioned it came with a new faster Output Mode to prevent your site from being slowed down because of your child theme. But what does that exactly mean, and how does it work?
Let me show you in the first place how to use this Output Mode feature and its benefits, and then I will explain what it is based on and how it works, so you can get a better picture of it.
How to set the Output Mode of your child theme created by Divi Children
If your Divi child theme was created by Divi Children 3.0 (or by a greater version of the plugin), you´ll find a new Output Mode section in the Customizer. It should actually be located below the group of your child theme specific Customizer panels added by Divi Children. As it also happens with the Live Custom CSS section located above it, Output Mode is not actually a panel but a section that is accessed from the top level of the Customizer:
To set your Output Mode in Production Mode, just open the Output Mode section and select the Production Mode button. Also, you need to make sure your Customizer settings are saved by activating the Save Production Mode settings checkbox and then saving your changes (by hitting the Save & Publish button of the Customizer).
What happens when you turn your child theme into Production Mode is this: instead of going through all your customizer controls to create all the custom CSS rules from your personal choices of values and options, your child theme has stored all that custom CSS as a single piece of information in your database. This has two important consequences:
- Your site will run much faster because your child theme will stop querying the database to retrieve all its specific Customizer settings, and it will send all your customized saved CSS to output at once instead.
- On the other hand, this also means that while your child theme is running in Production Mode you will not be able to see the changes you make to the child theme Customizer settings. Even if you see the changes in the Customizer preview while you operate any control, the front-end of your site would not reflect any change, because the custom CSS is taken from previously saved values and it´s not affected by the changes you´re making at that particular moment.
That is the reason why, once you´ve set your child theme into Production Mode and saved your Customizer settings, the next time you´ll open the Customizer you´ll see a warning notice every time you open any of the Customizer sections created by Divi Children:
So you should switch to Production Mode only when you are done customizing your child theme and you don´t plan to make any more changes using any of the Customizer controls that are specific to the child theme.
Of course, you may change those settings again whenever you want and as many times as you want, but you should switch your child theme to Development Mode before, so you are able to properly see what you are changing.
How Divi Children Output Mode works
Child themes, and WordPress themes in general, use specific settings called theme mods (theme modification values) which are part of the Theme Modification API. They are used by theme authors to save and retrieve modifications to their themes as WordPress options, and they handle theme-specific settings.
For example, here you have a part of the list-output.php file which takes care of the output for the Customizer settings of OL and UL lists in every child theme created by Divi Children (this file is part of the Divi Children Engine code that was created in your child theme, and there is such an output file for each section of the Customizer created by Divi Children):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
if ( $ul_customize ) { $ul_selectors = ' #left-area ul, .entry-content ul, .comment-content ul, body.et-pb-preview #main-content .container ul'; $ul_left_padding = get_theme_mod( 'dce_lists_ul_left_padding', 1 ); $ul_line_height = get_theme_mod( 'dce_lists_ul_line_height', 1.9 ); $ul_top_padding = get_theme_mod( 'dce_lists_ul_top_padding', 0 ); $ul_bottom_padding = get_theme_mod( 'dce_lists_ul_bottom_padding', 23 ); $ul_style_type = get_theme_mod( 'dce_lists_ul_style_type', 'disc' ); $ul_change_font_size = get_theme_mod( 'dce_lists_ul_change_font_size', 0 ); if ( $ul_change_font_size ) { $ul_font_size = ' font-size: ' . get_theme_mod( 'dce_lists_ul_font_size', dce_get_divi_option( 'body_font_size', 14 ) ) . 'px;'; } else { $ul_font_size = ''; } $dce_output .= $ul_selectors . ' {' . $ul_font_size . ' line-height:' . $ul_line_height . 'em; padding-left: ' . $ul_left_padding . 'em; padding-top: ' . $ul_top_padding . 'px; padding-bottom: ' . $ul_bottom_padding . 'px; list-style-type: ' . $ul_style_type . ';}' . "\n"; } |
In this code you can identify a function that is used many times: get_theme_mod( $name, $default ). This function is part of the Theme Modification API and retrieves a particular modification setting for the active child theme (for example, the custom left padding for UL lists, as in the fourth line above).
But, as you can guess by looking at that piece of code, on any page load the child theme needs to “ask” the database for the various theme mod values, and then construct the CSS rules that will be sent to output. This is alright while you are customizing your site, but it may imply too much time once the site is on production and while you are not modifying anything in it.
When you set your child theme into Production Mode, what the output mode code created by Divi Children in your child theme does is the following:
- If the Save Production Mode settings checkbox was activated, upon saving of your Customizer settings (when you hit the Save & Publish button of the Customizer once you´ve finish your customization work), the Divi Children Engine will generate all the CSS output needed to take care of your customizations, and it will save it in the database as a single theme mod.
- On a page load, the output functions of the Divi Children Engine will grab that single theme mod which contains the whole of the custom CSS code, and it will send it to output at once, therefore doing it at a much higher speed than when your child theme is in Development Mode.
So, for example, if you have customized your UL lists, all the lines of the piece of code shown above would produce a line like this:
1 |
#left-area ul, .entry-content ul, .comment-content ul, body.et-pb-preview #main-content .container ul { font-size: 16px; line-height:2em; padding-left: 1.6em; padding-top: 8px; padding-bottom: 21px; list-style-type: square;} |
The CSS line above will be just a single part of the whole custom CSS generated by the child theme, but when you are in Production Mode it will not not even occupy a theme mod, since it will share one with the rest of the custom CSS rules that are generated and saved along with it.
All those lines, which in Production Mode are saved and retrieved using a single theme mod, form the CSS output generated by your child theme. Depending on the degree of customization of your site, this custom CSS output may include some CSS rules in just a few lines, or else be composed by dozens of them. They can be seen in the source code of the page:
When your child theme is strongly customized and therefore its custom CSS includes a lot of code, the speed improvement obtained from retrieving it (as opposed to having to generate it) and sending it to output at once becomes quite evident, doesn´t it?
Development Mode, Output Mode, Production Mode
- New Divi Children 3.0.10 update released - April 7, 2022
- New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
- Understanding Divi Children Output Mode - October 11, 2017
Hi Luis,
I have some problem I’ll submit to you.
My plateform
WP 4.8.4 (in french)
Divi-children Version 3.0.6
I have to customize my blog pages (2) so that I have page categorized by type of post. I have to modify index page. I follow this tuto : https://buzut.fr/3-facons-davoir-plusieurs-pages-de-blog-avec-wordpress/#approche3 (in french please)
In the Divi-children folder there is no index file, but only in parent folder.
even though modifying index file there is no effect. Do I necessary copy the index file to the children folder ? I used to play with “Child configurator”, and now I’m lost
Can you help me, please
Hi, Gilles.
yes, if you want to customize the index file you´d better copy it in the child theme folder, otherwise you´d lose your customizations when the parent theme updates.
hi i am getting these Notices
Notice: Undefined variable: dce_output in C:\Webserver\www\testside\wp-content\themes\forbund\divi-children-engine\dce-customizer\output.php on line 59
Notice: Undefined variable: dce_output in C:\Webserver\www\testside\wp-content\themes\forbund\divi-children-engine\dce-customizer\output\footer\footer-bottom-output.php on line 12
Notice: Undefined variable: dce_output in C:\Webserver\www\testside\wp-content\themes\forbund\divi-children-engine\dce-customizer\output\social-icons\header-social-icons-output.php on line 12
Notice: Undefined variable: dce_output in C:\Webserver\www\testside\wp-content\themes\forbund\divi-children-engine\dce-customizer\output\social-icons\footer-social-icons-output.php on line 12
Thanks for letting me know. I´m preparing a new version of Divi Children that will fix those issues.
The Divi Children 3.0.9 version with the fix for this issue has already been released.
See: https://divi4u.com/divi-children-plugin/changelog/
Hi Luis,
I have created numerous child themes using your wonderful plugin over the last couple of years – thank you!
I have a couple of little questions please….
– if I created a child theme using an earlier version of Divi Children is there anything I need to do?
– on at least one site I have removed the plugin after creating the child theme. Was that a bad idea? Should I upload a new version of the plugin or something?
Thanks very much in advance.
Hey Luis, thanks for that explanation, very helpful.
Just curious, does that mean anyone that creates a child theme not using your plugin may be running a bit slower since they don’t have your feature?
For that matter, I assume it also applies to any non-Divi child theme, too?
Another thought, does the Divi builder use the same process when you change design settings?
I typically create my own custom css file rather than use the Divi builder anyway, so I think I’m good, but it’s nice to know my way ends up running faster 🙂