I have this page that uses colorbox to popup information about the staff members when the photo is clicked. My page is a child theme of a West and I inserted the following code in the functions.php

//register colorbox
     '/wp-includes/js/jquery/jquery-3.2.1.min.js' , 
    ); // when echoed, it returns true 

//for using the js files needed for meet-the-team page
    add_action('wp_enqueue_script', 'colorboxJS');
    function colorboxJS() {
             array('jquery', 'colorbox-js')

Here's what colorboxJSfile.js looks like:

//alerts just to see if the file got loaded correctly

I believe there's something wrong with the function I wrote, I'm new to PHP but I used the format of the WordPress docs and this video mainly to write it and I don't know what's wrong with the code.

I also get this in my console:

Navigated to http://localhost:8080/wordpress/about/meet-the-team/admins/ jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1

jquery.js?ver=1.12.4:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

I've also tried using get_stylesheet_directory_uri(), but it didn't make a difference when used like this: get_stylesheet_directory_uri() . 'colorboxJSfile.js', but the wp docs said it accepts absolute path relative to the wordpress root directory, so I left it as that. My custom JS file is here: wamp64 > wwww > wordpress > wp-content > themes > rebuild > colorboxJSfile.js It's at the same directory of the index.php, functions.php and the header.php and footer.php files.

I've been stuck on this problem the whole day and I would really appreciate some help. If there's anything I left out, let me know.

Edit: the odd part is when the colorbox file and it's dependency was linked in the header.php file, it worked, but not fully. i.e. When I click on the photos, it showed the popup of the iframes like it was supposed to, but the max-width (which i was using to make it responsive) didn't work so I looked into it and consulted another developer at my workplace and he said that it should be included using the wp_enque_script.

  • where you re keeping colorbox js
    – BlueSuiter
    Sep 30, 2017 at 17:35
  • ^ "My custom JS file is here: wamp64 > wwww > wordpress > wp-content > themes > rebuild > colorboxJSfile.js It's at the same directory of the index.php, functions.php and the header.php and footer.php files." Sep 30, 2017 at 17:39
  • pass url like get_stylesheet_directory_uri() . '/colorboxJSfile.js'
    – BlueSuiter
    Sep 30, 2017 at 18:55
  • as I've stated in the question, I tried that and it didn't. Sep 30, 2017 at 18:57
  • When you say its not working, can you explain what you mean by that - is it getting included but not getting executed? Is it not getting included at all? Both of those situations require different ways to debug the issue, so its difficult to help without knowing exactly what we're trying to help with. Oct 1, 2017 at 1:18

1 Answer 1


You were using action to enqueue script, instead you need to use filter hook. As, you are adding a new script to the scripts call.

However, if you used action hook for the wp_head call it works there.

    add_filter('wp_enqueue_scripts', 'colorboxJS');
    function colorboxJS() {
            get_stylesheet_directory_uri() . '/colorboxJSfile.js', 
  • 2
    Please edit your answer, and add an explanation: why could that solve the problem?
    – fuxia
    Sep 30, 2017 at 19:30
  • @nopenopenope is it worked for you.
    – BlueSuiter
    Oct 1, 2017 at 5:54
  • Code-only answers are discouraged because they do not explain how they solve the issue in the OP's question. To meet the site guidelines, please update your answer with an explanation as fuxia suggested. See How do I write a good answer Oct 1, 2017 at 10:13
  • @AmitChauhan this worked. But can you please edit your answers so it explains? I will then mark it as resolved. Oct 6, 2017 at 17:17
  • @nopenopenope I have updated the answer, please have a look.
    – BlueSuiter
    Oct 14, 2017 at 7:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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