29

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!

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

6 Answers 6

Reset to default
41

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");
Improve this answer
2
  • 2
    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, 2017 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, 2017 at 7:26
9

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.

Improve this answer
4
  • 3
    You can even load all jQuery libs from the Google CDN instead of your own site.
    – Jan Fabry
    Jan 21, 2011 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, 2014 at 22:32
  • 1
    @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, 2016 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, 2016 at 21:22
9

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

Improve this answer
5
  • 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, 2011 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, 2011 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, 2011 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, 2011 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, 2017 at 7:27
4

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');
Improve this answer
3
  • 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, 2011 at 16:48
  • Didn't know that wp_enqueue_scripts action is only for front end. Thanks :)
    – Tareq
    Aug 24, 2011 at 18:31
  • Perfect, thank you!
    – Dragi Postolovski
    Jul 23, 2021 at 21:12
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.

Improve this answer
2
  • 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, 2011 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, 2011 at 0:18
2

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/

Improve this answer
2
  • 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, 2017 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, 2017 at 11:19

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