1

I'm making a theme settings page, so when I start coding the checkbox options, it works fine if the default value is unchecked. Here is the code:

function classy_show_resume_section_callback () {
    $options = get_option( 'classy_general_settings' );
    $html = "<label class='switch'>";

    if ( empty( $options['classy_show_resume'] ) ) $options['classy_show_resume'] = 0;

    $html .= "<input type='checkbox' name='classy_general_settings[classy_show_resume]' value='1' " . checked($options['classy_show_resume'], 1, false) . " >";

    $html .= "<div class='slider round'></div>";
    $html .= "</label>";

    echo $html;
}

However, because I want the checkbox as checked by default, I had to change the if condition of the previous code. If it is empty, make the $options var equals to 1. So the code will be:

function classy_show_resume_section_callback () {
    $options = get_option( 'classy_general_settings' );
    $html = "<label class='switch'>";

    if ( empty( $options['classy_show_resume'] ) ) $options['classy_show_resume'] = 1;

   $html .= "<input type='checkbox' name='classy_general_settings[classy_show_resume]' value='1' " . checked($options['classy_show_resume'], 1, false) . " >";

   $html .= "<div class='slider round'></div>";
   $html .= "</label>";

   echo $html;
}

So it worked. The checkbox gets checked by default, but when I unchecked and clicked save, an issue happened in the database. It worked fine and the value was removed, but in the front end, because the if condition value now is empty, it appears on the screen as checked all the time, although in real it's not in the DB (conflict).

So how do I fix this conflict?

1

Option-1: Change the option from show to hide:

The easiest way would be to change the naming and behaviour of the option. So instead of $options['classy_show_resume'], you may implement it as $options['classy_hide_resume'].

That way, by default hide option is not checked, that means you show it by default. Then hide it when this hide option is checked.

So simply by changing the name of the option, and then implementing hide option (instead of the show option) in your theme, you can fix it easily.

So your CODE will be like:

function classy_hide_resume_section_callback () {
    $options = get_option( 'classy_general_settings' );
    $html = "<label class='switch'>";

    if ( empty( $options['classy_hide_resume'] ) ) $options['classy_hide_resume'] = 0;

    $html .= "<input type='checkbox' name='classy_general_settings[classy_hide_resume]' value='1' " . checked($options['classy_hide_resume'], 1, false) . " >";

    $html .= "<div class='slider round'></div>";
    $html .= "</label>";

    echo $html;
}

Option-2: Make classy_show_resume checked by default:

If you must use classy_show_resume with default to checked, then you may use the following logic:

By default get_option( 'classy_general_settings' ) should return false and when it's saved as unchecked, it'll either be an empty string or an array with $options['classy_show_resume'] not set. So we'll use this to determine the default value vs. saved checked or unchecked value.

According to this, your new CODE will be like:

function classy_hide_resume_section_callback () {
    $options = get_option( 'classy_general_settings' );
    $classy_show_resume = 0;
    if ( $options === false ) {
        // nothing is set, so apply the default here
        $classy_show_resume = 1;
    }
    else if( is_array( $options ) && isset( $options['classy_show_resume'] ) ) {
        // classy_show_resume is checked
        $classy_show_resume = $options['classy_show_resume'];
    }

    $html = "<label class='switch'>";

    $html .= "<input type='checkbox' name='classy_general_settings[classy_show_resume]' value='1' " . checked( $classy_show_resume, 1, false ) . " >";

    $html .= "<div class='slider round'></div>";
    $html .= "</label>";

    echo $html;
}

Now it should be checked by default and show the correct checked | unchecked status after saving.

  • Thx for your comment :) and actually, It's a very nice idea but I was hoped to know a solution to the conflict issue if it possible because the checkbox as defaults checked means the sections is shown so there're more options ( settings ) about this section it will be connected for this specific checkbox for examples if I unchecked it the other options ( settings ) will be uneditable as these options edits some content at the section and because now the sections is hidden I can't let the user makes any edit. – hesham shawky Mar 4 '17 at 4:34
  • @heshamshawky Updated the answer, use Option-2 if you need the default checked option. – Fayaz Mar 4 '17 at 10:52
  • Thx a lot bro it's worked :) . – hesham shawky Mar 4 '17 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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