<?php
add_action('add_meta_boxes', 'the_angle_add_sidebar_layout_box');
function the_angle_add_sidebar_layout_box()
{
    add_meta_box(
             'the_angle_sidebar_layout', // $id
             'Sidebar Layout', // $title
             'the_angle_sidebar_layout_callback', // $callback
             'page', // $page
             'normal', // $context
             'high' // $priority
         );
    add_meta_box(
             'the_angle_sidebar_layout', // $id
             'Sidebar Layout for Posts', // $title
             'the_angle_sidebar_layout_callback', // $callback
             'post', // $page
             'normal', // $context
             'high' // $priority
         );
}
$the_angle_sidebar_layout = array(
    'sidebar-left' => array(
        'value'     => 'sidebar-left',
        'label'     => esc_html__( 'Left sidebar', 'the-angle' ),
        'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-left.png'
        ),
    'sidebar-right' => array(
        'value' => 'sidebar-right',
        'label' => esc_html__( 'Right sidebar (default)', 'the-angle' ),
        'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-right.png'
        ),
    'sidebar-both' => array(
        'value'     => 'sidebar-both',
        'label'     => esc_html__( 'Both Sidebar', 'the-angle' ),
        'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-both.png'
        ),

    'sidebar-no' => array(
        'value'     => 'sidebar-no',
        'label'     => esc_html__( 'No sidebar', 'the-angle' ),
        'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-no.png'
        )

    );
function the_angle_sidebar_layout_callback(){
    global $post , $the_angle_sidebar_layout;
    wp_nonce_field( basename( __FILE__ ), 'the_angle_sidebar_layout_nonce' );
    ?>
    <table class="form-table">
        <tr>
            <td colspan="4"><em class="f13"><?php echo esc_html__('Choose Sidebar Template','the-angle');?></em></td>
        </tr>

        <tr>
            <td>
                <?php
                foreach($the_angle_sidebar_layout as $field){
                    $the_angle_sidebar_metalayout = get_post_meta( $post->ID, 'the_angle_sidebar_layout', true ); ?>
                    <div class="radio-image-wrapper" style="float:left; margin-right:30px;">
                        <label class="description">
                         <span><img src="<?php echo esc_url( $field['thumbnail'] ); ?>" alt="" /></span></br>
                         <input type="radio" name="the_angle_sidebar_layout" value="<?php echo esc_attr($field['value']); ?>" <?php checked( $field['value'], $the_angle_sidebar_metalayout ); if(empty($the_angle_sidebar_metalayout) && $field['value']=='sidebar-right'){ echo "checked='checked'";} ?>/>&nbsp;<?php echo esc_attr($field['label']); ?>
                        </label>
                    </div>
                <?php } // end foreach
                ?>
                <div class="clear"></div>
            </td>
        </tr>
    </table>
    <?php }
/**
 * save the custom metabox data
 * @hooked to save_post hook
 */
function the_angle_save_sidebar_layout( $post_id ) {
    global $the_angle_sidebar_layout, $post;
    // Verify the nonce before proceeding.
    if ( !isset( $_POST[ 'the_angle_sidebar_layout_nonce' ] ) || !wp_verify_nonce( $_POST[ 'the_angle_sidebar_layout_nonce' ], basename( __FILE__ ) ) )
        return;
    // Stop WP from clearing custom fields on autosave
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE)
        return;

    if ('page' == $_POST['post_type']) {
        if (!current_user_can( 'edit_page', $post_id ) )
            return $post_id;
    } elseif (!current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    foreach ($the_angle_sidebar_layout as $field) {
        //Execute this saving function
        $old = get_post_meta( $post_id, 'the_angle_sidebar_layout', true);
        $new = sanitize_text_field($_POST['the_angle_sidebar_layout']);
        if ($new && $new != $old) {
            update_post_meta($post_id, 'the_angle_sidebar_layout', $new);
        } elseif ('' == $new && $old) {
            delete_post_meta($post_id,'the_angle_sidebar_layout', $old);
        }
     } // end foreach
 }
 add_action('save_post', 'the_angle_save_sidebar_layout');
