How to set radio buttons in custom meta box checked?

3 Views

I created a custom meta box where you can choose a value from some radio buttons and save it to the post_meta table in the wordpress database. With the following code I save the value: 

function save_value_of_my_custom_metabox ($post_id, $post){
    $post_id = get_the_ID();
    $new_meta_value = ( isset( $_POST['the_name_of_the_radio_buttons'] ) ? sanitize_html_class( $_POST['the_name_of_the_radio_buttons'] ) : '' );
    $meta_key = 'my_key';
    update_post_meta( $post_id, $meta_key, $new_meta_value );
}

But if the post will be edited again I want the radio button with the current value to set checked. What is the best way to do that? Here is the function to display the meta box:

Read More
function my_custom_meta_box( $object, $box ) {
    $post_id=get_the_ID();
    $key='my_key';
    $the_value_that_should_be_set_to_checked=get_post_meta( $post_id, $key);
    //$the_value_that_should_be_set_to_checked[0] returns the value as string
    ?>    
    <label for="my_custom_metabox"><?php _e( "Choose value:", 'choose_value' ); ?></label>
    <br />  
      <input type="radio" name="the_name_of_the_radio_buttons" value="value1">Value1<br>
      <input type="radio" name="the_name_of_the_radio_buttons" value="value2">Value2<br>
      <input type="radio" name="the_name_of_the_radio_buttons" value="value3">Value3<br>
      <input type="radio" name="the_name_of_the_radio_buttons" value="value4">Value4<br>

        <?php
}

I could write something like if(isset($the_value_that_should_be_set_to_checked[0])=="value of that line") echo "checked='checked'"; in every line but that doesn’t seem very elegant to me. Using javascript is also pretty complicated in wordpress because I would have to use the hooks, enqueue the script and just for changing the checked property with one line of javascript it’s not worth it. What’s the best practice for that?

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. I am assuming that you are trying to add custom meta box for ‘Posts’. Below code will work for you. It will show Radio buttons on add new post or edit post screen. Please read the comments in the code. It will help you in understanding the code.

    You can use WordPress’s checked function to decide whether to select the radio button or not.

    Feel free to ask if you have any doubts.

    /**
 * Adds a box to the main column on the Post add/edit screens.
 */
function wdm_add_meta_box() {

        add_meta_box(
                'wdm_sectionid', 'Radio Buttons Meta Box', 'wdm_meta_box_callback', 'post'
        ); //you can change the 4th paramter i.e. post to custom post type name, if you want it for something else

}

add_action( 'add_meta_boxes', 'wdm_add_meta_box' );

/**
 * Prints the box content.
 * 
 * @param WP_Post $post The object for the current post/page.
 */
function wdm_meta_box_callback( $post ) {

        // Add an nonce field so we can check for it later.
        wp_nonce_field( 'wdm_meta_box', 'wdm_meta_box_nonce' );

        /*
         * Use get_post_meta() to retrieve an existing value
         * from the database and use the value for the form.
         */
        $value = get_post_meta( $post->ID, 'my_key', true ); //my_key is a meta_key. Change it to whatever you want

        ?>
        <label for="wdm_new_field"><?php _e( "Choose value:", 'choose_value' ); ?></label>
        <br />  
        <input type="radio" name="the_name_of_the_radio_buttons" value="value1" <?php checked( $value, 'value1' ); ?> >Value1<br>
        <input type="radio" name="the_name_of_the_radio_buttons" value="value2" <?php checked( $value, 'value2' ); ?> >Value2<br>
        <input type="radio" name="the_name_of_the_radio_buttons" value="value3" <?php checked( $value, 'value3' ); ?> >Value3<br>
        <input type="radio" name="the_name_of_the_radio_buttons" value="value4" <?php checked( $value, 'value4' ); ?> >Value4<br>

        <?php

}

/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */
function wdm_save_meta_box_data( $post_id ) {

        /*
         * We need to verify this came from our screen and with proper authorization,
         * because the save_post action can be triggered at other times.
         */

        // Check if our nonce is set.
        if ( !isset( $_POST['wdm_meta_box_nonce'] ) ) {
                return;
        }

        // Verify that the nonce is valid.
        if ( !wp_verify_nonce( $_POST['wdm_meta_box_nonce'], 'wdm_meta_box' ) ) {
                return;
        }

        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
                return;
        }

        // Check the user's permissions.
        if ( !current_user_can( 'edit_post', $post_id ) ) {
                return;
        }


        // Sanitize user input.
        $new_meta_value = ( isset( $_POST['the_name_of_the_radio_buttons'] ) ? sanitize_html_class( $_POST['the_name_of_the_radio_buttons'] ) : '' );

        // Update the meta field in the database.
        update_post_meta( $post_id, 'my_key', $new_meta_value );

}

add_action( 'save_post', 'wdm_save_meta_box_data' );

  2. I found a working solution but I think this is not how you should do it. Still open for better solutions 😉

    This code was added under the php code from above:

    if(isset($$the_value_that_should_be_set_to_checked[0])){
     $the_value_that_should_be_set_to_checked= $the_value_that_should_be_set_to_checked[0]; 
} 
else{
     $the_value_that_should_be_set_to_checked='';
}

    Here’s the code that I added below the radiobuttons:

    <script type="text/javascript">
    jQuery(document).ready(function () {            
       var checked_value= <?php echo json_encode($the_value_that_should_be_set_to_checked);?>;
       if(checked_value!==''){                    
          jQuery("input[name=the_name_of_the_radio_buttons][value="+checked_value+"]").attr('checked', 'checked');                    
       }
    });
</script>

    P.S.: The $ selector will not work but that maybe depends on the theme you use.