Add an Image Editor to your WordPress image upload fields

WordPress is a well known open-source content management system. It’s a popular tool for individuals without any coding experience who want to build websites and blogs.

Using this guide you can add CropGuide to any WordPress front-end or admin file upload field to enhance it with image cropping functionality.

Installing CropGuide

To get started we first need to create a CropGuide account

Log in to CropGuide and add your domain to the control panel.

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.

1. In the main navigation click Appearance

2. In the Appearance sub menu click Editor

3. Click function.php file in the files list on the right.

4. Select the central text area and scroll to the end.

5. 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');

6. Replace the key abcd1234 with your unique domain key as shown on your CropGuide domain page.

7. 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.

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.

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

Learn more about CropGuide