4

I have built an awesome theme, which is very flexible, because it has 500 settings of different (custom) types in the theme customizer. I generate the live css like it says in the codex:

function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             h1 { color:<?php echo get_theme_mod('header_color', '#000000'); ?>; }
             h2 { color:<?php echo get_theme_mod('tagline_color', '#000000'); ?>; }
             ... 498 more ...
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

Now my site is slow. I think it is because there are 500 database calls for every page load. Is there a way to speed up my site and still have 500 customization options?

  • sorry, but as the answer to the question you link to in answer says, there should not be any difference on the front end. This code is actually valid and performant and the values are already cached in memory and there is no need or possibility of significant improvement. The only slow down on the front-end will come because of the html is much bigger and takes more time to load and get parsed. – Mark Kaplun Aug 20 '16 at 12:49
  • @MarkKaplun Yes, I know that, but I didn't want to overly complicate the question I was going to answer myself. The slowdown is a combination of reducing lookups, parsing and so on. I measured an increase in overall speed up to a factor of ten. – cjbj Aug 20 '16 at 12:54
  • Actually, the purpose why I built my own performance plugin in the first place was that I suspected the theme customizer of eating up half the page build time. – cjbj Aug 20 '16 at 12:58
  • Well, obviously if you have many mods the overhead of accessing all of them will accumulate, the question is not if it will end up in significant difference, but whether the difference is actually something that you will notice on the front-end. IMHO the profiling data might actually be more interesting in the answer, especially if it is true for all PHP versions. – Mark Kaplun Aug 20 '16 at 14:02
3

How often are the theme mods changed? A lot in the design phase, maybe a couple of times later on. Always by admins, never by ordinary users, let alone visitors. So, it doesn't make sense to generate the full css at every pageload (additional background info).

A better approach is to generate the css only for the admin and store the result for others. This will reduce the amount of database calls from 500 to 1.

function mytheme_customize_css()
{
    if (current_user_can( 'edit_theme_options' ) ) {
         $assemble_css = "
         <style type='text/css'>
             h1 { color:" . get_theme_mod( 'header_color', '#000000' ); . "; }
             h2 { color:" . get_theme_mod( 'tagline_color', '#ffffff' ); . "; }
             ... 498 more ...
         </style>";
         set_theme_mod( 'all_mods', $assemble_css );
    }
    echo get_theme_mod ( 'all_mods', '' );
}
add_action( 'wp_head', 'mytheme_customize_css' );

This is better, but how often will all 500 mods actually be used? And is it really ideal to have the default css values in this function in stead of style.css? Better move the defaults there and only generate a css line if there is a value. This gives:

function mytheme_customize_css()
{
    if (current_user_can( 'edit_theme_options' ) ) {
         $assemble_css = "
         <style type='text/css'>";
         if ( get_theme_mod('header_color') ) $assemble_css .= "
             h1 { color:" . get_theme_mod( 'header_color' ); . "; }";
         if ( get_theme_mod('tagline_color') ) $assemble_css .= "
             h2 { color:" . get_theme_mod( 'tagline_color' ); . "; }";
         ... 498 more ...
         $assemble_css .= "</style>";
         set_theme_mod( 'all_mods', $assemble_css );
    }
    echo get_theme_mod ( 'all_mods', '' );
}
add_action( 'wp_head', 'mytheme_customize_css' );

If you actually have this many mods, it would be even better to assemble them in a datastructure and loop through it rather than have 500 lines in the function (and several thousand lines of code to add the sections to the customizer).

Also, writing the css directly to the head like this is not great. You should be using add_inline_style. But that's another thing.

  • You answer your own question within 0 second! – Sumit May 17 '16 at 8:59
  • 1
    @Sumit, Yes, I know I'm great ;-) – cjbj May 17 '16 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.