0

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

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' );
  • how to call in php. – Mehraj Khan Apr 16 '18 at 12:36
  • Add this code in your themes functions.php file and use get_theme_mod('color_section_name') to get value – Bhupen Apr 16 '18 at 13:03
0

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

0

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' );
New contributor
flash is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • flash, you should try to include some information about what's going on. If you include details then not only does the OP develop a better understanding but future users can also learn more and progress as developers themselves. – Tony Djukic 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.