Improving this link color picker code

Question

I'm looking to create a color picker in the admin for the anchors. I know it can be done by CSS but I have a multisite and would like users to easily set the link colors.

The following works but there is a delay for the color to show unlike the color picker for the background color, so I'm just checking if the following can be improved:

function tcx_register_theme_customizer( $wp_customize ) {
    $wp_customize->add_setting(
    'tcx_link_color',
    array(
       // 'default'     => '#ff0000'
    )
    );
    $wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'link_color',
        array(
            'label'      => __( 'Link Color', 'tcx' ),
            'section'    => 'colors',
            'settings'   => 'tcx_link_color' 
        )
    )
    );
    }
    add_action( 'customize_register', 'tcx_register_theme_customizer' );

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

Any help appreciated

Answer 1

Create customizer.js file and put the following script in the customizer.js file

(function( $ ) {
    "use strict";   
    wp.customize( 'tcx_link_color', function( value ) {
        value.bind( function( to ) {
            $( 'a' ).css( 'color', to );
        } );
    }); 
})( jQuery );

And enqueue your customizer.js file by using wp_enqueue_script in your customizer.php file like this

function tcx_customizer_script() {
    wp_enqueue_script(
        'tcx-customizer',
        get_template_directory_uri() . '/js/customizer.js',
        array( 'jquery', 'customize-preview' ),
        '0.3.0',
        true
    );
}
add_action( 'customize_preview_init', 'tcx_customizer_script' );

Then it work fine