1

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'); 
1
  • wp_enqueue_vidyard - that isn't a registered action in WP. Try changing that to wp_enqueue_scripts Commented Jun 8, 2022 at 21:02

1 Answer 1

2
  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.

Sign up to request clarification or add additional context in comments.

2 Comments

Howdo you add the async and the ID?
I edited my answer with additional script to add a async attribute to the script tag. Hope it helps you out!

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.