1

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

Improve this question

2 Answers 2

Reset to default
3

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.com/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.com/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' );
Improve this answer
1
  • THANK YOU @Jacob Peattie! this works perfectly. exactly what i needed. yes, i understood about enqueueing local scripts, but i just needed a couple lines added just as you provided. and thanks too for pointing out to be careful about quotes. i thiink the only thing that threw me a little was the "after" line. i read that that puts it after the enqueued script, but is default, so i took that out. thanks again. Commented Apr 16, 2020 at 23:29
1

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

Improve this answer
4
  • Just a note that OP mentioned that they're using a child theme, so get_template_directory_uri() won't point to the right place if they put a JS file in their child theme. Commented Apr 16, 2020 at 6:01
  • Gah! Thank you - oversight on my part. Commented Apr 16, 2020 at 7:27
  • thanks @Tony Djukic, but i just really needed to add a couple lines & read that putting that in an external file would be overkill. but thanks! Commented Apr 16, 2020 at 23:32
  • Normally I put all of my scripts into a single main.js for the theme, and then instead of executing all of the code all the time, I build conditions into the actual JS itself using if( $( '#element_targeted' ).length > 0 ) ){ 'do something' }. I find this more straightforward than segmenting it all into separate scripts and then loading the scripts conditionally. Commented Apr 17, 2020 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.