Add an Image Editor to your WordPress image upload fields

Add CropGuide to your WordPress forms, set image requirements, and receive better images.

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 enqueue_scripts() {
        wp_enqueue_script(
            'cropguide',
            'https://cdn.crop.guide/loader/l.js?c=abcd1234',
            '', '', true
        );
    }
    
    add_action('wp_enqueue_script', 'enqueue_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.

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.

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

$allowed_pages = array('contact', 'profile');

if (is_page($allowed_pages)) {
    add_action('wp_enqueue_script', 'enqueue_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

Our photo editing technology is trusted by amazing companies

  • Dropbox
  • Square
  • ConvertKit
  • Funda
  • Global