Include jQuery into Wordpress template
You should use wp_enqueue_script()
in your functions.php
file, not your header.php
. (and you're adding jQuery twice)
functions.php:
function my_scripts_method() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/js/JQueryUI.js', ); wp_enqueue_script( 'slider', get_template_directory_uri() . '/js/slider.js' ); wp_enqueue_script( 'gallery', get_template_directory_uri() . '/js/gallery.js' );}add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
You should also note that WordPress enqueues jQuery in noConflict mode, so you'll need noConflict wrappers to be able to use $
:
jQuery(document).ready(function($) { // your code here});
Then you just call wp_head()
and WordPress will automatically add those javascripts to your page.
As you can see here: Function Reference/wp head, in the In twentyten theme example they added a note:
/* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */
this just says you need to put the wp_head();
function just befor closing the <head></head>
.
so try on putting this line:
<?php wp_head(); ?>
as the last line before closing the <head>
in you'r site.
and another problem i have seen is that you forgot to end the php lines with ;
it is very critical !
with the code you gave here, change it with this:
<?php wp_enqueue_script("jquery"); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jQuery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/JQueryUI.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slider.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/gallery.js"></script> <?php wp_head(); ?>