Skip to content

Instantly share code, notes, and snippets.

@dannydickson
Last active January 13, 2017 21:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dannydickson/e641a1cbe13e1b921aa143a4c3fad55f to your computer and use it in GitHub Desktop.
Save dannydickson/e641a1cbe13e1b921aa143a4c3fad55f to your computer and use it in GitHub Desktop.
Color Picker in Customizer (WordPress/Genesis)
<?php
// Set default color and store in function
function maker_customizer_get_default_primary_color() {
return '#57e5ae';
}
// Hooks into customize_register to add the custom code we'll need
add_action( 'customize_register', 'maker_customizer_register' );
function maker_customizer_register() { // Create new function called maker_customizer_register (notice how the name of the function matches the one in the hook above at the end of line 9. The function will not work unless the names match. The function we define below will not work unless the names match exactly)
global $wp_customize; // $wp_customize object is an instance of the WP_Customize_Manager class. This declaration must be present to make changes within the customizer, which we'll do below.
$wp_customize->add_setting( // Part of Theme Customization API. See https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting for more info.
'maker_primary_color', // Sets the ID of the new setting
// Defines arguments for the setting. See https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
array(
'default' => maker_customizer_get_default_primary_color(), // Sets default value for the setting. In this case, we are setting it to the output of the function maker_customizer_get_default_primary_color() which is defined on line 4
'sanitize_callback' => 'sanitize_hex_color', // Sanitizes the inputed data to protect the database
)
);
// Pre-defined class for rendering custom color selector in customizer
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'maker_primary_color',
array(
'description' => __( 'Set the default color.', 'maker' ), // ( 'sets description', 'theme name')
'label' => __( 'Primary Color', 'maker' ), // Label that will display in customizer
'section' => 'colors', // Adds to the colors section which is a default section
'settings' => 'maker_primary_color', // Pulls in the setting we defined on line 17
)
)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment