Support » Developing with WordPress » How expensive is wp_add_inline_style and get_theme_mod ? Am i doing it right ?

  • Hey guys,

    I am building my first wordpress theme ( wordpress + woocommerce ) and it features a fully customizable slider ( colors, call to action box position, animations and many others ) and i am using the wp customizer to hold the settings for the slider and benefit from the live preview feature and then using the wp_add_inline_style in combination with get_theme_mod to load the styles for the slider. One thing i am unsure about is how much i could use those functions in my theme. Are they going to increase the load on my server if i use them alot? And i use for loops to register the settings/enqueue the styles per slide/per device to save lots of lines of repeating code. Is this a good practice? Which way results in better performance ?

    I have the following scenario:
    User can choose number of slides. Based on chosen number of slides – Slide’s X Settings Page + Individual Settings For The Slide gets registered by the customizer api using loops. I have like 25 diffrent options for each slide ( and also defaults in the slider options page ). Some settings are chosen by device ( mobile, tablet, desktop ). Everything looks and functions perfectly. But when i have to add the slider’s styles to the stylesheet my code looks like this:

    I have set up the classes of the elements like this:

    <h1 class="slide-title slide-X">

    So the defaults echo the styles for the .slide-title selector, and the options for the specific slide set styles for the .slide-title.slide-X selector. At the end all slides have the defaults styles enqueued and if settings have been set for a specific slide it will override the defaults just for that specific slide. So if you want the same styles and options for all slides you could just go and set the defaults. But if you want to make some correction to a specific slide you can override the defaults just for that specific slide without touching code. Thats why i made it like this.

    $styles_defaults = '';
    $setting_1_default_value = get_theme_mod('setting_1_default_value');
    $styles_defaults .= CSS Rule 1
    $setting_2_default_value = get_theme_mod('setting_2_default_value');
    $styles_defaults .= CSS Rule 2
    $setting_3_default_value = get_theme_mod('setting_3_default_value');
    $styles_defaults .= CSS Rule 3
    // ... and so on
    // Then
    $number_of_slides = get_theme_mod('number_of_slides');
    $devices = array('desktop','mobile','tablet');
    for ( $i = 1; $i <= $number_of_slides; $i++ ) {
        $current_slide_setting_1 = get_theme_mod('slide_$i_setting_1');
        $current_slide_styles .= 'CSS Rule 1';
        $current_slide_setting_2 = get_theme_mod('slide_$i_setting_2');
        $current_slide_styles .= 'CSS Rule 2'
        ... and so on
        foreach ( $devices as $device ) {
            $current_slide_setting_3 = get_theme_mod('slide_' . $i . '_setting_' . $device . \''\');
            $current_slide_styles .= 'CSS Rule 3';
            $current_slide_setting_4 = get_theme_mod('slide_' . $i . '_setting_' . $device . \''\');
            $current_slide_styles .= 'CSS Rule 4';
        .. and so on

    So i use the get_theme_mod() like a hundred of times to get the settings for the slider only. ( I plan to have more settings too ). Is this expensive for my server?

    I also use the same approach with loops to register the slides in the customizer. I did it to save many lines of repeating code for each slide / device. Do you think its a good practice to use loops for that ( to register the settings in the customizer api, to echo the javascript for the live preview and to enqueue the styles ) to save many lines of code. Which would result in a better performance: For loops or just manually add the code for every slide/setting/device ?

    • This topic was modified 2 weeks, 1 day ago by  ivchodev.
    • This topic was modified 2 weeks, 1 day ago by  ivchodev.
    • This topic was modified 2 weeks, 1 day ago by  ivchodev.
    • This topic was modified 2 weeks, 1 day ago by  ivchodev.
    • This topic was modified 2 weeks, 1 day ago by  ivchodev.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy


    It’s great that you are writing a theme and have created a very detailed slider.
    But they don’t really go together. Themes should present the content in a general way. If they get too specific, it is very difficult for the user to switch themes. The slider is so specific to whatever you are putting in the slides. If a user chose to build a slider and entered all those options for each slide and then wanted to try a different look for his store, he wouldn’t want to lose all that work (and might want to keep the slider in place). For this reason, we recommend that functionality should be in a plugin.

    As for your question of slowing down the server with repeated calls to get_theme_mod, you are using it oddly. The second parameter should be the default value, but you are using it to store defaults? It shouldn’t be slow to call it multiple times, since the value of the entire theme_mods array is retrieved once at the beginning and then the internal cache is used to get individual theme_mod entries.

    I don’t think you should have different options for different devices. Simplify, and do the thinking for the user. The visitor can change his window size or orientation and the slider should just handle it.
    I also don’t think you need to generate much styles. Can’t you have a stylesheet that establishes each option as a class, and then just put the right classes on the slides? Again, simplify. There shouldn’t be more CSS than content output on the page…

    Thanks for the nice response.

    Yes, i have the defaults for all slides in one section and the user can override them if they choose another setting for a specific slide ( they also update in the customizer ). I am giving them more flexibility, so they can do modifications per slide or if they want to do a fast setup – just setup the defaults for all slides.

    For example you are selling dresses and have a few diffrent banners in the slider, but on one of the pictures the model is right aligned on the picture and on other is left aligned. So, the user may want to position the call to action text and the ‘BUY’ button on diffrent places in diffrent slides. Also the banner may have color differences and you may want the texts in diffrent color on diffrent slides. Thats why i did it.

    But you have me a great idea tough, i think i am going to make the slider as a plugin which comes with the theme for free.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.