meta_box

meta_boxes.php

<?php

add_action('admin_enqueue_scripts', 'mdw_meta_box_enqueue');
function mdw_meta_box_enqueue()
{
    if (!did_action('wp_enqueue_media')) {
        wp_enqueue_media();
    }

    wp_enqueue_script('myuploadscript', get_template_directory_uri() . '/js/admin/upload-image-meta-box.js', array('jquery'), null, false);
}

function mdw_single_input_field($title, $name, $value = '')
{
    wp_nonce_field('mdw_save', $name . '_nonce');

    return '<label for="' . $name . '"><h4>' . esc_html__($title, 'text-domain') . '</h4></label>
    <input type="text" name="' . $name . '" id="' . $name . '" class="form-input mt-2" placeholder="' . $title . '" value="' . $value . '" />';
}

function mdw_textarea_field($title, $name, $value = '')
{
    wp_nonce_field('mdw_save', $name . '_nonce');

    return '<textarea name="' . $name . '" placeholder="' . $title . '" id="' . $name . '" class="form-input mt-2">' . $value . '</textarea>';
}

function mdw_image_uploader_field($name, $value = '')
{

    $image = ' button">Upload image';
    $image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so)
    $display = 'none'; // display state ot the "Remove image" button

    if ($image_attributes = wp_get_attachment_image_src($value, $image_size)) {

        // $image_attributes[0] - image URL
        // $image_attributes[1] - image width
        // $image_attributes[2] - image height

        $image = '"><img src="' . $image_attributes[0] . '" style="max-width:95%;display:block;" />';
        $display = 'inline-block';

    }

    wp_nonce_field('mdw_save', $name . '_nonce');
    return '
    <div>
        <a href="#" class="mdw_upload_image_button' . $image . '</a>
        <input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
        <a href="#" class="mdw_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>
    </div>';
}

/*
 * Add a meta box
 */
add_action('admin_menu', 'mdw_meta_box_add');

function mdw_meta_box_add()
{
    add_meta_box('servicesdiv', // meta box ID
        'More settings', // meta box title
        'mdw_print_box', // callback function that prints the meta box HTML
        'page', // post type where to add it
        'normal', // priority
        'high'); // position
}

/*
 * Meta Box HTML
 */
function mdw_print_box($post)
{
    $service_1_meta_key = 's_1_title';
    $service_2_meta_key = 's_2_title';
    $service_1_desc_meta_key = 's_2_desc';
    $service_2_desc_meta_key = 's_2_desc';
    $img_1_meta_key = 's_1_image';
    $img_2_meta_key = 's_2_image';

    $outline = '<section class="columns">';
    $outline .= '<div class="col-5 m-2">';
    $outline .= mdw_single_input_field('Service 1 Offered', $service_1_meta_key, get_post_meta($post->ID, $service_1_meta_key, true));
    $outline .= mdw_textarea_field('Service Description', $service_1_desc_meta_key, get_post_meta($post->ID, $service_1_desc_meta_key, true));
    $outline .= mdw_image_uploader_field($img_1_meta_key, get_post_meta($post->ID, $img_1_meta_key, true));
    $outline .= '</div>';
    $outline .= '<div class="col-5 m-2">';
    $outline .= mdw_single_input_field('Service 2 Offered', $service_2_meta_key, get_post_meta($post->ID, $service_2_meta_key, true));
    $outline .= mdw_textarea_field('Service Description', $service_2_desc_meta_key, get_post_meta($post->ID, $service_2_desc_meta_key, true));

    $outline .= mdw_image_uploader_field($img_2_meta_key, get_post_meta($post->ID, $img_2_meta_key, true));
    $outline .= '</div>';
    $outline .= '</section>';

    echo $outline;

}

/*
 * Save Meta Box data
 */
add_action('save_post', 'mdw_save');

function mdw_save($post_id)
{
    $metas = array(
        's_1_title',
        's_1_desc',
        's_2_title',
        's_2_desc',
        's_1_image',
        's_2_image',
    );
    foreach ($metas as $meta) {
        if (!isset($_POST[$meta])) {
            return;
        }

        if (!wp_verify_nonce($_POST[$meta . '_nonce'], 'mdw_save')) {
            return;
        }

        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return $post_id;
        }

        update_post_meta($post_id, $meta, $_POST[$meta]);
    }

    // if you would like to attach the uploaded image to this post, uncomment the line:
    // wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) );

    return $post_id;
}