CODEWITHSUNDEEP
javascriptjquerywordpress
YeahMKD
YeahMKD

Reputation: 425

Adding custom JavaScript file to footer.php

I want to add something like this to a WordPress page: (fiddle)

var div = $('#move');
var upper = $('#up');
var downer = $('#down');

upper.click(function() {
    div.animate( { top: '-100'}, 500);
});
downer.click(function() {
    div.animate( { top: '0'}, 500);
});

I know how to add the divs and the CSS to get that all working correctly, but I can't seem to figure out how to add the JavaScript to make the two divs (up and down) to work correctly. I can't seem to find anything on adding that code to the footer as well. From what I understand, the only way to have functionality like that is to have the code in the footer.

I tried a few different solutions, but none of them seem to work.

The name of the file is java.js that I have the functions stored in

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>wp-content/themes/kallyas/js/java.js"></script>

I placed that in footer.php right after the closing body tag, but again didn't work.

I may have the path wrong. From the base of the wordpress install, I have it here: wp-content/themes/kallyas/js/java.js

Upvotes: 3

Views: 3594

Answers (2)

brasofilo
brasofilo

Reputation: 26055

Remove the script loading from header.php, and also remove any jQuery loading from it. Then, you can use wp_enqueue_script to make your JS file load at the footer and to force the inclusion of other files (jQuery in this case) as dependencies.

Add to your functions.php file:

add_action( 'wp_enqueue_scripts', 'enqueue_so_18552010' );

function enqueue_so_18552010()
{
    wp_enqueue_script( 
        'my-java', // Handle
        get_stylesheet_directory_uri() . '/js/java.js', // URL for child or parent themes
        array( 'jquery' ), // Dependencies
        false, // Version
        true // In footer
    );
}

PS: Don’t Dequeue WordPress’ jQuery and if you do it, do it correctly with Use Google Libraries.

Upvotes: 1

Dejo Dekic
Dejo Dekic

Reputation: 2126

Add this to your functions.php file:

//Ad our custom Jquery
function init_js_scripts() {
if (!is_admin()) {
    //Use Google to get JQuery libary...
    wp_register_script('jquery', ('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'), false, '');
    wp_enqueue_script('jquery');

    // load a JS file to your theme: js/theme.js
    wp_enqueue_script('my_script', get_template_directory_uri() . '/js/myjavascript.js', array('jquery'), '1.0', true);

    }
}
add_action('init', 'init_js_scripts');

Upvotes: 1

Related Questions