How to use wordpress function wp_enqueue_script() in php?

Question

I have a php function as shown below. The following function is being used at many places.

function render_brightcove_player($active_feed, $poster_image = false)
{
    $poster = '';
    if ($poster_image) {
        $poster = 'poster=' . esc_url($poster_image);
    }
    ?>
    <div class="hsc-video" onclick="hscLogo()">
        <div class="hsc-video__inner">
            <script src="//players.brightcove.net/1242843915001/SJ3Tc5kb_default/index.min.js"></script>
        </div>
    </div>
    <?php
    wp_enqueue_script(                                      
    'miscellaneous-scripts',
    HSC_TEMPLATE_URL . "/assets/js/miscellaneous.js"
    );
}

I have added wordpress function wp_enqueue_script(). Inside miscellaneous.js file I am using:

function hscLogo() {
    document.getElementsByClassName("hsc-tv-logo")[0].style.display = "none";
}

I am wondering if that is the right way to use wp_enqueue_script() function in php. Do I need to place wp_enqueue_script() somewhere else ?

This is the first time I am using wp_enqueue_script in wordpress. Here is the tree structure of javascript folders/files.

Answer 1

I am wondering if that is the right way to use wp_enqueue_script() function in php. Do I need to place wp_enqueue_script() somewhere else ?

Not really, here's what the official docs say in the notes:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

The function should be called using the wp_enqueue_scripts action hook if you want to call it on the front-end of the site, like in the examples above. To call it on the administration screens, use the admin_enqueue_scripts action hook. For the login screen, use the login_enqueue_scripts action hook. Calling it outside of an action hook can lead to problems, see the ticket #11526 for details.

The way you're doing it might work as it will try to print scripts out in the footer, assuming your theme is built correctly and makes all the right calls, e.g. wp_head, wp_footer, etc

But further than that, the approach is wrong.

Instead of:

• When Brightcove player HTML is printed
  • enqueue the script
  • Hide a logo using a hscLogo function in the script that's called by doing ????

The code should:

• Always enqueue the script
• on the DOM ready, check for a brightcove player
  • if a brightcove player is found, remove the logo

Or better yet, instead of using javascript, put this CSS in your stylesheet:

.hsc-tv-logo {
  display: none;
}