Properly embed javascript into WP (using function.php) - doesn't work?

Question

It seems that my contact form's ajax javascript and the custom.js that I'm using for my drop-down navigation are interfering with each other. The contact form's ajax fuction will only work properly if I won't call the "custom.js" in the header. Furthermore I've had troubles using some jquery sliders, too, because something seemed to be interfering and I think that custom.js might be the cause. I just copied it from another theme and tried to implement it into my theme, but apparently that wasn't such a good idea. This has been a problem for months now. If only I knew how to fix that conflict, I have to admit that I know nothing about javascript!

Here's my website and here's my current header.php: http://pastebin.com/XhwqAGBt This is the custom.js: http://pastebin.com/A9ZRySra

I need to get this sorted out no matter what, but I really can't do it on my own as my knowledge about javascript is non-existent, so please help me out a little! I'll try hard to figure things out on my own, but I need a little help here, please!

EDIT4: I deleted my previous edits as it's getting too much to read and it wasn't that relevant anymore. I've been working on this almost the whole night and I just don't get it. Somebody who knows a bit about javascript, PLEASE help me out a little here.

I'm trying to get rid of all the javascript calls in my header.php and put them into my function.php instead as I heard that's better to do?! So, what looked like this in my header.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.form.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>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascript/custom.js"></script>

I'm trying to put into my function.php which looks like this right now:

function my_scripts_method() {
 // Load jQuery
if ( !is_admin() ) {
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false);
   wp_enqueue_script('jquery');
}
 wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'));
 wp_register_script('cufon-yui', get_template_directory_uri() . '/js/cufon-yui.js', array('jquery'));
 wp_register_script('century_font', get_template_directory_uri() . '/js/Century_Gothic_400-Century_Gothic_700.font.js', array('jquery', 'cufon-yui'));

wp_enqueue_script('custom');
wp_enqueue_script('jquery.form');
wp_enqueue_script('cufon-yui');
wp_enqueue_script('century-font');

}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Apart from the custom.js nothing else is working!! The cufon-yui etc.! Am I calling them incorrectly? I'm also not sure about the "jquery.form.js". Do I have to register it first? Should I call the WP "jquery-form" instead?!

EDIT: Additional information: When I leave the custom.js in the function.php and put the other scripts back into the header, both: the navigation dropdown menu (custom.js) and the contact form (jquery.form + jquery 1.4.2) work perfectly fine. I tried to put the javascript in the contact.php to "no.conflict" mode, but then the contact form stopped working properly again. I really don't get it!!

Thanks a lot in advance!

Answer 1

By default, the jQuery script is loaded in no conflict mode. I noticed that you have in you header.php the following code:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.2.min.js"></script>

Adding jQuery like this, will override (if the page works) the wp_enqueue_script('jquery').

If you load jQuery like this, you need to activate the noConflict mode, as explained here.

My suggestion is to load your scripts one way, or via wp_enqueue_script or by including in the html header tag. Using both is tricky.

Hope it helps.

Domingos

Answer 2

This should work fine. You may have some basic syntax issues ( - vs _ vs .), ensuring the correct path/location of the javascript files (have put all the scripts under the 'template_folder/javascript/' and remove all the calls from header.php

Try this.

function my_scripts_method() {
    // Load jQuery
    if ( !is_admin() ) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false);
        wp_enqueue_script('jquery');
    }
    wp_register_script('custom', get_template_directory_uri() . '/javascript/custom.js', array('jquery')); wp_register_script('cufon-yui', get_template_directory_uri() . '/javascript/cufon-yui.js', array('jquery')); wp_register_script('century-font', get_template_directory_uri() . '/javascript/Century_Gothic_400-Century_Gothic_700.font.js', array('jquery', 'cufon-yui'));
    wp_enqueue_script('custom');
    wp_enqueue_script('jquery-form');
    wp_enqueue_script('cufon-yui');
    wp_enqueue_script('century-font');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );