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.
** I have another query if you please, How to put a add link button instead of the url field ? **
THANK YOU IN ADVANCED
