How to add styles set by user in the customizer

Question

I want my theme to be very customizable, and so far i have provided the possibility to change text and link colors to the body, plus the background color which comes by default (I'm using the underscores starter template: https://underscores.me/) and background and link colors for the navigation bar.

The way i was able to implement this was by using the wp_add_inline_style that WordPress provides, which i learned with this excellent tutorial: https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/

This is my code so far (Warning, not following WP coding standards):

customizer.php:

function _s_customize_register($wp_customize) {
    // $wp_customize->add_setting('navigation_logo');
    // $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'navigation_logo', [
    //  'label' => 'Kindly',
    //  'section' => 'title_tagline',
    //  'settings' => 'navigation_logo'
    // ]));

    $wp_customize->add_section('header_navigation', [
        'title'          => __('Header Navigation'),
        'description'    => __('Customize your header navigation'),
        'priority'       => 50
    ]);

    $wp_customize->add_setting('header_navigation_background_color', [
        'default'   => '#000',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);
    $wp_customize->add_setting('header_navigation_link_color', [
        'default'   => '#fff',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);
    $wp_customize->add_setting('text_color', [
        'default'   => '#000',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);
    $wp_customize->add_setting('link_color', [
        'default'   => '',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_navigation_background_color', [
            'section' => 'header_navigation',
            'label'   => esc_html__('Background color')
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_navigation_link_color', [
            'section' => 'header_navigation',
            'label'   => esc_html__('Link color')
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'background_color', [
            'section'  => 'widgets',
            'label'    => esc_html__('Stuff color')
            // 'settings' => ''
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'text_color', [
            'section' => 'colors',
            'label'   => esc_html__('Text color')
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'link_color', [
            'section' => 'colors',
            'label'   => esc_html__('Link Color')
        ]
    ));

    // This is underscores code from here:
    $wp_customize->get_setting('blogname')->transport         = 'postMessage';
    $wp_customize->get_setting('blogdescription')->transport  = 'postMessage';
    $wp_customize->get_setting('header_textcolor')->transport = 'postMessage';

    if (isset($wp_customize->selective_refresh)) {
        $wp_customize->selective_refresh->add_partial('blogname', [
            'selector'        => '.site-title a',
            'render_callback' => '_s_customize_partial_blogname',
        ]);
        $wp_customize->selective_refresh->add_partial('blogdescription', [
            'selector'        => '.site-description',
            'render_callback' => '_s_customize_partial_blogdescription',
        ]);
    }
}
add_action('customize_register', '_s_customize_register');

functions.php:

function theme_get_customizer_css()
{
    $modificationsAndStyles = [
        'text_color' => [
            'body' => [
                'color'
            ]
        ],
        'link_color' => [
            'a' => [
                'color'
            ]
        ],
        'header_navigation_background_color' => [
            '.navigation' => [
                'background-color'
            ]
        ],
        'header_navigation_link_color' => [
            '.menu-item a' => [
                'color'
            ]
        ]
    ];
    $css = '';
    $indentation = str_repeat(' ', 4);

    foreach ($modificationsAndStyles as $modification => $styles)
    {
        $themeModification = sanitize_hex_color(get_theme_mod($modification));

        if (!empty($themeModification))
        {
            foreach ($styles as $selector => $properties)
            {
                $css .= "$selector {\n";

                foreach ($properties as $property)
                {
                    $css .= "$indentation$property: $themeModification;\n";
                }

                $css .= "}\n";
            }
        }
    }

    return $css;
}

function _s_scripts() 
{
    wp_enqueue_style('_s-style', get_stylesheet_uri());
    // Custom modifications for the theme
    // Got this code from this nicely nice tutorial:
    // https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/
    // $custom_css = theme_get_customizer_css($modificationsAndStyles);
    $custom_css = theme_get_customizer_css();
    wp_add_inline_style('_s-style', trim($custom_css));

    wp_enqueue_script('_s-navigation', get_template_directory_uri() . '/js/navigation.js', [], '20151215', true);

    wp_enqueue_script('_s-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', [], '20151215', true);

    wp_enqueue_script('scrolling-behaviors', get_template_directory_uri() . '/js/scrolling-behaviors.js');

    wp_enqueue_script('interactions', get_template_directory_uri() . '/js/interactions.js');

    if (is_singular() && comments_open() && get_option('thread_comments')) 
    {
        wp_enqueue_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', '_s_scripts');

It works pretty well. However, i'm not very sure about adding the styles as inline styles in the long run.

I also found another way: https://code.tutsplus.com/tutorials/settings-and-controls-for-a-color-scheme-in-the-theme-customizer--cms-21350

And it looks nice, it adds styles to the head of the theme with the wp_head hook. However, i'm not sure if this is the best option either.

What are some ways i can allow users to change the styles for the theme through the customizer? What would be the best way?

Answer 1

I haven't clarified what is the best method to apply styles from the customizer. However, this is the function i am using right now (Not using the previous one anymore, therefore, you can remove the wp_add_inline_style part):

// I like this way so much more that i'm going to cry.
// Thanks to:
// https://code.tutsplus.com/tutorials/settings-and-controls-for-a-color-scheme-in-the-theme-customizer--cms-21350
// https://code.tutsplus.com/tutorials/adding-the-css-for-a-color-scheme-in-the-theme-customizer--cms-21351
function theme_customizer_styles()
{
    $textColor = get_theme_mod('text_color');
    $linkColor = get_theme_mod('link_color');
    $headerNavigationBackgroundColor = get_theme_mod('header_navigation_background_color');
    $headerNavigationLinkColor = get_theme_mod('header_navigation_link_color');

    ob_start();
?>

    <style>
        body {
            color: <?php echo $textColor; ?>;
        }

        a {
            color: <?php echo $linkColor; ?>;
        }

        .navigation {
            background-color: <?php echo $headerNavigationBackgroundColor; ?>;
        }

        .menu-item a {
            color: <?php echo $headerNavigationLinkColor; ?>;
        }
    </style>

<?php
    ob_flush();
}
add_action('wp_head', 'theme_customizer_styles');

There is a lot of room for improvement of course, please feel free to add on this approach, or to provide us with a better one, or your preferred one.