Skip to content

Instantly share code, notes, and snippets.



Last active Jan 13, 2017
What would you like to do?
Color Picker in Customizer (WordPress/Genesis)
// 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 for more info.
'maker_primary_color', // Sets the ID of the new setting
// Defines arguments for the setting. See
'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
new WP_Customize_Color_Control(
'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