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<\/p>\n
NOTE: This is will generate thumbnails as set by your theme’s code when uploading your main image<\/p>\n
\r\n<?php\r\n\/********************************************************\r\n ** 28-03-2024: Add Custom Pinterest Image\r\n *******************************************************\/\r\n function custom_pinterest_image_metabox() {\r\n add_meta_box(\r\n 'custom_pinterest_image_metabox',\r\n 'Custom Pinterest Image',\r\n 'render_custom_pinterest_image_metabox',\r\n array('post', 'page'),\r\n 'normal',\r\n 'high'\r\n );\r\n}\r\nadd_action('add_meta_boxes', 'custom_pinterest_image_metabox');\r\n\r\nfunction render_custom_pinterest_image_metabox($post) {\r\n \/\/ Add nonce for security and authentication.\r\n wp_nonce_field('custom_pinterest_image_metabox_nonce', 'custom_pinterest_image_metabox_nonce');\r\n\r\n \/\/ Get the existing meta value (if any).\r\n $image_id = get_post_meta($post->ID, 'custom_pinterest_image_id', true);\r\n $image_url = wp_get_attachment_url($image_id);\r\n\t\r\n\t\r\n\t$thumbnail_url = wp_get_attachment_image_src( $image_id, 'thumbnail' ); \/\/ Replace 'thumbnail' with your desired size\r\n\tif ( $thumbnail_url ) {\r\n\t $thumbnail_url = $thumbnail_url[0]; \/\/ Access the actual image URL from the array\r\n\t}\r\n ?>\r\n <p>\r\n <label for=\"custom_pinterest_image_upload\"><?php _e('Upload Image'); ?><\/label>\r\n <input type=\"button\" id=\"custom_pinterest_image_upload_button\" class=\"button\" value=\"<?php _e('Upload Image'); ?>\" \/>\r\n <input type=\"hidden\" id=\"custom_pinterest_image_id\" name=\"custom_pinterest_image_id\" value=\"<?php echo esc_attr($image_id); ?>\" \/>\r\n <br \/>\r\n <!--<img id=\"custom_pinterest_image\" src=\"<?php\/\/echo esc_attr($image_url); ?>\" style=\"max-width:100%;\" \/>-->\r\n\t\t<?php\r\n\t\tif($thumbnail_url)\r\n\t\t{\r\n\t\t?>\t\t\t\r\n\t\t<img id=\"custom_pinterest_image\" src=\"<?php echo esc_attr($thumbnail_url); ?>\" \/>\r\n\t\t<?php\r\n\t\t}\r\n\t\t?>\r\n <\/p>\r\n <?php\r\n}\r\n\r\nfunction save_custom_pinterest_image_metabox($post_id) {\r\n \/\/ Check if our nonce is set.\r\n if (!isset($_POST['custom_pinterest_image_metabox_nonce'])) {\r\n return;\r\n }\r\n\r\n \/\/ Verify that the nonce is valid.\r\n if (!wp_verify_nonce($_POST['custom_pinterest_image_metabox_nonce'], 'custom_pinterest_image_metabox_nonce')) {\r\n return;\r\n }\r\n\r\n \/\/ If this is an autosave, our form has not been submitted, so we don't want to do anything.\r\n if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {\r\n return;\r\n }\r\n\r\n \/\/ Check the user's permissions.\r\n if ('page' === $_POST['post_type']) {\r\n if (!current_user_can('edit_page', $post_id)) {\r\n return;\r\n }\r\n } else {\r\n if (!current_user_can('edit_post', $post_id)) {\r\n return;\r\n }\r\n }\r\n\r\n \/\/ Make sure that it is set.\r\n if (!isset($_POST['custom_pinterest_image_id'])) {\r\n return;\r\n }\r\n\r\n \/\/ Sanitize user input.\r\n $image_id = sanitize_text_field($_POST['custom_pinterest_image_id']);\r\n\r\n \/\/ Update the meta field.\r\n update_post_meta($post_id, 'custom_pinterest_image_id', $image_id);\r\n\r\n \/\/ Generate thumbnails.\r\n if ($image_id) {\r\n $metadata = wp_generate_attachment_metadata($image_id, get_attached_file($image_id));\r\n wp_update_attachment_metadata($image_id, $metadata);\r\n }\r\n}\r\nadd_action('save_post', 'save_custom_pinterest_image_metabox');\r\n\r\n\r\n\r\n\/** ENQUEUE ADMIN JS **\/\r\n\r\n\/\/ get_stylesheet_directory_uri() = Child Theme Usage\r\n\/\/ get_template_directory_uri() = Parent Theme Usage\r\n\r\nfunction custom_pinterest_image_upload_enqueue_script() {\r\n wp_enqueue_script('custom-image-upload', get_stylesheet_directory_uri() . '\/js\/adminscripts.js', array('jquery'), null, true);\r\n}\r\nadd_action('admin_enqueue_scripts', 'custom_pinterest_image_upload_enqueue_script');\r\n<\/code><\/pre>\nWe 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”.<\/p>\n
\r\njQuery(document).ready(function($){\r\n \/\/ Instantiates the variable that holds the media library frame.\r\n var custom_pinterest_image_frame;\r\n \r\n \/\/ Runs when the image upload button is clicked.\r\n $('#custom_pinterest_image_upload_button').click(function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ If the frame already exists, reopen it.\r\n if (custom_pinterest_image_frame) {\r\n custom_pinterest_image_frame.open();\r\n return;\r\n }\r\n \r\n \/\/ Sets up the media library frame.\r\n custom_pinterest_image_frame = wp.media.frames.customHeader = wp.media({\r\n title: 'Choose Image',\r\n button: { text: 'Choose Image' },\r\n multiple: false\r\n });\r\n \r\n \/\/ Runs when an image is selected.\r\n custom_pinterest_image_frame.on('select', function() {\r\n var attachment = custom_pinterest_image_frame.state().get('selection').first().toJSON();\r\n $('#custom_pinterest_image_id').val(attachment.id);\r\n $('#custom_pinterest_image').attr('src', attachment.url);\r\n });\r\n \r\n \/\/ Opens the media library frame.\r\n custom_pinterest_image_frame.open();\r\n });\r\n});\r\n\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"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: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[26],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-images"],"_links":{"self":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":0,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}