wp_enqueue etc. for Javascripts just doesn't 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
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('«', 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 for reference.
I just can’t do this on my own.
Please give me some advice! Anything might help 🙂
Thanks so much in advance!
The topic ‘wp_enqueue etc. for Javascripts just doesn't work!’ is closed to new replies.