There is an image button in the default media uploader of WordPress and I wanted to upload an image using the WordPress media uploader. WordPress has a media uploader that can be used to upload a new image or you can use an existing image from the library.
If you need a custom solution to upload an image in the backend, then it is always recommended to use the built-in media uploader of WordPress. If you are using this, you are following WordPress standards.
You have to write a few lines of code to implement a media uploader. So, let’s get started.
In this tutorial, a custom image button will be added for the post and the page. When you click this button, the media uploader will open where you can upload the image. There is a custom meta field in which the URL of the uploaded image will be set. It will be saved as a post meta for a specific post or page.
Let’s create a Custom Image Button:
A meta box is a block on a post or page. Meta boxes are used for additional information on your post or a page.
Tags, Featured Image, Excerpt, are some of the examples of meta boxes, as they store some kind of additional information about the post.
We have to create a meta box with an upload button and a text field, so whenever users click on it the image gets uploaded and the image url is stored in the text field.
Adding a Metabox is an easy task. Write the following code in your functions.php file or in your plugin.
function cp_custom_meta_boxes( $post_type, $post ) {
add_meta_box(
‘cp-meta-box’,
__( ‘Custom Image’ ),
‘render_cp_meta_box’,
array(‘post’, ‘page’), //post types here
‘normal’,
‘high’
);
}
add_action( ‘add_meta_boxes’, ‘cp_custom_meta_boxes’, 10, 2 );
function render_cp_meta_box($post) {
$image = get_post_meta($post->ID, ‘cp_custom_image’, true);
?>
<table>
<tr>
<td><a href=”#” class=”cp_upload_image_button button button-secondary”><?php _e(‘Upload Image’); ?></a></td>
<td><input type=”text” name=”cp_custom_image” id=”cp_custom_image” value=”<?php echo $image; ?>” style=”width:500px;” /></td>
</tr>
</table>
<?php
}
After adding the above code, you’ll now be able to see the new meta box added along with their fields on your post or page.
Customizing Meta Box:
Now you are ready with your meta box. When you click on the upload image button, the media uploader will open. Set the upload image URL in the text field. First, you need to create a js file and put it in the wordpress enviornment.
Write the following code to create a js file cpscript.js and enqueue it as follows.
function cp_include_script() {
if ( ! did_action( ‘wp_enqueue_media’ ) ) {
wp_enqueue_media();
}
wp_enqueue_script( ‘cpscript’, get_stylesheet_directory_uri() . ‘/js/cpscript.js’, array(‘jquery’), null, false );
}
add_action( ‘admin_enqueue_scripts’, ‘cp_include_script’ );
I assume you are adding a whole code in the theme so here I have given a theme path.
If you are doing it using a plugin, then you need to adjust the path as per your plugin.
Here, I have taken a reference of ‘Javascript Reference/wp.media’ and written the following jQuery code. Now, write the media uploader code in the cpscript.js file as shown below.
jQuery(function($){
$(‘body’).on(‘click’, ‘.cp_upload_image_button’, function(e){
e.preventDefault();
var button = $(this),
cp_uploader = wp.media({
title: ‘Custom image’,
library : {
uploadedTo : wp.media.view.settings.post.id,
type : ‘image’
},
button: {
text: ‘Use this image’
},
multiple: false
}).on(‘select’, function() {
var attachment = cp_uploader.state().get(‘selection’).first().toJSON();
$(‘#cp_custom_image’).val(attachment.url);
})
.open();
});
});
Now, when you click on the upload image button, the media uploader will open. Choose the image you want to upload and you should see that the image URL has been added in the text field.
Save this URL in the postmeta table with the ‘cp_custom_image’ key. You can give any name for the key according to your choice.
function cp_save_postdata($post_id)
{
if (array_key_exists(‘cp_custom_image’, $_POST)) {
update_post_meta(
$post_id,
‘cp_custom_image’,
$_POST[‘cp_custom_image’]
);
}
}
add_action(‘save_post’, ‘cp_save_postdata’);
Whenever a post or page is created, you need to use save_post action. If you use this action, your code will be injected in the system.
I hope this article helped you to know more about adding a custom media uploader in WordPress. Just give it a try in your plugin or theme to understand it better.
