Using Checkboxes on Plugin Options Page for Custom Plugin

I am creating my first WordPress plugin. It is a simple plugin that extends Visual Composer allowing you to remove the element options in VC (shown in the screenshot).

On the plugin “options” page I am creating a form to show/hide the elements. Here is my code:

// Going to add a conditional statement here to run this vc_remove_element function if the checkbox for Row is selected
vc_remove_element( "vc_row" ); // Row

add_action('admin_menu', 'plugin_admin_settings_tab');

function plugin_admin_settings_tab() {

    add_options_page('Remove Visual Composer Elements', 'Remove Visual Composer Elements', 'manage_options', 'remove_visual_composer_elements', 'plugin_rvce_options_page');

}

?>

<?php function plugin_rvce_options_page() { ?>

<div>

    <form action="options.php" method="post">

        <?php settings_fields('plugin_options'); ?>
        <?php do_settings_sections('plugin'); ?>

        <input name="Submit" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" />

    </form>

</div>

<?php } ?>

<?php

// ADMIN SETTINGS

add_action('admin_init', 'plugin_rvce_admin_init');

function plugin_rvce_admin_init(){

register_setting( 'plugin_options', 'plugin_options', 'plugin_rvce_options_validate' );
add_settings_section('plugin_main', 'Visual Composer Element Settings', 'plugin_rvce_section_text', 'plugin');
add_settings_field('Checkbox Element', 'Row', 'sandbox_checkbox_element_callback', 'plugin', 'plugin_main' );

} 

function sandbox_checkbox_element_callback() {

$options = get_option( 'plugin_options' );

$html="<input type="checkbox" id="checkbox_example" name="sandbox_theme_input_examples[checkbox_example]" value="1"" . checked( 1, $options['checkbox_example'], false ) . '/>';
$html .= '<label for="checkbox_example"> Hide</label>';

echo $html;

}

?>

<?php function plugin_rvce_section_text() {
    echo '<p>Remove Visual Composer elements from the interface.</p>';
} ?>

<?php // validate our options
function plugin_rvce_options_validate($input) {
$options = get_option('plugin_options');
return $options;
}

The form looks correct on the front end but when I click the checkbox and save it.. the settings are NOT saved. I can tell that the sandbox_checkbox_element_callback function is not set up correctly but I can’t figure out the correct way to set this up.

Form:

Can someone help me accomplish this?

This should do it:

// Going to add a conditional statement here to run this vc_remove_element function if the checkbox for Row is selected
vc_remove_element( "vc_row" ); // Row

add_action('admin_menu', 'plugin_admin_settings_tab');

function plugin_admin_settings_tab() {

    add_options_page('Remove Visual Composer Elements', 'Remove Visual Composer Elements', 'manage_options', 'remove_visual_composer_elements', 'plugin_rvce_options_page');
    add_action('admin_init', 'plugin_rvce_admin_init');

}

?>

<?php function plugin_rvce_options_page() { ?>

<div>

    <form action="options.php" method="post">

        <?php settings_fields('plugin_options'); ?>
        <?php do_settings_sections('plugin'); ?>

        <?php submit_button(); ?>

    </form>

</div>

<?php } ?>

<?php

// ADMIN SETTINGS


function plugin_rvce_admin_init(){

register_setting( 'plugin_options', 'plugin_options' );
add_settings_section('plugin_main', 'Visual Composer Element Settings', 'plugin_rvce_section_text', 'plugin');
add_settings_field('Checkbox Element', 'Row', 'sandbox_checkbox_element_callback', 'plugin', 'plugin_main' );

}

function sandbox_checkbox_element_callback() {

$options = get_option( 'plugin_options' );

$checked = ( isset($options['checkbox_example']) && $options['checkbox_example'] == 1) ? 1 : 0;

$html="<input type="checkbox" id="checkbox_example" name="plugin_options[checkbox_example]" value="1"" . checked( 1, $checked, false ) . '/>';
$html .= '<label for="checkbox_example"> Hide</label>';

echo $html;

}

?>

<?php function plugin_rvce_section_text() {
    echo '<p>Remove Visual Composer elements from the interface.</p>';
} ?>

<?php // validate our options
function plugin_rvce_options_validate($input) {
$options = get_option('plugin_options');
return $options;
}

You need to get the checked value first and see if it’s set in the first place. Because when you uncheck your checkbox the plugin_options in the database in the wp_options table will be nothing. So if it is nothing, you need to set the $checked to 0, and 1 otherwise. Also the name of the input field was wrong, and I replaced the submit button by the default one.

Tested on twenty sixteen theme, and worked for me 🙂 Hope this helps.