When building a UI for adding meta data to a post in WordPress it’s always best to stick to the WordPress styling as much as possible. So, if you’re adding an image upload field to a post, it’s often a good idea to use a known UI element such as the Featured Image meta box. This especially useful if you are asking for a ‘secondary’ featured image – such as one that could be used as a post header image, while keeping the default featured image separate for blog listings, etc.
I did exactly that in a recent project where the posts needed a landscape listing image to be displayed in blog listings while the featured image was reserved for social sharing and viewing inside the single post content.
In order to achieve this I needed to add a custom meta box (with markup copied from the core Featured Image box) along with some Javascript to handle the media upload and general on page functions. You will find all of the code for this below and it works 100% correctly as is:
The PHP code simply needs to be added to your theme’s functions.php
file (or better yet, a custom plugin) and the Javascript needs to be loaded on the post edit screen and you’ll be good to go with a new meta box that looks and works exactly the same as the default Featured Image box.
Leave a Reply