Add an Image Cropper to your WordPress image upload fields

Add an image cropper to your WordPress site and set image requirements like crop aspect ratio and image target size. Use CropGuide and receive better images.

Adding an image cropper to WordPress lets your users customize their images before upload, ensuring photos are uploaded precisly matching your requirements, saving you time fixing user images on the backend.

This guide helps you add CropGuide to any WordPress file upload field, whether that field is located on the front-end, in the admin, or in the Gutenberg content editor.

Installing CropGuide

To get started we first need to create a CropGuide account

The control panel will generate a unique script for your domain similar to the one shown below:

<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC">
</script>

With your CropGuide account created let’s log in to the WordPress admin.

In the main navigation click Appearance
In the Appearance sub menu click Editor
Click function.php file in the files list on the right.
Select the central text area and scroll to the end.

Copy the script shown to the text area.

// This will load the CropGuide service script
function cropguide_scripts() {
    wp_enqueue_script(
        'cropguide',
        'https://cdn.crop.guide/loader/l.js?c=abcd1234',
        '', '', true
    );
}

add_action('wp_enqueue_scripts', 'cropguide_scripts');

Replace the key abcd1234 with your unique domain key as shown on your CropGuide domain page.
Click Update File to save the changes.

That’s it, CropGuide now loads on your WordPress pages.

Test it out by opening a page with a form and selecting an image.

We can customize the WordPress script to only activate CropGuide in specific situations.

Limit CropGuide to admin
Limit CropGuide to specific users
Limit CropGuide to specific pages

Loading CropGuide in the admin only

If you want to use CropGuide in the WordPress admin you have to replace wp_enqueue_script with admin_enqueue_scripts

function cropguide_scripts() {
    wp_enqueue_script(
        'cropguide',
        'https://cdn.crop.guide/loader/l.js?c=abcd1234',
        '', '', true
    );
}

// This will load the CropGuide service script on the admin
add_action('admin_enqueue_scripts', 'cropguide_scripts');

Load CropGuide only for specific users

If you only want to load CropGuide for users with specific roles we can do that by getting the current user and checking for the required roles.

// This will load the CropGuide service script
function cropguide_scripts() {

    // But only for authors, editors, and administrators
    $user = wp_get_current_user();
    $allowed_roles = array('author', 'editor', 'administrator');
    if (array_intersect($allowed_roles, $user->roles)) {

        wp_enqueue_script(
            'cropguide',
            'https://cdn.crop.guide/loader/l.js?c=abcd1234',
            '', '', true
        );

    }
}

add_action('admin_enqueue_scripts', 'cropguide_scripts');

Load CropGuide on selected pages only

If we want to load CropGuide on a subsection of pages we can add the is_page function to the script in the functions.php file.

// The slugs of the pages we want to allow, this array
// can also contain page Id's and page titles.
$allowed_pages = array('contact', 'profile');

function cropguide_scripts() {

    // Exit if current page isn't in allowed pages array
    if (!is_page($allowed_pages)) return;

    wp_enqueue_script(
        'cropguide',
        'https://cdn.crop.guide/loader/l.js?c=abcd1234',
        '', '', true
    );
}

add_action('wp_enqueue_scripts', 'cropguide_scripts');

The CropGuide script will now only load if the page slug matches the contact or profile.

That's it! CropGuide will now load and transform images when they're added to a file upload field on your WordPress page.

You can adjust the behavior of CropGuide in the control panel for your domain, or you can set custom instructions per field.

Please feel free to reach out to us if you any questions.

Learn more about CropGuide

Add an Image Cropper to your WordPress image upload fields

Installing CropGuide

Loading CropGuide in the admin only

Load CropGuide only for specific users

Load CropGuide on selected pages only

Related content