0

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_register_script('colorbox-js', 
     '/wp-includes/js/jquery/jquery-3.2.1.min.js' , 
     array('jquery')
    ); // when echoed, it returns true 

//for using the js files needed for meet-the-team page
    add_action('wp_enqueue_script', 'colorboxJS');
    function colorboxJS() {
        wp_enqueue_script(
            'colorbox', 
            'wp-content/themes/bbrebuild/colorboxJSfile.js', 
             array('jquery', 'colorbox-js')
        );
    }

Here's what colorboxJSfile.js looks like:

//alerts just to see if the file got loaded correctly
jQuery(document).ready(function(){
    alert("helloooooo");
});

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 '17 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." – nopenopenope Sep 30 '17 at 17:39
  • pass url like get_stylesheet_directory_uri() . '/colorboxJSfile.js' – BlueSuiter Sep 30 '17 at 18:55
  • as I've stated in the question, I tried that and it didn't. – nopenopenope Sep 30 '17 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. – FluffyKitten Oct 1 '17 at 1:18
-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.

<?php
    add_filter('wp_enqueue_scripts', 'colorboxJS');
    function colorboxJS() {
        wp_enqueue_script(
            'colorbox', 
            get_stylesheet_directory_uri() . '/colorboxJSfile.js', 
            array('jquery')
        );
    }
?>
  • 2
    Please edit your answer, and add an explanation: why could that solve the problem? – fuxia Sep 30 '17 at 19:30
  • @nopenopenope is it worked for you. – BlueSuiter Oct 1 '17 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 – FluffyKitten Oct 1 '17 at 10:13
  • @AmitChauhan this worked. But can you please edit your answers so it explains? I will then mark it as resolved. – nopenopenope Oct 6 '17 at 17:17
  • @nopenopenope I have updated the answer, please have a look. – BlueSuiter Oct 14 '17 at 7:29

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.