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'); 

CodePudding user response：

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.