0

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.

enter image description here

  • 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 Mar 27 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 Mar 27 at 14:40
  • that render function is called at many places and is used for live streaming applications. – user5447339 Mar 27 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 Mar 27 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 Mar 27 at 14:52
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;
}
| improve this answer | |
  • CSS ? I want to hide a logo only on click of a play button. – user5447339 Mar 27 at 15:59
  • If I add css, then it will disappear permanently. – user5447339 Mar 27 at 15:59
  • Does your javascript not do the same thing? At this point we're talking about something else that isn't the question. The question was about how to enqueue javascript – Tom J Nowell Mar 27 at 17:11
  • The reason why I asked because you mentioned "Instead of using javascript, put this CSS in your stylesheet." – user5447339 Mar 27 at 17:41
  • I would be very happy to know how we can do this only through CSS. – user5447339 Mar 27 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.