Set checkbox as checked by default in a metabox

Question

OK here I go again..lol sorry. And yes I have looked all over for an answer however the code I am using is different and I can't wrap my head around it.

So I got this from GenerateWP.com again I asked for assistance and never got an answer. here it is:

class TP_Primo_Featured_Image_Options_Custom_Meta_Box {
    public function __construct() {
        if ( is_admin() ) {
            add_action('load-post.php',array($this,'init_metabox'));
            add_action('load-post-new.php',array($this,'init_metabox'));
        }
    }

    public function init_metabox() {
        add_action('add_meta_boxes', array($this,'add_metabox'));
        add_action('save_post', array($this,'save_metabox'), 10, 2 );
    }

    public function add_metabox() {
        add_meta_box(
            'tp-primo-featured-image-options',
            __( 'Featured Image Options', 'tp-primo' ),
            array( $this, 'render_metaboxrender_tp_primo_featured_image_options_metabox' ),
            array( 'post', 'page' ),
            'side',
            'default'
        );
    }

    public function render_metaboxrender_tp_primo_featured_image_options_metabox( $post ) {

        // Retrieve an existing value from the database.
        $tp_primo_show_below_title = get_post_meta($post->ID,'tp_primo_show_below_title',true);
        $tp_primo_show_above_title = get_post_meta($post->ID,'tp_primo_show_above_title',true);
        $tp_primo_set_page_header = get_post_meta($post->ID,'tp_primo_set_page_header',true);
        $tp_primo_page_header_title_overlay = get_post_meta($post->ID, 'tp_primo_page_header_title_overlay',true);
        $tp_primo_page_header_title_overlay_parallax = get_post_meta($post->ID,'tp_primo_page_header_title_overlay_parallax',true);
        $tp_primo_page_header_height = get_post_meta($post->ID, 'tp_primo_page_header_height', true );

        // Set default values.
        if( empty( $tp_primo_show_below_title ) ) $tp_primo_show_below_title = 'checked';
        if( empty( $tp_primo_page_header_height ) ) $tp_primo_page_header_height = '';

        // Form fields.
        echo '<p><label><input type="checkbox" name="tp_primo_show_below_title" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_show_below_title . '" ' . checked( $tp_primo_show_below_title, 'checked', false ) . '> ' . __( 'Show Below Title', 'tp-primo' ) . '</label></p>';
        echo '<p><label><input type="checkbox" name="tp_primo_show_above_title" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_show_above_title . '" ' . checked( $tp_primo_show_above_title, 'checked', false ) . '> ' . __( 'Show Above Title', 'tp-primo' ) . '</label></p>';
        echo '<p><label><input type="checkbox" name="tp_primo_set_page_header" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_set_page_header . '" ' . checked( $tp_primo_set_page_header, 'checked', false ) . '> ' . __( 'Set as Page Header', 'tp-primo' ) . '</label></p>';
        echo '<p><label><input type="checkbox" name="tp_primo_page_header_title_overlay" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_page_header_title_overlay . '" ' . checked( $tp_primo_page_header_title_overlay, 'checked', false ) . '> ' . __( 'Page Header: Title Overlay', 'tp-primo' ) . '</label></p>';
        echo '<p><label><input type="checkbox" name="tp_primo_page_header_title_overlay_parallax" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_page_header_title_overlay_parallax . '" ' . checked( $tp_primo_page_header_title_overlay_parallax, 'checked', false ) . '> ' . __( 'Page Header: Title Overlay/Parrallax', 'tp-primo' ) . '</label></p>';
        echo '<label for="tp_primo_page_header_height" class="tp_primo_page_header_height_label">' . __('Page Header Height', 'tp-primo' ) . '</label>';
        echo '<input type="text" id="tp_primo_page_header_height" name="tp_primo_page_header_height" class="tp_primo_page_header_height_field" placeholder="' . esc_attr__( '', 'tp-primo' ) . '" value="' . esc_attr( $tp_primo_page_header_height ) . '">';
        echo '<p class="fi description">' . __( 'Use PX, %, REM, EM and VH based values.', 'tp-primo' ) . '</p>';
    }

    public function save_metabox( $post_id, $post ) {

        // Sanitize user input.
        $tp_primo_new_show_below_title = isset($_POST['tp_primo_show_below_title']) ? 'checked' : '';
        $tp_primo_new_show_above_title = isset($_POST['tp_primo_show_above_title']) ? 'checked' : '';
        $tp_primo_new_set_page_header = isset($_POST['tp_primo_set_page_header']) ? 'checked' : '';
        $tp_primo_new_page_header_title_overlay = isset($_POST['tp_primo_page_header_title_overlay']) ? 'checked' : '';
        $tp_primo_new_page_header_title_overlay_parallax = isset($_POST[ 'tp_primo_page_header_title_overlay_parallax']) ? 'checked' : '';
        $tp_primo_new_page_header_height = isset($_POST['tp_primo_page_header_height' ] ) ? sanitize_text_field( $_POST[ 'tp_primo_page_header_height' ] ) : '';

        // Update the meta field in the database.
        update_post_meta($post_id,'tp_primo_show_below_title',$tp_primo_new_show_below_title);
        update_post_meta($post_id,'tp_primo_show_above_title',$tp_primo_new_show_above_title);
        update_post_meta($post_id,'tp_primo_set_page_header',$tp_primo_new_set_page_header);
        update_post_meta($post_id,'tp_primo_page_header_title_overlay',$tp_primo_new_page_header_title_overlay);
        update_post_meta($post_id,'tp_primo_page_header_title_overlay_parallax',$tp_primo_new_page_header_title_overlay_parallax);
        update_post_meta( $post_id,'tp_primo_page_header_height',$tp_primo_new_page_header_height);
    }
}
new TP_Primo_Featured_Image_Options_Custom_Meta_Box;

As you can see, I tried adding if( empty( $tp_primo_show_below_title ) ) $tp_primo_show_below_title = 'checked'; under the section that says // Set default values.

"Show Below Title" is checked by default (which is what I want...woohoo) but if I uncheck it and check "Show Above Title" and hit update it shows "Show Below Title" AND "Show Above Title" checked...booooo!

I need to set "Show Below Title" ($tp_primo_show_below_title) as the default. I just can't seem to get it. What am I missing?

Any help is greatly appreciated.

Answer 1

You are saving unchecked checkbox values as empty strings:

public function save_metabox( $post_id, $post ) {

    // Sanitize user input.
    $tp_primo_new_show_below_title = isset($_POST['tp_primo_show_below_title']) ? 'checked' : '';
    ...

}

So when you fetch the saved unchecked value and then check for if(empty(...)), it returns true and sets 'checked' as the default value because empty(...):

Returns FALSE if var exists and has a non-empty, non-zero value. Otherwise returns TRUE.

The following things are considered to be empty:

"" (an empty string)
0 (0 as an integer)
0.0 (0 as a float)
"0" (0 as a string)
NULL
FALSE
array() (an empty array)
$var; (a variable declared, but without a value)

Since get_post_meta also returns an empty string if no value is found, the only way to distinguish is by saving a separate value for unchecked boxes. So instead of saving 'checked' and '' as the meta values, it would be better to use 1 and 0. This will also take less space in the database.

Edit:

Change the functions as follows:

public function render_metaboxrender_tp_primo_featured_image_options_metabox( $post ) {

    // Retrieve an existing value from the database.

    ...

    // Set default values.
    // Only non-existent checkbox values will be empty strings, as we are saving '1's and '0's.
    // We cannot use the empty function since empty('0') will also return true.
    if( $tp_primo_show_below_title == '' ) $tp_primo_show_below_title = '1'; //checked by default
    if( $tp_primo_page_header_height == '' ) $tp_primo_page_header_height = '0'; //unchecked by default

    // Form fields.
    echo '<p><label><input type="checkbox" name="tp_primo_show_below_title" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_show_below_title . '" ' . checked( $tp_primo_show_below_title, '1', false ) . '> ' . __( 'Show Below Title', 'tp-primo' ) . '</label></p>';
    echo '<p><label><input type="checkbox" name="tp_primo_show_above_title" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_show_above_title . '" ' . checked( $tp_primo_show_above_title, '1', false ) . '> ' . __( 'Show Above Title', 'tp-primo' ) . '</label></p>';
    echo '<p><label><input type="checkbox" name="tp_primo_set_page_header" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_set_page_header . '" ' . checked( $tp_primo_set_page_header, '1', false ) . '> ' . __( 'Set as Page Header', 'tp-primo' ) . '</label></p>';
    echo '<p><label><input type="checkbox" name="tp_primo_page_header_title_overlay" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_page_header_title_overlay . '" ' . checked( $tp_primo_page_header_title_overlay, '1', false ) . '> ' . __( 'Page Header: Title Overlay', 'tp-primo' ) . '</label></p>';
    echo '<p><label><input type="checkbox" name="tp_primo_page_header_title_overlay_parallax" class="tp_primo_featured_image_locations_field" value="' . $tp_primo_page_header_title_overlay_parallax . '" ' . checked( $tp_primo_page_header_title_overlay_parallax, '1', false ) . '> ' . __( 'Page Header: Title Overlay/Parrallax', 'tp-primo' ) . '</label></p>';

    ...

}

public function save_metabox( $post_id, $post ) {

    // Sanitize user input.
    $tp_primo_new_show_below_title = isset($_POST['tp_primo_show_below_title']) ? '1' : '0';
    $tp_primo_new_show_above_title = isset($_POST['tp_primo_show_above_title']) ? '1' : '0';
    $tp_primo_new_set_page_header = isset($_POST['tp_primo_set_page_header']) ? '1' : '0';
    $tp_primo_new_page_header_title_overlay = isset($_POST['tp_primo_page_header_title_overlay']) ? '1' : '0';
    $tp_primo_new_page_header_title_overlay_parallax = isset($_POST[ 'tp_primo_page_header_title_overlay_parallax']) ? '1' : '0';

    ...

    // Update the meta field in the database.

    ...

}