wp_enqueue_script not working, no idea why

  • cbrummette

    (@cbrummette)


    7 years, 8 months ago

    Hi, I have a problem with running some javascript, and as far as I can tell, all my code is completely okay. Here’s the code in my functions.php file:

    <?php
function ColTheme_enqueue_scripts(){
echo "Testing";
wp_enqueue_script('scrippyj', get_bloginfo('template_directory') . '/scrippyj.js');
}
add_action('init', 'ColTheme_enqueue_scripts');
?>

    The “Testing” text prints successfully on my site, but the scrippyj.js file does not run. I’ve tried using get_template_directory_uri() instead of get_bloginfo, but that didn’t change anything. I even looked at the website’s source code, and there is nothing mentioned about enqueueing scripts.

    Also, possibly related, now when I try to go to my WordPress dashboard, I get an error:
    “Warning: Cannot modify header information – headers already sent by (output started at /home4/cbrummette/public_html/wp-content/themes/ColTheme/functions.php:2) in /home4/cbrummette/public_html/wp-includes/pluggable.php on line 1167”

    Does someone know what’s going on? Thanks in advance

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    Hi there!

    I think you may be using the wrong hook. Rather than init you want to use wp_enqueue_scripts, the codex provides some information about that particular hook:
    https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

    Let us know if that helps!

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Hi, Jose! Thanks for the tip, but I should have mentioned that I tried that originally, with no success. I went ahead and put it back in, so that line 6 now looks like this:

    add_action('wp_enqueue_scripts', 'ColTheme_enqueue_scripts', false);

    still no success 🙁

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    So, I guess now the question is: where are you trying to load this?

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Do you mean whether I’m trying to load it in the footer or header?
    If so, the header. I’m leaving the last 3 parameters of wp_enqueue_script as default.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    Sorry, I really should have asked: are you loading it on the front-end on the admin side? This will determine what hook you should be hooking to. 🙂

    The admin side does have a different hook that you can use and you can even do it on only certain admin screens:
    https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Ah, gotcha.
    I’m loading it on the front-end. I’m trying to run javascript (specifically jQuery) to animate some images on the homepage.

    The weird thing is that, even from the very start, the little “test” I set up on line 3 has been working. So my guess is that the function is successfully being hooked, but something with line 4 isn’t quite right. But still that’s just a guess, and I’m not very experienced with WordPress coding.
    Thanks, Jose, for your help so far! Really appreciated.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    Happy to help!

    Where is the scrippy.js file located within your theme’s folder? If it’s inside another folder you would need to make sure the path is correct other wise you could end up with a 404 on that file. You can check with your browser’s console in the developer tools. 🙂

    So if it’s inside a js folder you would use:

    wp_enqueue_script( 'scrippyj', get_template_directory_uri() . '/js/scrippyj.js', array( 'jquery' ) );

    That would enqueue the file as well as jQuery.

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Oh nice, thanks for the jQuery tip! I’ll make sure to put that in once this problem is solved.
    It’s located right under the theme folder, with no folders in between…
    I even tried hardcoding the url like this:

    wp_enqueue_script('scrippyj', 'http://www.colorburnmusic.com/wp-content/themes/ColTheme/scrippyj.js');

    Still nothing. But maybe that url is wrong? I tried to find out how to use my browser’s (chrome’s) console to find the url but I never figured that out.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    Chrome’s console tab can be found by pressing F12, Ctrl+Shift+I or ⌘+Shift+I, or Menu > More tools > Developer tools. From there you’ll get a new window with a few tabs – one of which is the Console.

    Their docs have some neat things on it as well:
    https://developers.google.com/web/tools/chrome-devtools/?hl=en

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Sorry for the delayed response.
    So after some digging around, I think I’ve found the problem! I just wanna run this by before I do anything stupid.

    So, in the same functions.php file, I put in this:

    <h1><?php get_template_directory_uri()?></h1>

    Nothing outputted. I verified that the <h1> tag was being read by changing the php function to echo "yo", and that worked like normal. Weird.

    So, I researched the get_template_directory_uri() function and found that it’s typically found in “wp_includes/theme.php”. I opened that file up and searched for the function, and it wasn’t there!

    Soooo, I’m thinking that I should copy the code provided here, and paste it onto the bottom of my themes.php file, and it’ll work! …right?

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    That doesn’t sound quite right… O_o

    That function does exist in line 326: https://core.trac.wordpress.org/browser/tags/4.5.3/src/wp-includes/theme.php#L326

    It’s not going to output anything because the function actually returns the path. It doesn’t echo or print anything out. If you use:

    <h1><?php echo get_template_directory_uri(); ?></h1>

    It will display the path sort of like: site.com/wp-content/themes/theme

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Dang, I thought I had it for a second, but you’re right about everything.

    I really need to get a better code editor. I re-searched the same exact string as last time, and now instead of saying “no results”, it shows the function just fine… So frustrating.

    And yeah, I forgot to put in “echo”, and putting it in displayed it like normal. Good call

    I guess I’m back to square one with this. I tried loading the script with this method:

    <script type="text/javascript" src="http://colorburnmusic.com/wp-content/themes/ColTheme/scrippyj.js"></script>

    It worked fine! Although I know that this method isn’t great because of potentially conflicting plugins…
    So, at least I know for sure that the directory is correct and that scrippyj.js will work right when it gets loaded.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    I’m wondering if this happens with any other theme or just the one you created?

    Does your theme have the wp_head() function? I think that may be a possible reason. wp_enqueue_scripts is hooked to that in order for all scripts and styles to print out on the front end.

    Thread Starter cbrummette

    (@cbrummette)

    7 years, 8 months ago

    Good news: It works! I can call the javascript using wp_enqueue_script in the functions.php file! The problem was that the <head> section in header.php had a syntactical error. So glad that’s over with!

    Bad news: I can’t get jquery to run… here’s what I have (for now) in the scrippyj.js file:

    alert ("Yes! It's working!");
$("#tButton").click(function(){
        $("#tDiv").hide();
});

    And this is the line where I’m calling the script as well as jquery:

    wp_enqueue_script('scrippyj', get_template_directory_uri() . '/scrippyj.js', array('jquery'));

    tButton and tDiv are both what they sound like, and they both successfully appear from the index.php file.
    Thanks again for your help, Jose! 🙂
    Care to help me with this last part?

    stephencottontail

    (@stephencottontail)

    7 years, 8 months ago

    Can you post a link to a page that shows the issue? One possible cause is that WordPress loads jQuery in no-conflict mode by default, so the $ shortcut won’t be available.

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • The topic ‘wp_enqueue_script not working, no idea why’ is closed to new replies.