Adding Javascript Code to the Admin Side of Your Site

• Introduction
• Important!
• Method 1: Using admin_enqueue_scripts
• Example
• Method 2: Using the GFAddOn Framework
• Method 3: Using admin_footer_print_scripts
• Example
• Special Considerations
• Dependencies
• Conditional Loading

Introduction

Adding scripts and styles for use in the wp-admin area of your site can be accomplished in a few ways. Depending on what code you are trying to add, and the complexity of the theme you are using, there can be a number of different methods by which code snippets can be added to extend your forms. This article covers common options. Also reference: Where Do I Put This Code?

Important!

Replacing or updating your theme can overwrite the theme directory in your site folder, and that means modifications you may have made to files there will be lost. Always keep regular back-ups and consider the use of a child theme .

Method 1: Using admin_enqueue_scripts

The recommended approach for including your custom scripts is to add your scripts to a file and then use the conventional approach of registering and enqueueing those scripts via the WordPress action admin_enqueue_scripts and the WordPress functions wp_register_script() and wp_enqueue_script().

Note: Scripts included via this method will not be loaded when No Conflict Mode is enabled unless allowed via gform_noconflict_scripts

Example

In this example, you will need to replace custom-script-name and custom-script-location with specifics for your script. You will also need to replace CUSTOM_SCRIPT_VERSION with a string or constant that specifies your script version number, which will be added to the URL as a query string for cache-busting purposes.

add_action( 'admin_init', function() {
    wp_register_script( 'custom-script-name', 'custom-script-location', array( 'jquery', 'wp-util' ), CUSTOM_SCRIPT_VERSION );
} );
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_script( 'custom-script-name', 'custom-script-location', array( 'jquery', 'wp-util' ), CUSTOM_SCRIPT_VERSION );
} );

Method 2: Using the GFAddOn Framework

Reference: Including Scripts and Styles When Using the Add-On Framework

Method 3: Using admin_footer_print_scripts

If you are using some third party plugin as an alternative for adding code, then you might prefer the straightforward approach of including scripts via the WordPress action admin_print_footer_scripts.

Example

add_action( 'admin_print_footer_scripts', function() {
    if ( method_exists( 'GFForms', 'is_gravity_page' ) && GFForms::is_gravity_page() ) { ?>

        <script type="text/javascript">
            // include your script here
        </script>

    <?php }
} );

Special Considerations

Dependencies

When loading custom scripts on your site, it is important to ensure that any other scripts upon which your code depends are being loaded prior to your code. The first two methods of enqueueing scripts both provide parameters whereby you can pass an array of dependencies. This array should include handles for scripts that must be loaded before your script will be loaded.

Conditional Loading

It is a best practice to only include your script on admin pages where it is needed. Especially when using Method 1 or Method 3 above, it is recommended that you check the admin page being loaded prior to serving your script. The GFAddOn framework provide a method whereby you can set Enqueue Conditions for your script.