Can't include custom JS to Wordpress

Question

my Wordpress page loads (using jQuery's load() ) another page in it and i want the main page to already have all the needed .js files, some of them are hand-made.

When i try to normally add them with the usual:

<script src="http://10.0.0.158:8082/js/myScript.js"></script>

sometime it works, sometimes not. 70% times doesn't work, i just need a few F5 to temporanely made it work.

My page loads a lot of other page inside of it (always with the jQuery's load() ) but it work fine if imported in a normal php page.

Wordpress just mess it up.

So i googled a lot and seems like i can't just import script via html tag, i need to use wordpress's php function wp_enqueue_script, documentation here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Using information from that documentation and from this guide: http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

i made this function:

<?php
        function customScriptInit() {
    if (!is_admin()) {
        echo"look! i'm working!";

        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://10.0.0.158:8082/js/JQuery.min.js', false, '1.8.3', true);
        wp_enqueue_script('jquery');

        wp_enqueue_script('jqueryUi', 'http://10.0.0.158:8082/js/jquery-ui-1.9.2.min.js', array('jquery'), '1.0', true);
        wp_enqueue_script('cookie', 'http://10.0.0.158:8082/js/cookie.js', array('jquery'), '1.0', true);
        wp_enqueue_script('json2', 'http://10.0.0.158:8082/js/json2.js', array('jquery'), '1.0', true);
        wp_enqueue_script('easing', 'http://10.0.0.158:8082/js/easing.min.js', array('jquery'), '1.0', true);
    }
    }
add_action('wp_enqueue_scripts', 'customScriptInit');
?>

i placed an echo command to ensure that its running fine (yes, i can see that message in my page now).

But now.. looks like no js is loaded at all, i have this error from javascript console:

Uncaught ReferenceError: jQuery is not defined

if i remove the 3 line about jQuery deregister and registering again i got jQuery working, but not my imported script, usually with the cookie's js error:

Can't read cookie: TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method 'cookie'

How i can correctly import those js files into my page?

I know that with Wordpress it's good to use "jQuery" instead of "$" and i just converted them all having this result, using "$" ended up in a total mess!

edit: solved with this code

<?php
function customScriptInit() {
    if (!is_admin()) {

        wp_register_script( 'my-jqueryUi', ABSPATH . '/js/jquery-ui-1.9.2.min.js');
        wp_register_script( 'my-cookie', ABSPATH . '/js/cookie.js');
        wp_register_script( 'my-json2', ABSPATH . '/js/json2.js');
        wp_register_script( 'my-easing', ABSPATH . '/js/easing.min.js');

        wp_enqueue_script( 'my-jqueryUi');
        wp_enqueue_script( 'my-cookie');
        wp_enqueue_script( 'my-json2');
        wp_enqueue_script( 'my-easing');
        }
    }
add_action('wp_enqueue_scripts', 'customScriptInit');
?>

thanks to adeneo for good practice segnalation!

adeneo · Accepted Answer · 2013-02-28 11:34:57Z

3

You should'nt load your own version of jQuery, as you'd most likely end up with several versions of jQuery on your site. Just set jQuery and jQueryUI as requered in your other scripts, and wordpress will automatically load jQuery:

function customScriptInit() {
    if (!is_admin()) {
       $depends_on = array('jquery', 'jquery-ui-core', 'jquery-ui-sortable');

        wp_enqueue_script('cookie', ABSPATH . '/js/cookie.js', $depends_on);
        wp_enqueue_script('json2',  ABSPATH . '/js/json2.js', $depends_on);
        wp_enqueue_script('easing', ABSPATH . '/js/easing.min.js', $depends_on);
    }
}

add_action('wp_enqueue_scripts', 'customScriptInit');

And use one of the WP variables for the URL's, don't hardcode them. For a plugin you'd normally do :

plugins_url('/js/cookie.js', __FILE__)

to get the proper url etc.

Also note above that in wordpress you need to load each part of jQuery UI seperately, depending on what you need, it's all explained in the Codex!

In Wordpress, you don't need to change all the dollarsigns with jQuery, you just wrap it in a no-conflic wrapper, like so:

jQuery(document).ready(function($) {
    // $() will work just fine as an alias for jQuery() inside of this function
});

Inside that, you'll use $ as usual, making things a lot easier.

answered Feb 28, 2013 at 11:34

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HypeZ Over a year ago

thank you for the good practice about abspath and the $! But i tried your solution and now "not always" works. If my loaded page have more than 1 page load inside of it all the js are messed up again! I also found a solution, i'm adding it to main post! Thank you :)

HypeZ · Accepted Answer · 2013-02-28 12:04:04Z

0

solved registering js file before

<?php
function customScriptInit() {
    if (!is_admin()) {

        wp_register_script( 'my-jqueryUi', ABSPATH . '/js/jquery-ui-1.9.2.min.js');
        wp_register_script( 'my-cookie', ABSPATH . '/js/cookie.js');
        wp_register_script( 'my-json2', ABSPATH . '/js/json2.js');
        wp_register_script( 'my-easing', ABSPATH . '/js/easing.min.js');

        wp_enqueue_script( 'my-jqueryUi');
        wp_enqueue_script( 'my-cookie');
        wp_enqueue_script( 'my-json2');
        wp_enqueue_script( 'my-easing');
        }
    }
add_action('wp_enqueue_scripts', 'customScriptInit');
?>

answered Feb 28, 2013 at 12:04

HypeZ

4,1273 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Can't include custom JS to Wordpress

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related