WordPress 3.4: Easily Add Custom Color Pickers to Your Theme


Here is an easy way to add custom colors to your WordPress Theme by adding colors pickers in the ‘colors’ section of the new WordPress 3.4 Theme Customizer. Add the function below to your functions.php and change the values in the $colors array. There is a slug (which you will use in the frontend of your site), default color and label.

// WORDPRESS 3.4 THEME OPTIONS
add_action( 'customize_register', 'hg_customize_register' );
function hg_customize_register($wp_customize)
{
  $colors = array();
  $colors[] = array( 'slug'=>'content_bg_color', 'default' => '#ffffff', 'label' => __( 'Content Background Color', 'YOUR_THEME_NAME' ) );
  $colors[] = array( 'slug'=>'content_text_color', 'default' => '#000000', 'label' => __( 'Content Text Color', 'YOUR_THEME_NAME' ) );

  foreach($colors as $color)
  {
    // SETTINGS
    $wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ));

    // CONTROLS
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $color['slug'], array( 'label' => $color['label'], 'section' => 'colors', 'settings' => $color['slug'] )));
  }
}

How to use in frontend

Simply use the slug you created in the $colors array and put the code in your header.php inside the head node.

<?php $content_text_color = get_option('content_text_color'); ?>
<style> #content { color: <?php echo $content_text_color; ?>; } </style>