0

I created a checkbox section to let user to choose whether wants to display a button in the menu or not,
I set the default value to false, and created two fields for the label of the button and the link.

Now I want the two fields to appear in the side menu in the customization screen if the user tick the checkbox only and be hidden if the checkbox is not ticked.

This is the used code:

/**
 * Header Options
 */
$wp_customize->add_section( 'header_options' , array(
    'title'         => __( 'Header Optons', 'consulty' ),
    'description'   => __( 'Here, You can add header button URL'),
    'panel'         => 'consulty_options',
) );

/**
 * Display Button Header ?
 */
$wp_customize->add_setting('display_header_btn', array(
    'default'     => false,

));

/**
 * Display Button Header Control
 */
$wp_customize->add_control('display_header_button', array(
    'label'                 => __('Display Bottom Header Button ?', 'consulty'),
    'description'           => __('Tick the check box to display the header button', 'consulty'),
    'section'               => 'header_options',
    'settings'              => 'display_header_btn',
    'type'                  => 'checkbox',
));

// Header Button Label & Link
$wp_customize->add_setting('header_btn_label', array(

));

// Button Label
$wp_customize->add_control('header_btn_txt', array(
    'label'                 => __('Button Label', 'consulty'),
    'section'               => 'header_options',
    'settings'              => 'header_btn',
    'type'                  => 'text',
));

// Button URL
$wp_customize->add_setting('header_btn_url', array(

));
$wp_customize->add_control('header_btn_link', array(
    'label'                 => __('Button URL', 'consulty'),
    'section'               => 'header_options',
    'settings'              => 'header_btn',
    'type'                  => 'url',
));

and this is HTML code:

<?php 
$header_btn   =   get_theme_mod( 'display_header_btn' );
$btn_label    =   get_theme_mod('header_btn_label');
$btn_url      =   get_theme_mod('header_btn_url');
if ( $header_btn == true ) { 
?>
<div class="btn-box">
  <a href="<?php echo esc_url( $btn_url ); ?>" class="theme-btn"><?php echo esc_html( $btn_label ); ?></a>
</div>
<?php } ?>

And to clarify more as in the image, the two fields are visible even though the checkbox is not ticked, so I want to hide them as long as the user does not tick the checkbox, and appear if the checkbox is ticked.

enter image description here

** I have another query if you please, How to put a add link button instead of the url field ? **

THANK YOU IN ADVANCED

1 Answer 1

0

This is possible with JavaScript. You have to add an event listener to the checkbox and then show/hide the inputs depending on the checked state. Here is an example:

checkbx = document.getElementById("checkbox-id")
input1 = document.getElementById("input1-id")
input2 = document.getElementById("input2-id")
checkbx.addEventListener("change", () => {
if(checkbx.checked){
    input1.style.display = "block";
    input2.style.display = "block";
}else{
    input1.style.display = "none";
    input2.style.display = "none";
}
 })

Sorry for bad formatting, I'm on my phone.

1
  • Thank you @jorensm for your interesting and replying , unfortunately The code didn't work, I think there are hooks, filters or functions in WordPress besides the JS code to execute the required action. Dec 13, 2022 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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