How to Add Checkbox Field to WordPress Customizer

In WordPress Customizer, you can add different types of HTML input fields and checkbox is one of them.

To add a checkbox with WordPress customizer all you have to set the type of customizer control to the checkbox. Let me show you what I am talking about.

So I am going to add a new section named ‘My Custom Checkbox’ to my customizer window and inside this section, I will add a checkbox to show or hide the welcome message to my website.

If you don’t know how to add panel, section, setting, and control, I will highly recommend you to check out WordPress Customizer Tutorial For Beginners.

You can also add any new input field or option to the existing panels and sections of the WordPress customizer, but to make it clear and easy to understand, I am just creating a separate section to add a checkbox.

Add Checkbox to WordPress Customizer

Add this code to your theme’s functions.php file or any customizer specific file.


function diwp_add_checkbox($wp_customize){

	//add section
	$wp_customize->add_section( 'diwp_checkbox_section', array(

				'title' => 'My Custom Checkbox',
				'priority' => 10,
				'description' => 'Welcome to My Custom Checkbox section'
	));

	//add setting
	$wp_customize->add_setting( 'diwp_checkbox', array(
				'default' => '',
	));

	//add control
	$wp_customize->add_control( 'diwp_checkbox_control', array(
				'label' => 'Display Welcome Message',
				'type'  => 'checkbox', // this indicates the type of control
				'section' => 'diwp_checkbox_section',
				'settings' => 'diwp_checkbox'
	));

}

add_action( 'customize_register', 'diwp_add_checkbox' );

The above code will add a section My Custom Checkbox to the customizer window and inside this section, you will find the checkbox to show and hide the message. As shown in the image below.

wordpress-customizer-checkbox

So by using the above code, you can add a checkbox but the point is how you can get the value of this checkbox.

Well, you can use get_theme_mod( ‘your_setting_name’ ) function, to get the value of any customizer control.

Get Value of WordPress Customizer Checkbox

So in the above case, I will use my setting name diwp_checkbox along with the get_theme_mod() function to get the value of the customizer checkbox.

<?php echo get_theme_mod( "diwp_checkbox' ); ?>

In general, checkbox control returns the boolean value true | false, however, you can pass the custom value as well. But in this case, I am using the default one.

So to display the welcome message, I will simply use a conditional statement something like:


<?php
	$showMessage  = get_theme_mod( 'diwp_checkbox' );
	
	if( $showMessage == true ){
		
            echo "Hello! Welcome to dive in WP";

        }	
?>

I hope this article helps you to understand how to add a checkbox field with the WordPress customizer.

Share it to the Community!

You May Also Like These wordpress customizer Posts:

One Reply to “How to Add Checkbox Field to WordPress Customizer”

Leave a Reply

Your email address will not be published. Required fields are marked *