Add external script to functions.php

Question

I'm having trouble adding an external script to my functions.php. It has checks to see if there's an ACF field checked and if that's on a certain template.

This is the script I'm trying to add <script type="text/javascript" src="https://play.vidyard.com/embed/v4.js?ver=1.8.52" async="async" id="vidyard-v4-js"> </script>

Not seeing any errors loading it so I don't think II'm registering it correctly. Thanks

function add_vidyard_script(){
if (get_field('vidyard_video') && (is_page_template('templates-page/customers.php'))) {
        wp_get_script_tag(
            array(
                'id'        => 'vidyard-v4-js',
                'async' => true,
                'src'       => esc_url( 'https://play.vidyard.com/embed/v4.js?ver=1.8.52' ),
            )
        );
        wp_enqueue_script('wp_get_script_tag');
    }
}
add_action( 'wp_enqueue_vidyard', 'add_vidyard_script'); 

Answer 1

1. The hook you want to use is wp_enqueue_scripts ( https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/ ).

2. You should put the add_action inside of an if statement, to not run it unnecessary.

3. If you are using a "True / False" field from ACF, you need to check if it exists and what value it has. True is 1, false is 0.

So your code can look like

function add_vidyard_script(){
   wp_enqueue_script( 'vidyard-v4-js', 'https://play.vidyard.com/embed/v4.js?ver=1.8.52' );
}


if ( ( get_field('vidyard_video') && get_field('vidyard_video') == 1 ) && (is_page_template('templates-page/customers.php')) ):
    add_action( 'wp_enqueue_scripts', 'add_vidyard_script'); 
endif;

Additional information:

Using wp_enqueue_scripts you can use parameters.

First Parameter is the ID. Second is the URL. Third can be a dependency. Fourth can be a version number. Fifth can be a boolean to load the script in the footer.

So if you have a script with the id of "myscript", url of "https://script.js", it only works with "jquery", has the version number of "1.0" and should be loaded in the footer instead of the header:

wp_enqueue_script( 'myscript', 'https://script.js', array( 'jquery' ), '1.0', true );

If you want to load it async, you will need to add a filter script_loader_tag to change the script tag and add the async attribute.

// add async attribute to enqueued script
function my_script_loader_tag($tag, $handle, $src) {
    if ($handle === 'myscript') { // id of your script defined in wp_enqueue_script 
        if (false === stripos($tag, 'async')) {
            $tag = str_replace(' src', ' async="async" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'my_script_loader_tag', 10, 3);

That's it, just a little filter.

---

Putting all together, your code can look like:

function add_vidyard_script(){
   wp_enqueue_script( 'vidyard-v4-js', 'https://play.vidyard.com/embed/v4.js?ver=1.8.52' );
}

// add async attribute to enqueued script
function my_script_loader_tag($tag, $handle, $src) {
    if ($handle === 'vidyard-v4-js') { 
        if (false === stripos($tag, 'async')) {
            $tag = str_replace(' src', ' async="async" src', $tag);
        }
    }
    return $tag;
}


if ( ( get_field('vidyard_video') && get_field('vidyard_video') == 1 ) && (is_page_template('templates-page/customers.php')) ):
    add_action( 'wp_enqueue_scripts', 'add_vidyard_script'); 
    add_filter('script_loader_tag', 'my_script_loader_tag', 10, 3);
endif;

Hope this also gives you a better understanding of using actions and filter in wordpress.