This creates a custom metabox for posts and pages and allows us to upload an image. Copy it into your child theme’s functions.php file

NOTE: This is will generate thumbnails as set by your theme’s code when uploading your main image

<?php
/********************************************************
 ** 28-03-2024: Add Custom Pinterest Image
 *******************************************************/
 function custom_pinterest_image_metabox() {
    add_meta_box(
        'custom_pinterest_image_metabox',
        'Custom Pinterest Image',
        'render_custom_pinterest_image_metabox',
        array('post', 'page'),
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'custom_pinterest_image_metabox');

function render_custom_pinterest_image_metabox($post) {
    // Add nonce for security and authentication.
    wp_nonce_field('custom_pinterest_image_metabox_nonce', 'custom_pinterest_image_metabox_nonce');

    // Get the existing meta value (if any).
    $image_id = get_post_meta($post->ID, 'custom_pinterest_image_id', true);
    $image_url = wp_get_attachment_url($image_id);
	
	
	$thumbnail_url = wp_get_attachment_image_src( $image_id, 'thumbnail' ); // Replace 'thumbnail' with your desired size
	if ( $thumbnail_url ) {
	  $thumbnail_url = $thumbnail_url[0]; // Access the actual image URL from the array
	}
    ?>
    <p>
        <label for="custom_pinterest_image_upload"><?php _e('Upload Image'); ?></label>
        <input type="button" id="custom_pinterest_image_upload_button" class="button" value="<?php _e('Upload Image'); ?>" />
        <input type="hidden" id="custom_pinterest_image_id" name="custom_pinterest_image_id" value="<?php echo esc_attr($image_id); ?>" />
        <br />
        <!--<img id="custom_pinterest_image" src="<?php//echo esc_attr($image_url); ?>" style="max-width:100%;" />-->
		<?php
		if($thumbnail_url)
		{
		?>			
		<img id="custom_pinterest_image" src="<?php echo esc_attr($thumbnail_url); ?>" />
		<?php
		}
		?>
    </p>
    <?php
}

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

    // Verify that the nonce is valid.
    if (!wp_verify_nonce($_POST['custom_pinterest_image_metabox_nonce'], 'custom_pinterest_image_metabox_nonce')) {
        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 ('page' === $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id)) {
            return;
        }
    } else {
        if (!current_user_can('edit_post', $post_id)) {
            return;
        }
    }

    // Make sure that it is set.
    if (!isset($_POST['custom_pinterest_image_id'])) {
        return;
    }

    // Sanitize user input.
    $image_id = sanitize_text_field($_POST['custom_pinterest_image_id']);

    // Update the meta field.
    update_post_meta($post_id, 'custom_pinterest_image_id', $image_id);

    // Generate thumbnails.
    if ($image_id) {
        $metadata = wp_generate_attachment_metadata($image_id, get_attached_file($image_id));
        wp_update_attachment_metadata($image_id, $metadata);
    }
}
add_action('save_post', 'save_custom_pinterest_image_metabox');



/** ENQUEUE ADMIN JS **/

// get_stylesheet_directory_uri() = Child Theme Usage
// get_template_directory_uri() = Parent Theme Usage

function custom_pinterest_image_upload_enqueue_script() {
    wp_enqueue_script('custom-image-upload', get_stylesheet_directory_uri() . '/js/adminscripts.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'custom_pinterest_image_upload_enqueue_script');

We also need to add some JavaScript in order to interact with the WordPress Media Uploader. This script (not amending the code above) should be placed in a folder called “js” and the file named “adminscripts.js”.

jQuery(document).ready(function($){
    // Instantiates the variable that holds the media library frame.
    var custom_pinterest_image_frame;
    
    // Runs when the image upload button is clicked.
    $('#custom_pinterest_image_upload_button').click(function(e) {
        e.preventDefault();
        
        // If the frame already exists, reopen it.
        if (custom_pinterest_image_frame) {
            custom_pinterest_image_frame.open();
            return;
        }
        
        // Sets up the media library frame.
        custom_pinterest_image_frame = wp.media.frames.customHeader = wp.media({
            title: 'Choose Image',
            button: { text: 'Choose Image' },
            multiple: false
        });
        
        // Runs when an image is selected.
        custom_pinterest_image_frame.on('select', function() {
            var attachment = custom_pinterest_image_frame.state().get('selection').first().toJSON();
            $('#custom_pinterest_image_id').val(attachment.id);
            $('#custom_pinterest_image').attr('src', attachment.url);
        });
        
        // Opens the media library frame.
        custom_pinterest_image_frame.open();
    });
});