Add Custom Image & Thumbnail Upload MetaBox To WordPress

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

 ** 28-03-2024: Add Custom Pinterest Image
 function custom_pinterest_image_metabox() {
        'Custom Pinterest Image',
        array('post', 'page'),
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
        <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%;" />-->
		<img id="custom_pinterest_image" src="<?php echo esc_attr($thumbnail_url); ?>" />

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

    // Verify that the nonce is valid.
    if (!wp_verify_nonce($_POST['custom_pinterest_image_metabox_nonce'], 'custom_pinterest_image_metabox_nonce')) {

    // 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) {

    // Check the user's permissions.
    if ('page' === $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id)) {
    } else {
        if (!current_user_can('edit_post', $post_id)) {

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

    // 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');


// 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”.

    // 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) {
        // If the frame already exists, reopen it.
        if (custom_pinterest_image_frame) {
        // Sets up the media library frame.
        custom_pinterest_image_frame = ={
            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').attr('src', attachment.url);
        // Opens the media library frame.;

Disclaimer: The code on this website is provided "as is" and comes with no warranty. The author of this website does not accept any responsibility for issues arising from the use of code on this website. Before making any significant changes, ensure you take a backup of all files and do not work directly on a live/production website without thoughly testing your changes first.

Leave a Reply

Your email address will not be published. Required fields are marked *