Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin
Last active August 8, 2019 22:40
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tommcfarlin/d983d7b383b76e66e652 to your computer and use it in GitHub Desktop.
Save tommcfarlin/d983d7b383b76e66e652 to your computer and use it in GitHub Desktop.
<?php
/**
* Registers a new setting for 'Link Color' in the WordPress Theme Customizer
* that will allow users to change the color of their anchors across the
* entire site
*
* Note that functions prefixed with 'tmx' stand for 'Tom McFarlin Example.'
*
* @param object $wp_customize The WordPress Theme Customizer
* @package tmx
*/
function tmx_register_theme_customizer( $wp_customize ) {
/**
* Adds the setting with the unique id of 'tmx_link_color'.
*
* Also defines the transport method to 'postMessage' so that
* we can use JavaScript to dynamically change the color without
* using the default method of 'refresh.'
*/
$wp_customize->add_setting(
'tmx_link_color',
array(
'default' => '#000000',
'transport' => 'postMessage'
)
);
/**
* Introduces a new color control to the Theme Customizer in the
* 'Colors' section. This is the actual control that will allow
* a user to pick a color.
*/
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'link_color',
array(
'label' => __( 'Link Color', 'tmx' ),
'section' => 'colors',
'settings' => 'tmx_link_color'
)
)
);
} // end tcx_register_theme_customizer
add_action( 'customize_register', 'tmx_register_theme_customizer' );
/**
* Registers the Theme Customizer Preview JavaScript with WordPress.
*
* @package tmx
*/
function tmx_customizer_live_preview() {
wp_enqueue_script(
'tmx-theme-customizer',
get_template_directory_uri() . '/js/theme-customizer.js',
array( 'jquery', 'customize-preview' ),
'',
true
);
} // end tcx_customizer_live_preview
add_action( 'customize_preview_init', 'tmx_customizer_live_preview' );
(function( $ ) {
/**
* Connects to the Theme Customizer's color picker, and changes the anchor
* color whenever the user changes colors in the Theme Customizer.
*/
wp.customize( 'tmx_link_color', function( value ) {
value.bind( function( to ) {
$( 'a' ).css( 'color', to );
});
});
}( jQuery ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment