Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Include jQuery into Wordpress template

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!

like image 253
KostR Avatar asked Mar 24 '23 16:03

KostR


2 Answers

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.

like image 91
RRikesh Avatar answered Apr 20 '23 16:04

RRikesh


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(); ?>
like image 26
Eliran Efron Avatar answered Apr 20 '23 18:04

Eliran Efron