I have a custom made slideshow, which I used jQuery to develop. It works perfect on my local machine, but when I try and transition it to the wordpress server it just will not work...
This is how I link my javascript files:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<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>
And I've also checked that the javascript is working (stuff like alert). But everything related to jQuery doesn't.
Desperately need help. Any hints or links to related tutorials will do. Thanks n advance!
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(); ?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With