How to add styles set by user in the customizer

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?

Read more here:: How to add styles set by user in the customizer

Leave a Reply

Your email address will not be published. Required fields are marked *