Grow your CSS skills. Land your dream job.

Jquery WP issue

  • # December 19, 2012 at 7:39 pm

    Working locally, I call jquery from my functions.php file via:

    if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11);
    function my_jquery_enqueue() {
    wp_deregister_script(‘jquery’);
    wp_register_script(‘jquery’, “http” . ($_SERVER == 443 ? “s” : “”) . “://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”, false, null);
    wp_enqueue_script(‘jquery’);
    }

    I then add the scripts I want to use into the header:

    < ?php wp_head(); ?>


    However it is not working, so I’m guessing the problem is simple and I am overlooking something. Any help would be appreciated.

    # December 20, 2012 at 7:00 am

    Well the first thing I would change is the URL for jQuery, you don’t need to detect if the server is using SSL as browsers can handle that for you. See the below:

    // Using 2 forward slashes will let the browser know it has to pick the protocol, works in every browser
    wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”, false, null);

    The question I would have though is in your page source what comes first? jQuery or the plugins?

    # December 21, 2012 at 3:45 am

    When doing a “view page source” the two scripts I am doing are first. However its just showing the header/index/footer in the correct order. I am calling the jquery library through the functions file. When looking at the resources through chrome tools, it shows the main jquery library along with the other scripts.

    Rob
    # December 21, 2012 at 4:28 am

    I would set your other scripts to enqueue, and give them a reliance on jquery.



    //$deps = dependencies. ie "jquery" - you can use an array if more than one array('jquery', 'anotherScript');

    < ?php wp_enqueue_scripts ( $handle, $src, $deps, $ver, $in_footer ); ?>

    Also make sure you are opening your jQuery scripts with



    jQuery(function($) {

    // Your jQuery can now use $ as the default shortcut. WordPress by default doesn't see the $ as jQuery's.

    });

    OH and just to make sure you know – you should wrap the enqueue in a function and then call it with a hook. And put it in your functions.php file :)

    Like



    function my_scripts()
    {

    wp_enqueue_scripts ( $handle, $src, $deps, $ver, $in_footer );

    }

    add_action('wp_enqueue_scripts', 'my_scripts');

    EDIT:

    Just saw your first code block, so you did that – sorry about the sucking eggs thing :D

    I would just add your other scripts into that :D

    # December 21, 2012 at 9:56 pm

    I hate to just ask for the answer, but how would I? I found that script on digging into WP. I would imagine I would have to enqueue the other 2 scripts after? so like…

    wp_enqueue_script(‘js/myscript’);

    ?

    Rob
    # December 22, 2012 at 3:19 am

    Well you just do it like this :D


    wp_register_script('myscript', TEMPLATEPATH . '/assets/js/myscripts.js', array('jquery'));

    wp_enqueue_script('myscript');

    TEMPLATEPATH is a constant to your template folder

    And just add that in the function that is triggered by the hook, like you have above.

    You don’t actually have to use the register – you can put all the info into enqueue and it will work fine.


    wp_enqueue_script('myscript', TEMPLATEPATH . '/assets/js/myscripts.js', array('jquery'));
    # December 22, 2012 at 5:08 am

    It is really bad practice to remove the default jQuery bundled with WP.

    Someone already mentioned you should never paste scripts in the head, always register and enqueue them.

    Also, someone else mentioned you only need to enqueue them and not register, but best practice is to do both.

    The most informative piece of information I have enqueuing scripts would be this article -> http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes/

    # December 24, 2012 at 9:02 pm

    So I tried both of these ways. They both worked in the fact that the js files are being loaded into the resources but won’t do as intended. Do I have to somehow hook them into the page again? I’m using a custom scroll bar and while it works on my mock build outside of WP, no go here.

    Edit: Actually I think I can get this working. There was a piece of script I was missing that tells the bar what object to attach to.

    # December 25, 2012 at 5:15 pm

    /*
    * Calls Jquery
    */
    if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11);
    function my_jquery_enqueue() {
    wp_deregister_script(‘jquery’);
    wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”, false, null);
    wp_enqueue_script(‘jquery’);
    }

    if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_ui_enqueue”, 11);
    function my_jquery_ui_enqueue() {
    wp_deregister_script(‘jqueryui’);
    wp_register_script(‘jqueryui’, “//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”, false, null);
    wp_enqueue_script(‘jqueryui’);
    }
    // Let’s hook in our function with the javascript files with the wp_enqueue_scripts hook

    add_action( ‘wp_enqueue_scripts’, ‘load_javascript_files’ );

    // Register some javascript files, because we love javascript files. Enqueue a couple as well

    function load_javascript_files() {

    wp_register_script( ‘scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true );
    wp_register_script( ‘mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true );

    wp_enqueue_script( ‘scroll-bar’ );
    wp_enqueue_script(‘mouse-scroll’);

    }

    That is all in the functions file. Figured I would just do a follow through incase anyone else may of searched for this same issue. All is now working correctly. Thank you guys for the help!

    # December 25, 2012 at 9:18 pm

    Also anyone who reads this may as well also know that loading a different version of jQuery or jQuery UI is generally a bad idea, especially for themes which are to be distributed or client sites.

    The reason is you are loading in a “specific” version of jQuery… in this example 1.8. An example of why this is bad is WordPress is currently using 1.8.3, what if a plugin developer utilized a new feature in 1.8.3? Well that plugin won’t work correctly because you changed the version of jQuery that they expected to be built into WP.

    This problem gets much worse when lets say you do the above on a clients site who has aged 2 years, they go and get a plugin and it doesn’t work because WP is now using version 2.3 (or whatever) and that is what the plugin was made for. They can’t do something because you hardcoded in 1.8 in the functions.php.

    It can be argued this is ok for a personal site, or a site you actively maintain, but it is still bad practice.

    The above example uses (!is_admin) which is a check to make sure you are not in the back-end admin of WP, well wp_enqueue_scripts is only for the front-end anyway, so it is uneccessary to add that.

    The function name “load_javascript_files” is way too generic and is a bad name for a function, using a prefix like “THEMENAME” or “DEVELOPESRINITIALS” to prefix the function is a much better idea.

    So to anyone who is just getting use to things, the snippet above is a bad example of how to load some JS files. :/

    # December 26, 2012 at 12:27 am

    Went through looking for the best ways to load it and this seemed to be it. Not sure what else you would do.

    # December 26, 2012 at 1:15 pm

    function themename_script_manager() {

    // wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script(‘themename-scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true, true);
    wp_register_script(‘themename-mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true, true);

    // enqueue the scripts/styles for use in theme

    // built in scripts (loaded in WP)
    wp_enqueue_script (‘jquery-ui-core’); // UI base core, you need to load needed components individually
    wp_enqueue_script (‘jquery-ui-mouse’); // UI core component – codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress

    // custom scripts (added)
    wp_enqueue_script(‘themename-scroll-bar’);
    wp_enqueue_script(‘themename-mouse-scroll’);

    // example of conditionally loading scripts, only load them where they are needed
    if ( is_front_page() ) {

    }

    }
    add_action(‘wp_enqueue_scripts’, ‘themename_script_manager’);

    Something like this looks a little cleaner. It is just an example, I didn’t want to figure out what components are needed from the jQuery UI, but they are all bundled with the latest version of WP already, so you only need to enqueue them (no registering).

    I added a conditional tag as an example, like if you had a slider on your front page you could just enqueue the script (and styles) so they are only loaded on the front page to keep the site optimized for speed.

    Just fyi, “wp_enqueue_scripts” can also handle style sheets that need to be loaded.

    wp_register_style(‘flexslider-css’, get_stylesheet_directory_uri() . ‘/flexslider/flexslider.css’);

    if ( is_front_page() ) {

    wp_enqueue_style (‘themename-flexslider-css’);

    }

    The “get_stylesheet_directory_uri()” is for child themes, just another example.

    # January 5, 2013 at 6:37 pm

    Okay sorry it took so long to get back to you. Been a rough week. You enqueue the jquery ui, but I dont see the command to load normal jquery. This is what I have right now.

    function portfolio_script_manager() {

    // wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script(‘portfolio-scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true, true);
    wp_register_script(‘portfolio-mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true, true);
    wp_register_script(‘portfolio-sticky’, get_template_directory_uri() . ‘/js/jquery.sticky.js’, array(‘jquery’), true, true);

    // enqueue the scripts/styles for use in theme

    // built in scripts (loaded in WP)
    wp_enqueue_script (‘jquery’);
    wp_enqueue_script (‘jquery-ui-core’); // UI base core, you need to load needed components individually
    wp_enqueue_script (‘jquery-ui-mouse’); // UI core component – codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress
    wp_enqueue_script (‘jquery-ui-draggable’);

    // custom scripts (added)
    wp_enqueue_script(‘portfolio-scroll-bar’);
    wp_enqueue_script(‘portfolio-mouse-scroll’);
    wp_enqueue_script(‘portfolio-sticky’);

    } add_action(‘wp_enqueue_scripts’, ‘portfolio_script_manager’);

    Edited: Sorry so many edits if anyone is seeing this thread. It is working now! I had an issue in the header that used a different method of calling the jquery that caused them. Reworked it to work. Thanks a lot man.

    I guess the only other question I have would be, is it better to just use the wp jquery/ui or would it be better to first try google cdn, and if it is not already loaded then use them.

    Edit 2:

    Okay. So after I signed out of wp-admin area, the sticky started working. However anytime I roll over my custom scrollbars, The error ” Uncaught TypeError: Object # has no method ‘easeOutCirc’ ” comes up.

    Also, if I reload the page, everything stops working. I have to exit it and re enter the url. Is this a issue being on a local host?

    # January 5, 2013 at 8:52 pm

    I can not get it working with your method. It only happens every other reload or clearing of the cache. With the following code, it works perfect the first try and every try after… So Not sure whats going on.

    if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11);
    function my_jquery_enqueue() {
    wp_deregister_script(‘jquery’);
    wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”, false, null);
    wp_enqueue_script(‘jquery’);
    }

    if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_ui_enqueue”, 11);
    function my_jquery_ui_enqueue() {
    wp_deregister_script(‘jqueryui’);
    wp_register_script(‘jqueryui’, “//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”, false, null);
    wp_enqueue_script(‘jqueryui’);
    }

    function portfolio_script_manager() {

    // wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script(‘portfolio-scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true, true);
    wp_register_script(‘portfolio-mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true, true);
    wp_register_script(‘portfolio-sticky’, get_template_directory_uri() . ‘/js/jquery.sticky.js’, array(‘jquery’), true, true);

    // custom scripts (added)
    wp_enqueue_script(‘portfolio-scroll-bar’);
    wp_enqueue_script(‘portfolio-mouse-scroll’);
    wp_enqueue_script(‘portfolio-sticky’);

    }
    add_action(‘wp_enqueue_scripts’, ‘portfolio_script_manager’);

    It’s just every time I try to enqueue jquery and the UI from inside the function using the other method, nothing really works. It will show in my resources that they are loaded, but doesn’t do much past that.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".