Can’t include custom JS to WordPress

2 Views

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:

Read More
<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!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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.

  2. 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');
?>