In this short tutorial we'll use a custom <image-input>
element to add image editing and uploading to any WordPress website front-end.
This will be all the code we need on the front-end:
<image-input
name="my_field"
store="<?php echo admin_url('wp_ajax.php') ?>"
post-action="image_upload"
post-nonce="<?php echo wp_create_nonce('my_field') ?>">
</image-input>
Let's take a look at the demo so we know what we're going to build.
This article was originally published on pqina.nl. The editing functionality and custom field in this article are provided by Doka Image Editor.
Ready? Let's get started!
To help our customers edit and upload images we need to make three small changes to our WordPress website.
- Load the
image-input
stylesheet and script. - Copy a PHP script to handle the image upload.
- Add the
image-input
HTML element on the page we want to upload from.
We'll go over them step by step.
#1 Loading image-input the stylesheet and script
We navigate to our themes functions.php
file, we can find it in the admin menu by clicking Appearance
-> Theme Editor
-> Theme Functions
. Alternatively we can open the theme folder and find the functions.php
file using an FTP client.
We'll start by adding the following two lines to our themes functions.php
file this will load the editor styles and scripts. We can add them to the top.
Note that this assumes that both image-input.css
and image-input.js
are located in theme-folder-name/image-input/
// This loads the Image Input element styles
wp_enqueue_style(
'image-input-style',
get_template_directory_uri() . '/image-input/image-input.css',
array(), false
);
// This loads the Image Input custom element and Image Editor functionality
wp_enqueue_script(
'image-input-script',
get_template_directory_uri() . '/image-input/image-input.js',
array(), false, true
);
Don't close the file, we'll need it for the next step.
#2 Set up the PHP script that handles the image upload
Below our code that loads the styles and scripts we copy this PHP snippet. It will handle the image upload and move uploaded images to the WordPress media library.
add_action( 'wp_ajax_image_upload', 'handle_input_image' );
add_action( 'wp_ajax_nopriv_image_upload', 'handle_input_image' );
function handle_input_image() {
// Allow this image to be uploaded?
if (!wp_verify_nonce( $_POST['nonce'], 'my_field' )) {
http_response_code(403);
die();
}
// These files need to be included to upload the image
require_once(ABSPATH . 'wp-admin/includes/image.php');
require_once(ABSPATH . 'wp-admin/includes/file.php');
require_once(ABSPATH . 'wp-admin/includes/media.php');
// Let WordPress handle the upload
$image_id = media_handle_upload( 'my_field', 0 );
// Test if upload succeeded
if (is_wp_error($image_id)) {
http_response_code(500);
die();
}
// Finished upload, return the image id
http_response_code(200);
echo $image_id;
die();
}
#3 Add the image-input HTML element
We're nearly done, all that is left is adding the image-input
HTML element to the page.
We'll open the webpage we want to allow users to upload from and add the following HTML to the page.
<image-input
name="my_field"
store="<?php echo admin_url('wp_ajax.php') ?>"
post-action="image_upload"
post-nonce="<?php echo wp_create_nonce('my_field') ?>">
</image-input>
Note that the my_field
name is also used in the PHP snippet, it is used to find our image file.
The image_upload
name in the post-action
attribute links our field to the add_action
hooks both ending with image_upload
.
Finally the post-nonce
is used to check if the form post was done in a secure manner.
After refreshing the webpage we're ready to upload our first image!
If you want to change the behaviour of the editor you can find more information on the image-input
element here.
Top comments (0)