Colour Picker Customize Control in add attribute function

Hi everyone

I create the below customize_register.

add_action( 'customize_register', 'site_assets');

function site_assets() {

  $fields = array(
        array(
            'id' => 'as_primary_color',
     'label' => 'Primary Color',
     'type' => 'WP_Customize_Color_Control',
     'default' => '#34495e',
            'transport' => 'refresh',
    )
    );

    beans_register_wp_customize_options( $fields, 'site_assets' , array( 'title' => 'Custom Colors' ) );

}

I am trying to call the as_primary color to below attribute, instead of red. But i failed, any body help me to achieve this.

beans_add_attribute( 'beans_primary_menu', 'style', 'background: red') ;

Thanks in advance

Ramesh K

Hey Ramesh,

Here is the complete working snippet you can add to your child theme:

// Register customizer fields.
add_action( 'customize_register', 'example_customizer_fields' );

function example_customizer_fields() {

  $fields = array(
    array(
      'id' => 'as_primary_bg_color',
      'label' => 'Primary Nav Background Color',
      'type' => 'WP_Customize_Color_Control',
     'default' => '#34495e',
     'transport' => 'refresh',
   ),
  );

  beans_register_wp_customize_options( $fields, 'colors' );

}

// Setup document.
add_action( 'wp', 'example_setup_document' );

function example_setup_document() {

  // Automatically escaped by Beans.
  $color = get_theme_mod( 'as_primary_bg_color', '#34495e' );

 beans_add_attribute( 'beans_primary_menu', 'style', "background: {$color};" );

}

Note a few things:

1. I changed beans_register_wp_customize_options() second argument to colors so that your setting appears in the Colors Customizer section so that your setting integrates better instead of creating a new Custom Colors section. Since the Colors section is added by default and already has a title, I removed the third function argument which was used to set the the Custom Colors title.
2. I wrapped beans_add_attribute() in a wp action so that it runs after WP object is set up. By doing so, your code in example_setup_document() run when the wp action is called in WordPress and gives you access to a lot more functions such as Conditional Tags which are very handy. So as a rule of thumb, when you are using Beans HTML API functions in your functions.php, add it all in the example_setup_document() function as setup above (important: this doesn't apply in Page Template files).

Have fun,

Thanks a lot Thierry,

I tried the below code already. But what i missed is i tried "background: $color;". I love Beans framework very much, it has lot of flexibilities. It perfectly co-ordinate with WordPress and UIkit.

$color = get_theme_mod( 'as_primary_bg_color', '#34495e' );
beans_add_attribute( 'beans_primary_menu', 'style', "background: {$color};" );

Regards,

Ramesh K

My setting not woking.

  array(
        'id'    => 'blog_background_setting_3',
        'label'   => __('Blog background setting', 'travel-directory'),
        'type' => 'WP_Customize_Background_Position_Control',
        'settings' => array(
            'x' => 'background_position_x',
            'y' => 'background_position_y',
        ),
 )