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):

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:

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

• Author
• Recent Posts

Luis Alejandre

Luis is the creator of Divi4u and the editor of this blog. You can read more about Luis in his About page. Luis also created and runs the free online WordPress tool WPThemeDetector.

Latest posts by Luis Alejandre (see all)

• 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