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

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

• php
• javascript
• wp-enqueue-script

• Where is render_brightcove_player and when is it called? Is there a reason you don't enqueue it always then check in JS if the thing you want to hide is showing/exists? You're meant to enqueue scripts in a particular hook, doing it outside that hook sometimes works but it depends on when you do it rather than how you do it – Tom J Nowell ♦ Commented Mar 27, 2020 at 14:32
• render_brightcove_player is called at many places. I am wondering if its not a good practice if I enqueue inside a php function ? Where we usually enqueue our scripts ? – user5447339 Commented Mar 27, 2020 at 14:40
• that render function is called at many places and is used for live streaming applications. – user5447339 Commented Mar 27, 2020 at 14:44
• The official doc has an example of how to use the function and the hook. Do you mean to say that render_brightcove_player is being used on the frontend in various templates, called directly? Or is it a shortcode? Or is it on a hook? In the header? Footer? – Tom J Nowell ♦ Commented Mar 27, 2020 at 14:44
• Yes it is being used on the frontend in various templates and called directly as well. Its not a shortcode, neither hook nor header/footer. – user5447339 Commented Mar 27, 2020 at 14:52

1 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/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;
}