Question 303467 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Display settings specific to radio options

I want to create a condition so that by selecting an option from the radio, the settings specific to it will be displayed.

I searched a lot for this topic and couldn’t find anything useful, so I wrote the simple code below.

This code almost works, that is, by selecting a radio option and refreshing the entire screen, the live preview of the settings for the desired option will be displayed.

Is there a way to display the settings for a radio option as soon as it is selected so that I don’t have to refresh the full live preview screen every time I select a radio option?

The codes I put in the functions.php file:

function customize_pro($wp_customize){

$wp_customize->add_section('Select_txt_radio', array(
    'title' => esc_html__('Show or hide settings', 'section'),
    'priority' => 5,
 ));  
    

// Create a radio controller
    
$wp_customize->add_setting( 'setting_radio_main', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);

    
$wp_customize->add_control('setting_radio_main', 
array(
    
    'type' => 'radio',
    'label' => esc_html__('Available options'),
    'description' => esc_html__('By selecting each option, the corresponding settings will appear'),
    'section' => 'Select_txt_radio',
    'priority' => 1,
    'choices' => array(
        'ption1' => 'ption A',
        'ption2' => 'ption B',
        'ption3' => 'ption C',
        ),
    )
);
    
    

// By selecting any option, the following terms apply
    
$select_control = get_theme_mod( 'setting_radio_main' );  // Radio configuration ID
    
  if( $select_control === 'ption1' ) { 

// Display the following settings if you select the first option
      
$wp_customize->add_setting( 'setting_radio_ption1', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption1',
   array(
     
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption1' ),
      ),
       
   )
);
      
return;
      
  } elseif( $select_control === 'ption2' ) {
      
// Display the following settings if you choose the second option
      
$wp_customize->add_setting( 'setting_radio_ption2', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption2',
   array(
     
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption2' ),
      ),
       
   )
);
      
return;
      
  } elseif( $select_control === 'ption3' ) {
      
      
// Display the following settings if you choose the third option
      
$wp_customize->add_setting( 'setting_radio_ption3', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption3',
   array(
      
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption3' ),
      ),
       
   )
);
      
return;
      
  } else{
      
// Display the following settings if no option is active 
      
$wp_customize->add_setting( 'setting_radio_ptionNon', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);

      
$wp_customize->add_control( 'setting_radio_ptionNon',
   array(

      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'default' ),
      ),
   )
);
                                                           
return;
      
  }

}
add_action( 'customize_register', 'customize_pro' );

Edit:

I know that the page will be refreshed with the code 'transport' => 'refresh'.

But when the page is refreshed, the settings of the desired option do not appear.

After selecting an option I have to click publish button in customization. and then refresh the live preview page through the full browser (refresh the page by updating its address); In this case, I can see the settings for that option.

I am looking for a solution so that when an option is selected, its settings will appear immediately and there is no need to click on the publish button and refresh the page through the browser.

The code I wrote has some bugs that I need help fixing and this code is just a rough idea.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to solve my problem by searching the internet and using the following tutorial:

    What’s new with the Customizer

    Complete edited code:

    Note: The code I wrote below is not exactly the code I wrote in the question above. This code has been edited, tested and works.

    function customize_pro($wp_customize){


$wp_customize->add_section('Select_txt_radio', array(
    'title' => esc_html__('Show or hide settings', 'section'),
    'priority' => 5,
));  
    
    

// Create a radio controller
    
$wp_customize->add_setting( 'setting_radio_main', 
 array(
     
    'default' => 'ption2',
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',  //postMessage
     
 ) 
);
    

    
$wp_customize->add_control('setting_radio_main', 
array(
    
    'type' => 'radio',
    'label' => esc_html__('Available options'),
    'description' => esc_html__('By selecting each option, the corresponding settings will appear'),
    'section' => 'Select_txt_radio',
    'priority' => 1,
    'choices' => array(
        'ption1' => 'ption A',
        'ption2' => 'ption B',
        'ption3' => 'ption C',
        ),
    )
);
    
    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
    // Creating the controller related to option 1
    
    $wp_customize->add_setting( 'setting_radio_ption1', 
 array( 
     
    'type'       => 'theme_mod', 
     'transport'  => 'refresh',  //postMessage
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption1',
   array(
     
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption1' ),
      ),
       'active_callback' => 'ption1_callback', // Connection to the function written for option 1 (controller display condition)
       
   )
);
    
    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
    // Creating the controller related to option 2
    
    $wp_customize->add_setting( 'setting_radio_ption2', 
 array( 
     
    'type'       => 'theme_mod', 
     'transport'  => 'refresh',  //postMessage
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption2',
   array(
     
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption2' ),
      ),
       'active_callback' => 'ption2_callback', // Connection to the function written for option 2 (controller display condition)
       
   )
);
    
    
    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
    // Creating the controller related to option 3
    
    
    
    $wp_customize->add_setting( 'setting_radio_ption3', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',  //postMessage
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption3',
   array(
      
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption3' ),
      ),
        'active_callback' => 'ption3_callback',  // Connection to the function written for option 3 (controller display condition)
       
   )
);


}
add_action( 'customize_register', 'customize_pro' );



////////////////////////////////////////////////////////////////////////////////////////////////


// Functions to display controller with options selection


function ption1_callback( $control ) {
   if ( $control->manager->get_setting('setting_radio_main')->value() == 'ption1' ) {
      return true;
   } else {
      return false;
   }
}


function ption2_callback( $control ) {
   if ( $control->manager->get_setting('setting_radio_main')->value() == 'ption2' ) {
      return true;
   } else {
      return false;
   }
}



function ption3_callback( $control ) {
   if ( $control->manager->get_setting('setting_radio_main')->value() == 'ption3' ) {
      return true;
   } else {
      return false;
   }
}

    I hope this answer will be useful for friends who are looking for a solution to this problem.


  2. 0

    You need to use the active_callback param when adding each of the conditional settings. Also, not sure if ption is a misspelling of option in your code example.

    $wp_customize->add_setting( 'setting_radio_ption1', 
 array( 
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
    'active_callback' => 'my_conditional_check'
 ) 
);

function my_conditional_check() {
  return get_theme_mod( 'setting_radio_main' ) === 'ption1';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search