24

I've been trying to include the jquery ui effects (more specifically the shake effect) on my wordpress theme. So far, I've only been able to include the jQuery script, but I really have no clue where to place the ui scripts and how to enqueue them.

This is the code I have. It obviously doesnt work:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

Thanks for your help!

  • 5
    One note: you shouldn't need to enqueue jquery, because its already listed as a dependency of jquery-ui-core. – goldenapples Jan 19 '11 at 0:14
35

While WordPress does include the jQuery UI libraries, it does not include the UI/Effects library. That library is separate and standalone. You'll need to include a copy of the effects.core.js file and enqueue it separately.

Note that you should name it jquery-effects-core when en-queuing it, for naming consistency.

You can include it like this:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

Edit: This answer was written before WordPress 3.3, which now includes the various effects libraries as part of core. You can simply enqueue the pieces of the effects library that you need to use now.

The list of slugs for these files can be found in wp-includes/script-loader.php, but the core's slug is jquery-effects-core.

wp_enqueue_script("jquery-effects-core");
  • 1
    Be aware that for an actual effect (blind, bounce, fade, ..) you have to enqueue that effect explicitly. Like for 'fade': wp_enqueue_script( 'jquery-effects-fade' ); – SunnyRed Feb 10 '17 at 17:45
  • The user should be placing their own Javascript into a separate file and then enqueueing that file and listing the dependencies it needs. That way, WordPress (and performance plugins) know the order required to load these scripts and will place them in the correct order on the page. – Dave Hilditch Apr 27 '17 at 7:26
8

@dabito,

You're not loading your scripts right ... Don't call wp_enqueue_script() inside your theme template file (this looks like it's header.php). You need to call this function from a separate hook.

In your theme's functions.php file, place the following code:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

If both scripts are properly registered, this should load them just fine (by adding the appropriate <script /> tags in the header. Then your other JavaScript code should work.

If you want to add scripts to the admin side of things, add your action to admin_enqueue_scripts instead.

  • 1
    Not exactly true. As long as he's calling them before the wp_head() call, that should work fine. They don't have to be hooked, and they shouldn't be hooked to init anyway. If you're going to hook them somewhere, hook them to the 'wp_enqueue_scripts' action hook. That's what it's there for. – Otto Jan 19 '11 at 1:47
  • 1
    @Otto What you said sounds logical. But do you have an explanation why in the codex it says what @EAMann wrote - "Use the init action to call this function."? And his example is taken from there... codex.wordpress.org/Function_Reference/wp_enqueue_script – Lea Cohen Feb 14 '11 at 6:49
  • The codex is haphazard in places. The best action to use for this is 'wp_enqueue_scripts' for the front end, or 'admin_enqueue_scripts' on the back end. Hooking to init will work, but it will needlessly enqueue the script over the entire site. – Otto Feb 14 '11 at 20:54
  • I've updated my code snippet accordingly. It was originally a quick, gut reaction based on the Codex reference ... using wp_enqueue_scripts is definitely the better way to go and avoids requiring an extra is_admin() check. – EAMann Feb 14 '11 at 21:45
  • This is also the wrong way - performance plugins need to know the dependencies. Author should write their own .js file and enqueue that and name the dependencies - WordPress will handle the rest. – Dave Hilditch Apr 27 '17 at 7:27
7

You can also enqueue the whole jQuery UI directly from Google. This is how I do it:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

And since jQuery is listed as a dependency for jQuery UI, you don't need to manually enqueue it. WordPress will do it automatically for you.

  • 2
    You can even load all jQuery libs from the Google CDN instead of your own site. – Jan Fabry Jan 21 '11 at 11:16
  • I would highly discourage from loading scripts from foreign sources. I did that quite a long time and it (rarely) happened that the host was down, so multiple customers had problems with their pages at once. – Julian F. Weinert May 24 '14 at 22:32
  • @JulianF.Weinert it's a double edged sword, with a good cdn means lower latency but lack of control if it fails. That said, if the Google cdn goes down half the Internet will fail so yours will not be the only one. The chances it will be down and not cached on a users browser is slim though. For most situations using a cdn is a benefit. – Alex Jul 10 '16 at 19:54
  • True. I wasn't talking about a full blown CDN, which, of course, would be absolutely fine here, since it's designed for exactly that usage. Loading scripts from any john-doe.com ist a bit risky though, I think – Julian F. Weinert Jul 10 '16 at 21:22
3

There doesn't appear to be a default load for this jQuery library (full list here) so you'll likely have to register the script before you enqueue it.

  • 1
    I thought you might be right (sometimes the names WP registers scripts under are different than the standard names used) but in this case registering 'jquery-ui-core' should work. Its listed in core.trac.wordpress.org/browser/branches/3.0/wp-includes/… – goldenapples Jan 19 '11 at 0:05
  • Good point! I assumed he wanted to load only that jQuery library, in which case loading the rest would be a bit bloaty. – editor Jan 19 '11 at 0:18
3

Just a little tips. When you enqueue your script, it enqueues for the whole site including admin panel. If you don't want the script in the admin panel, you can only include them for the site in frontend.

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
  • 4
    You shouldn't use the init hook to do enqueueing. Use the wp_enqueue_scripts hook for the front end only or the admin_enqueue_scripts hook for the back end. – Otto Aug 24 '11 at 16:48
  • Didn't know that wp_enqueue_scripts action is only for front end. Thanks :) – Tareq Aug 24 '11 at 18:31
0

All the answers here, whilst they work, are technically wrong.

The correct way to include jquery-ui and other libraries is to include them as dependencies of your own script.

This is important, because performance tools may check these dependencies to alter the loading order of your scripts to optimise the site.

So, if you want to use jquery and jquery-ui, create your own .js script file and enqueue it like this, with dependencies listed - no need for a separate enqueue command for each library you're using:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

You can find a list of all the available scripts to add as dependencies here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

  • 1
    You have it right. Using dependencies in your own wp_enqueue_script calls is correct way to include jquery/jquery-ui/etc. Theres no need to enqueue them separately. – Michae Pavlos Michael May 8 '17 at 11:58
  • And if you enqueue them separately when your script depends on them, your script may/will break on sites that optimise performance - e.g. if scripts are combined into one script to speed up loading, or if they are deferred or minimized (depends on minifcation but the order can change). If you haven't told WordPress that your script depends on other scripts, you cannot guarantee the order in which they will load. – Dave Hilditch May 10 '17 at 11:19

protected by Community May 8 '17 at 13:49

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.