How to personalize Wordpress Color in otion of a custom theme?

Question

I find a code somewhere in the site that do a part of I need to do. It add a 1 color selector but I try to add multiple selector but I can't find the right way to do it.

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'header_textcolor' , array(
        'default'     => "#000000",
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'        => __( 'Header Color', 'mytheme' ),
        'section'    => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

function mytheme_customize_css()
{
    ?>
    <style type="text/css">
        h2 { color: #<?php echo get_theme_mod('header_textcolor', "#000000"); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

I try to find the way to do ad multiple selector, one for h1, one for h2, one for link, ... for example.

Anyone know how to the it the right way? I try a couple of thing, I can make it appear but then they are not active, I'm not familliar with the WP structure :/

Here's the strucure I'm trying to do:

    /** OPTION COLOR LINK**/
function mytheme_customize_register_link( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'header_textcolor' , array(
        'default'     => "#000000",
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'        => __( 'Link', 'mytheme' ),
        'section'    => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register_link' );

function mytheme_customize_css_link()
{
    ?>
    <style type="text/css">
        a { color: #<?php echo get_theme_mod('header_textcolor', "#000000"); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css_link');

/** OPTION COLOR LINK HOVER**/
function mytheme_customize_register_link_hover( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'header_textcolor' , array(
        'default'     => "#000000",
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'        => __( 'Link Hover', 'mytheme' ),
        'section'    => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register_link_hover' );

function mytheme_customize_css_link_hover()
{
    ?>
    <style type="text/css">
        a:hover, a:active { color: #<?php echo get_theme_mod('header_textcolor', "#000000"); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css_link_hover');

But I know it's something not right here but can't understand what.

Answer 1

hi i believe i am a few months late and probably you have already solved this problem but here is a solution to help people with the same problem.

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'link-color' , array(
            'default'     => "#000000",
            'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link-color', array(
            'label'        => __( 'Link Color', 'mytheme' ),
            'section'    => 'colors',
    ) ) );

        //All our sections, settings, and controls will be added here
        $wp_customize->add_setting( 'link-hover' , array(
            'default'     => "#ffffff",
            'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link-hover', array(
            'label'        => __( 'Link Hover', 'mytheme' ),
            'section'    => 'colors',
    ) ) );

}

add_action( 'customize_register', 'mytheme_customize_register' );

function mytheme_customize_css() { 
    ?>
    <style type="text/css">
            /* link color style define !important if need*/
            a { color: <?php echo get_theme_mod('link-color', "#000000"); ?> !important; }
            /* link color hover effect style define !important if need*/
            a:hover { color: <?php echo get_theme_mod('link-hover', "#ffffff"); ?> !important; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

I tested and it worked see below how it looks