i'm adding a function in my child theme's functions.php file that will only work on a specific page.

i can successfully Enqueue a 3rd-party jquery script.

and i can successfully add my own bit of jquery/js.

but i'm wondering if i can add these two things within the same function wrapper.

so here's the part for adding the external script:

function custom_thing () {
    if(is_page( 2138 )){
        wp_enqueue_script('external-script',  '.js', array('jquery'), 0, true);
}}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

and here's the extra bit of code i need that goes with the external script:

function custom_thing_addition () {
    if(is_page( 2138 )){
    ?>
        <script>
            jQuery(document).ready(function($) {
                $("div.specific").on('click', 'div.thing1', function () {
                    //do somethiing
                });
            });
        </script>
    <?php
}}
add_action( 'wp_footer', 'custom_thing_addition' );

can i combine these? perhaps something like this (tho this does NOT work)...

function custom_thing () {
    if(is_page( 2138 )){
        wp_enqueue_script('external-script',  '.js', array('jquery'), 0, true);
    ?>
        <script>
            jQuery(document).ready(function($) {
                $("div.specific").on('click', 'div.thing1', function () {
                    //do somethiing
                });
            });
        </script>
    <?php
}}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

thanks.

i'm adding a function in my child theme's functions.php file that will only work on a specific page.

i can successfully Enqueue a 3rd-party jquery script.

and i can successfully add my own bit of jquery/js.

but i'm wondering if i can add these two things within the same function wrapper.

so here's the part for adding the external script:

function custom_thing () {
    if(is_page( 2138 )){
        wp_enqueue_script('external-script',  'http://domain/external/script.js', array('jquery'), 0, true);
}}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

and here's the extra bit of code i need that goes with the external script:

function custom_thing_addition () {
    if(is_page( 2138 )){
    ?>
        <script>
            jQuery(document).ready(function($) {
                $("div.specific").on('click', 'div.thing1', function () {
                    //do somethiing
                });
            });
        </script>
    <?php
}}
add_action( 'wp_footer', 'custom_thing_addition' );

can i combine these? perhaps something like this (tho this does NOT work)...

function custom_thing () {
    if(is_page( 2138 )){
        wp_enqueue_script('external-script',  'http://domain/external/script.js', array('jquery'), 0, true);
    ?>
        <script>
            jQuery(document).ready(function($) {
                $("div.specific").on('click', 'div.thing1', function () {
                    //do somethiing
                });
            });
        </script>
    <?php
}}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

thanks.

• wp-enqueue-script

2 Answers 2

The wp_add_inline_script() is designed for this purpose. It lets you add some inline JavaScript above or below an enqueued script. You just need to pass the contents of the script, without <script> tags:

function custom_thing () {
    if ( is_page( 2138 ) ) {
        wp_enqueue_script( 'external-script', 'http://domain/external/script.js', array( 'jquery' ), 0, true );
        wp_add_inline_script(
            'external-script',
            'jQuery( document ).ready( function( $ ) {
                $( "div.specific" ).on( "click", "div.thing", function () {
                    //do somethiing
                } );
            } );',
            'after'
        );
    );
}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

The JavaScript itself is passed as a string, so just be careful about quotes. If the script is long enough that this becomes unwieldy, you'd be better off putting your JavaScript into its own file, and setting the external script as a dependency:

function custom_thing() {
    if ( is_page( 2138 ) ) {
        wp_enqueue_script( 'external-script',  'http://domain/external/script.js', array( 'jquery' ), 0, true );
        wp_enqueue_script( 'custom-script',  get_theme_file_uri( 'path/to/custom-script.js' ), array( 'jquery', 'external-script' ), 0, true );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

The correct way to do this and make things easier for yourself is to put your secondary code into it's own file. Let's call it custom_thing.js and lets just put it in the main child theme folder:

Then you'd simply do this:

function custom_thing() {
    if( is_page( 2138 ) ) {
        wp_enqueue_script( 'external-script',  'http://domain/external/script.js', array( 'jquery' ), 0, true );
        wp_enqueue_script( 'custom_thing-script',  get_stylesheet_directory_uri() . '/custom_thing.js', array( 'jquery' ), 0, true );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_thing' );

Sometimes, if the code library/jQuery plugin I'm including in the theme is something that I can host locally rather than a CDN, I just append my instantiation JS to the bottom of the code library file so that I'm including less scripts. However, if I'm working off a CDN hosted library I do it this way.

Edited

As Jacob Pettie pointed out in the comment, I forgot the correct function to call the child theme's directory and instead was attempting to include the JS from the parent theme, where it doesn't exist. Have edited answer to use get_stylesheet_directory_uri() instead.