How to add color picker in theme options

Question

I'm new to WordPress I want to add simple color picker in theme options.I tried but not getting can anyone suggest me?

Answer 1

Working code to set color customizer in wordpress theme settings:

  function color_customizer($wp_customize){
  $wp_customize->add_section( 'theme_colors_settings', array(
      'title' => __( 'Theme Colors Settings', 'themeslug' ),
      'priority' => 5,
    ) );

    $theme_colors = array();

    // Navigation Background Color
    $theme_colors[] = array(
      'slug'=>'color_section_name',
      'default' => '#000000',
      'label' => __('Color Section Title', 'themeslug')
    );

    foreach( $theme_colors as $color ) {

      $wp_customize->add_setting(
        $color['slug'], array(
          'default' => $color['default'],
          'sanitize_callback' => 'sanitize_hex_color',
          'type' => 'option',
          'capability' => 'edit_theme_options'
        )
      );

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

  add_action( 'customize_register', 'color_customizer' );

Answer 2

Use WordPress Customizer. To add WordPress Color Picker just use Customizer Manager with add_ methods for each Customizer object. Code may be used in functions.php file or in a separate customizer specific file.

function diwp_customizer_add_colorPicker( $wp_customize){
    
    // Add New Section: Background Colors
    $wp_customize->add_section( 'diwp_color_section', array(
        'title' => 'Background Color',
        'description' => 'Set Color For Background',
        'priority' => '40'
    ));
    
    // Add Settings
    $wp_customize->add_setting( 'diwp_background_color', array(
        'default' => '#370d07',
    ));
    
    
    // Add Controls
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'diwp_background_color', array(
        'label' => 'Choose Color',
        'section' => 'diwp_color_section',
        'settings' => 'diwp_background_color'
    
    )));
    
    
}

add_action( 'customize_register', 'diwp_customizer_add_colorPicker' );

To display changed color add this code in functions.php:

// displays custom background color
function diwp_generate_theme_option_css() {
    
    $backColor = get_theme_mod( 'diwp_background_color' );
    
    if ( ! empty( $backColor ) ):
        
        ?>
        <style type="text/css" id="diwp-theme-option-css">
            
            .container {
                background: <?php echo esc_html($backColor); ?>
            }
        
        </style>
    
    <?php
    
    endif;
}

add_action( 'wp_head', 'diwp_generate_theme_option_css' );

Original code here

Or You can see how to change a color with jQuery in this answer https://wordpress.stackexchange.com/a/360001/151351

Answer 3

Try these codes to your Functions.php

We add the details of customizer setting.

function theme_customize_register( $wp_customize ) {
      $wp_customize->add_setting( 'main_color', array(
        'default'   => '#ffffff',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
      ) );
add_action( 'customize_register', 'theme_customize_register' );

It then integrates the customizer and attribute in CSS file.

function theme_get_customizer_css() {
    ob_start();
    $main_color = get_theme_mod( 'main_color', '' );
    if ( ! empty( $main_color ) ) {
      ?>
      .contentDetails a {
      color: <?php echo $main_color; ?>;
      }
    <?php
  }
  $css = ob_get_clean();
  return $css;
}

And for CSS and the customizer connection.

function theme_enqueue_styles() {
  wp_enqueue_style( 'theme-styles', get_stylesheet_uri() );
  $custom_css = theme_get_customizer_css();
  wp_add_inline_style( 'theme-styles', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );