Title: wp_enqueue etc. for Javascripts just doesn't work!
Last modified: August 20, 2016

---

# wp_enqueue etc. for Javascripts just doesn't work!

 *  [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/)
 * Hello.
 * I’m really desperate by now. For many months I’ve been trying to solve this issue(
   or rather these issues) and I just have to give up as I’ve tried everything I
   could think of and nothing worked.
    I really hope that somebody here has some
   good advice.
 * This will be a long entry in order to provide all the necessary information.
 * I’ve been really struggling with trying to enqueue Javascript to my WordPress
   theme and I just can’t get it to work. I need to get this done somehow. I will
   keep this question updated, I will edit and I hope you will work together with
   me through this step by step! It’s been a few months now and I still can’t get
   it to work and I have no clue why!
 * **Step 1:**
 * I want to move all the script calls in my header.php into my function.php:
 *     ```
       <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.2.min.js"></script>
           <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.tools.min.js"></script>
           <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>
           <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.form.js"></script>
           <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/sprinkle.js"></script>
           <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
           <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/Century_Gothic_400-Century_Gothic_700.font.js"></script>
   
           <!-- Cufon init -->
           <script type="text/javascript">
           		<?php if(get_option('alltuts_cufon')!="no"):?>
           		 Cufon.replace('h1',{hover: true})('h2')('h3')('.stepcarousel .panel .caption .title');
           		 <?php endif ?>
           	</script>
       ```
   
 * I’ll ignore the Cufon scripts for now. I just deleted them and will manage them
   later on.
 * I transfered everything to my function.php:
 *     ```
       function add_my_javascripts() {
   
       wp_register_script('jquerytools', get_template_directory_uri() . '/js/jquery.tools.min.js', array('jquery'));
       wp_register_script('jquery-ui-person', get_template_directory_uri() . '/js/jquery-ui-personalized-1.5.2.packed.js', array('jquery'));
       wp_register_script('jqueryform', get_template_directory_uri() . '/js/jquery.form.js', array('jquery'));
       wp_register_script('sprinkle', get_template_directory_uri() . '/js/sprinkle.js', array('jquery', 'jquery-ui-person', 'jquery-ui-tabs'));
       wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'));
   
       wp_enqueue_script( 'jquery' );
       wp_enqueue_script('jquerytools');
       wp_enqueue_script('jquery-ui-person');
       wp_enqueue_script('jqueryform');
       wp_enqueue_script('sprinkle');
       wp_enqueue_script('custom');
       wp_enqueue_script('tooltip', get_template_directory_uri() . '/js/tooltip.js', array('jquery', 'jquerytools'));
   
       }
       add_action('wp_enqueue_scripts', 'add_my_javascripts');
       ```
   
 * Here’s my **whole function.php** just to make sure that there’s not some other
   mistake that keeps interfering with the wp_enqueue or something: [http://pastebin.com/mhCNZbFW](http://pastebin.com/mhCNZbFW)
   
   Also, I entered the code into my **PARENT THEME’s function.php!** I do not use
   a function.php for my child theme at all. Please let me know if that also could
   cause problems! Maybe the dependancies are set wrong, but I think they are correct.
   Is there a way to confirm this?
 * And I tried to call the action in my header.php:
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
           <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
           <head profile="http://gmpg.org/xfn/11">
   
           <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
           <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
           <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
           <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
   
           <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
           	<?php wp_get_archives('type=monthly&format=link'); ?>
           	<?php //comments_popup_script(); // off by default ?>
   
           <?php add_action( 'wp_enqueue_scripts', 'add_my_javascripts' ); ?> 
   
           <?php wp_head(); ?>
   
           </head>
       ```
   
 * **Result:**
    All the scripts are properly loaded (checked with Firebug), but 
   none of them actually works! Only the “custom.js” works (even without the action
   being called in the header.php).
 * Why does this not work?
    Please help me working through this as it’s causing 
   so many problems!
 * **Step2:**
    Next step will be to provide no.Conflict wrappers to every jQuery
   JS (which also doesn’t work).
 * As far as I understand I should use
 * `jQuery(document).ready(function($) {`
 * instead of
 * `$(document).ready(function(){`
 * I found the latter in the contact.php of my parent theme. I replaced it with 
   the first code and it stopped working!!
 * Here’s the whole script of the contact.php:
 *     ```
       <script type="text/javascript">
           $(document).ready(function(){
           			  $('#contact').ajaxForm(function(data) {
           				 if (data==1){
           					 $('#success').fadeIn("slow");
           					 $('#bademail').fadeOut("slow");
           					 $('#badserver').fadeOut("slow");
           					 $('#contact').resetForm();
           					 }
           				 else if (data==2){
           						 $('#badserver').fadeIn("slow");
           					  }
           				 else if (data==3)
           					{
           					 $('#bademail').fadeIn("slow");
           					}
           					});
           				 });
           		</script>
       ```
   
 * Any idea why it doesn’t work?
 * I checked the jquery.form.js that it’s based on and could it have to do something
   with that?
 *     ```
       jQuery Form Plugin
            * version: 2.07 (03/04/2008)
            * @requires jQuery v1.2.2 or later
            *
            * Examples at: http://malsup.com/jquery/form/
            * Dual licensed under the MIT and GPL licenses:
            *   http://www.opensource.org/licenses/mit-license.php
            *   http://www.gnu.org/licenses/gpl.html
            *
            * Revision: $Id$
            */
            (function($) {
           /**
            * ajaxSubmit() provides a mechanism for submitting an HTML form using AJAX.
            *
       ```
   
 * **What I already tried:**
    – deactivated all plugins (no effect) – created a 
   function.php for my child theme and moved the code above from the parent theme’s
   function.php there (result: error message `Warning: call_user_func_array() [function.
   call-user-func-array]: First argument is expected to be a valid callback, 'get_my_scripts'
   was given in /hermes/bosweb25a/b155/ipg.zoomingjapancom/wp-includes/plugin.php
   on line 405` – tried another theme (TwentyEleven): same issues – I tried to call
   it like that in the header.php (as that’s how it’s done in the TwentyEleven theme:
 *     ```
       <?php add_action('wp_enqueue_scripts', 'add_my_javascripts'); ?>
       <?php wp_enqueue_script( 'jquery', 'jquerytools', 'jquery-ui-person', 'jqueryform', 'sprinkle', 'custom', 'tooltip' ); wp_head(); ?>
       </head>
       ```
   
 * That also doesn’t work …
 * If you need any further information, please let me know!
    Here’s my [Website](http://www.zoomingjapan.com)
   for reference. I just can’t do this on my own. Please give me some advice! Anything
   might help 🙂 Thanks so much in advance!

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303215)
 * What isn’t working? When I visited the home page of your site, it appeared that
   all JavaScript was working properly; but I’m not sure what exactly I should be
   checking.
 *  Thread Starter [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303219)
 * When using Firebug, all JavaScripts seem to be loaded properly, but they don’t
   take effect.
    Apart from the jqueryslidemenu (the navigation menu on the top)
   nothing else is working:
 * E.g.:
    – The Ajax in the contact form (my website/contact) – The tabbed sidebar
   etc.
 * When I put the code directly into the header like I had it originally it works
   fine.
    The reason why I wanted to try to move it into the function.php instead
   is that it’s supposed to be better (less conflicts) – plus I have issues getting
   some other jQuery based tools to work at all (even if I call them directly in
   the header.php with the normal script code), so I thought this might help.
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303238)
 * Looking at the errors generated in Chrome’s developer window, part of this looks
   like it’s a JavaScript conflict, and part of it looks like it’s a malformed JavaScript
   file.
 * The first error comes from the `$(document).ready()` call in sprinkle.js. I think
   the `jQuery().noConflict()` call in custom.js is short-circuiting the `$()` there.
   Can you try editing sprinkle.js to use `jQuery( function( $ ) )` instead of `
   $(document).ready()`?
 * Second problem is that tooltip.js is incomplete. I’m not sure exactly what the
   file is supposed to look like; but right now, the entire contents of that file
   are:
 *     ```
       $(document).ready(function(){
       $("#demo img[title]").tooltip();
       ```
   
 * As you can probably see, there are elements opened on the first line of the file
   that never get closed. At the very least, that file needs to look like:
 *     ```
       $(document).ready(function(){
       $("#demo img[title]").tooltip();
       });
       ```
   
 * Again, though, you probably want to swap out `$(document).ready()` with `jQuery(
   function( $ ) )`.
 * Once you get those things taken care of, I’ll try to take a look and see if I
   can figure out anything else that might be going on.
 *  Thread Starter [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303240)
 * Hello again.
    Thank you so much for helping!! I’m really happy that finally things
   seem to go in the right direction.
 * The tooltip has never worked before (was one of the tools I couldn’t get to work,
   here’s the minimal setup: [http://flowplayer.org/tools/demos/tooltip/index.html](http://flowplayer.org/tools/demos/tooltip/index.html))
   
   I fixed both scripts as you told me and now it works just fine! 🙂
 * Still many other issues to go.
    After all I want to find out why the wp_enqueue
   I have in my function.php doesn’t seem to work.
 * The tooltip one works now without the script being called directly in the header.
   php just as the custom.js.
    The sprinkle.js doesn’t work unless I put the original
   script call in the header.php.
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303243)
 * My first guess would be that the scripts aren’t being output in the right order
   to work properly.
 * The first thing to do would be to make sure that your dependencies are properly
   declared in your `wp_register_script()` function calls. I haven’t looked at the
   source, but I’d almost bet that jquery-ui-personalized is probably dependent 
   on jquery-ui; but jquery-ui is being called into the page header after that file.
 * Secondly, you don’t need to enqueue jquery, because it’s already declared in 
   the dependencies of the other scripts you’re enqueuing. When you add something
   to the list of dependencies in the `wp_register_script()` or `wp_enqueue_script()`
   function, WordPress automatically knows that it has to include those scripts 
   before it includes the script you’re registering.
 * The dependencies list in those two functions is an array. You should list all
   of the dependencies a script has (in order) within that parameter of the function
   call. That way, WordPress knows that it needs to include those scripts, in order,
   before it includes the script you’re registering.
 *  Thread Starter [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303249)
 * I understand what you say and I tried.
    My function.php looks like this now:
 *     ```
       function add_my_javascripts() {
   
       wp_register_script('jquerytools', get_template_directory_uri() . '/js/jquery.tools.min.js', array('jquery'));
       wp_register_script('jquery-ui-person', get_template_directory_uri() . '/js/jquery-ui-personalized-1.5.2.packed.js', array('jquery', 'jquery-ui'));
       wp_register_script('jqueryform', get_template_directory_uri() . '/js/jquery.form.js', array('jquery', 'jquery-form'));
       wp_register_script('sprinkle', get_template_directory_uri() . '/js/sprinkle.js', array('jquery', 'jquery-ui-person'));
       wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'));
       wp_register_script('tooltip', get_template_directory_uri() . '/js/tooltip.js', array('jquery', 'jquerytools'));
   
       wp_enqueue_script('jqueryform');
       wp_enqueue_script('sprinkle');
       wp_enqueue_script('custom');
       wp_enqueue_script('tooltip');
   
       }
       add_action('wp_enqueue_scripts', 'add_my_javascripts');
       ```
   
 * Still not working are the sprinkle.js and the contact form which is supposed 
   to use ajax jquery-form (jquery.form.js on my server).
    As for sprinkle.js I 
   think all I need is that personalized-ui thingie and jquery. Here’s where I got
   it from originally: [http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/](http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/)
 * The jquery-form contact.php was already coded like that as it’s part of my parent
   theme. I’m not sure about dependencies here.
 * Again, thanks so much!
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303251)
 * I just realized that jquery-ui-personalized is a custom copy of jQueryUI (it 
   appears to just be a copy of jquery-ui-core and jquery-ui-tabs together in one
   file). Try it this way and see if this makes any difference at all:
 *     ```
       function add_my_javascripts() {
           /* If this is the admin area of WordPress, don't do anything */
           if( is_admin() )
               return;
   
           /* Register all of our scripts */
           wp_register_script('jquerytools', get_template_directory_uri() . '/js/jquery.tools.min.js', array('jquery'));
           wp_register_script('jqueryform', get_template_directory_uri() . '/js/jquery.form.js', array('jquery-form'));
           wp_register_script('sprinkle', get_template_directory_uri() . '/js/sprinkle.js', array('jquery-ui-core', 'jquery-ui-tabs'));
           wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'));
           wp_register_script('tooltip', get_template_directory_uri() . '/js/tooltip.js', array('jquerytools'));
   
           /* Enqueue the ones that need to be enqueued */
           wp_enqueue_script('jqueryform');
           wp_enqueue_script('sprinkle');
           wp_enqueue_script('custom');
           wp_enqueue_script('tooltip');
   
       }
       add_action('wp_enqueue_scripts', 'add_my_javascripts');
       ```
   
 *  Thread Starter [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303252)
 * Edited. Still no change, I’m afraid.
    Edit: Apart from the function.php I have
   no action hook or any calls in my header.php right now. Not sure if this is important.
 *  Thread Starter [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303256)
 * Here’s the script in my contact.php if that helps:
 *     ```
       <script type="text/javascript">
       		 $(document).ready(function(){
       			  $('#contact').ajaxForm(function(data) {
       				 if (data==1){
       					 $('#success').fadeIn("slow");
       					 $('#bademail').fadeOut("slow");
       					 $('#badserver').fadeOut("slow");
       					 $('#contact').resetForm();
       					 }
       				 else if (data==2){
       						 $('#badserver').fadeIn("slow");
       					  }
       				 else if (data==3)
       					{
       					 $('#bademail').fadeIn("slow");
       					}
       					});
       				 });
       		</script>
       ```
   
 *  Thread Starter [japanworm](https://wordpress.org/support/users/japanworm/)
 * (@japanworm)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303291)
 * I got the jqery-form with the contact.php to work as well.
    What I did was I 
   took out the direct script call in the contact.php and put it into its own js
   file and then enqueued it in the function.php, also I wrapped it with a no-Conflict
   wrapper. I’m not sure if it’s a good thing to call it in the function.php instead
   of the contact.php. Will it be loaded on every single page now or does WordPress
   know that it only needs to load it on the contact.php??
 * Anyways, the only thing left is sprinkle.js.
 * I think there’s a conflict because sprinkle.js uses the normal ui-tabs, but I
   also have the jquery tools tabs, so I need to enter something like the following,
   but don’t know exactly where:
 *     ```
       <script type="text/javascript" src="jquery-1.6.2.js"></script>
          <script type="text/javascript" src="jquery.tools-1.2.6-dev.js"></script>
   
          <!-- must do this before including jquery-ui -->
          <script type="text/javascript">
             // change name of jquery tools tabs so that jquery UI doesn't barf
             jQuery.fn.jtTabs = jQuery.fn.tabs;
          </script>
   
          <script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
       ```
   

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘wp_enqueue etc. for Javascripts just doesn't work!’ is closed to new 
replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [wp_enqueue](https://wordpress.org/support/topic-tag/wp_enqueue/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10 replies
 * 2 participants
 * Last reply from: [japanworm](https://wordpress.org/support/users/japanworm/)
 * Last activity: [14 years, 6 months ago](https://wordpress.org/support/topic/wp_enqueue-etc-for-javascripts-just-doesnt-work/#post-2303291)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics