skip to Main Content

I’m beginner in WordPress theme development and I’m learning customizer API.
However, I’m stuck in place where I was trying to use Customizer API to change the Navigation Menu background color using WordPress Customizer but it’s showing nothing despite I’ve included all the necessary lines according to my knowledge. Here is the code I was trying to implement inside – functions.php:

function textdomain_pro_theme($wp_customize) {
$wp_customize->add_panel( 'pro_features', array(
    'title' => 'Pro Features',
    'priority' => 10 
));
$wp_customize->add_section( 'color_picking' , array(
    'title' => 'Color Settings',
    'panel' => 'pro_features',
    'priority' => 30
      ));

$wp_customize->add_setting( 'nav_menu_bgcolor', array(
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
    'default' => '#ff2525',
    'transport' => 'refresh',
    'sanitize_callback' => 'sanitize_hex_color',
    ));
$wp_customize->add_control( 'nav_menu_bgcolor', array(
    'label' => 'Navigation Bar Color',
    'type' => 'color',
    'section' => 'pro_features',
    ));
}
add_action( 'customize_register', 'textdomain_pro_theme' );

CUSTOMIZER DOESN’T SHOW THE NEW SECTION. WHAT WENT WRONG?

MY CURRENT WORDPRESS VERSION IS 6.1

2

Answers


  1. You have used the wrong section id in add_control('nav_menu_bgcolor'). replace it with color_picking

    Try out this code if helps.

    function textdomain_pro_theme($wp_customize) {
    $wp_customize->add_panel( 'pro_features', array(
        'title' => 'Pro Features',
        'priority' => 10 
    ));
    $wp_customize->add_section( 'color_picking' , array(
        'title' => 'Color Settings',
        'panel' => 'pro_features',
        'priority' => 30
          ));
    
    $wp_customize->add_setting( 'nav_menu_bgcolor', array(
        'type' => 'theme_mod',
        'capability' => 'edit_theme_options',
        'default' => '#ff2525',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
        ));
    $wp_customize->add_control( 'nav_menu_bgcolor', array(
        'label' => 'Navigation Bar Color',
        'type' => 'color',
        'section' => 'color_picking',
        ));
    }
    add_action( 'customize_register', 'textdomain_pro_theme' );
    
    Login or Signup to reply.
  2. insert the code in your function PHP file

    function textdomain_pro_theme($wp_customize) {

    $main_section_id = 'pro_features';
    $wp_customize->add_section( $main_section_id, array(
        'title' => 'Color Picking',
        'priority' => 30
    ));
    
    $wp_customize->add_setting( 'nav_menu_bgcolor', array(
        'type' => 'theme_mod',
        'capability' => 'edit_theme_options',
        'default' => '#ff2525',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
    ));
    
    $wp_customize->add_control( 'nav_menu_bgcolor', array(
        'label' => 'Navigation Bar Color',
        'type' => 'color',
        'section' => $main_section_id,
    ));
    }
    add_action( 'customize_register', 'textdomain_pro_theme' );
    
    // input the color in your Navigation Menu background color section
    echo get_theme_mod('nav_menu_bgcolor');
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search