2

I'm trying to add a custom Control to change all the Headings color on my site without hardcoding it into my style.css

Is there a sample code that I can use as a reference to implement this using my Child Theme?

1 Answer 1

2

as far as I know there is no Wordpress Standard Control in the Theme Customizer for a Color Picker. But you can add one with a new Class. Paul underwood made a wonderful tutorial for adding Custom Controls here! And gave examples containing a color picker on github. (NOTE: Please note of the important below comment from WestonRuter, there is now a Color Picker Control in WP). A simpler approach could be to create a text-field and put your hex-value into it. Threre for you have to create a setting and control in your functions.php. The code in functions.php might looks like the following:

function yourtheme_customize_register($wp_customize) {
//Add new Section for Theme
    $wp_customize->add_section('yourtheme_theme_section', array(
        'title' => __('yourtheme Settings', 'yourtheme'),
       'priority' => 30,
    ));


//  Add new Setting
    $wp_customize->add_setting('headings_color', array(
        'default' => __('Please enter a Quote in Customizer', 'yourtheme'),
    ));

// Add new Control
    $wp_customize->add_control('headings_color_control', array(
        'label' => __('hex color', 'yourtheme'),
        'section' => 'your_theme_section',
        'settings' => 'headings_color',
        'type' => 'text',
    ));
add_action('customize_register', 'yourtheme_customize_register');

You can use the Value from Customizer in your template files (e.g. header.php) with the get_theme_mod() function. e.g.

 <style> h1, h2, h3 {color: <?php echo get_theme_mod('headings_color')  ;?>;}</style>

Hope that will help you.

3
  • Thanks! Your suggestion solved my problem. Anyone interested can view my complete codes including “Color Picker” from github
    – Caracos
    Mar 3, 2017 at 17:28
  • 1
    @Friedrich: So there is in fact a standard control for color picker control in core (WP_Customize_Color_Control). This is used for managing background color and header text color, among other theme options. I highly recommend re-using it instead of creating a custom hex control. You can see usage here: github.com/WordPress/twentysixteen/blob/6f1f3af/inc/… Mar 3, 2017 at 20:38
  • 1
    @WestonRuter: Forgot to mention within my first comment that I'm using the standard control for color picker within my codes. You can view my implementation here: github
    – Caracos
    Mar 4, 2017 at 2:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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