1

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?

0

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.

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.