Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
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
add comment

5 Answers

up vote 21 down vote accepted

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");
share|improve this answer
add comment

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.

share|improve this answer
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
add comment

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

share|improve this answer
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
add comment

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.

share|improve this answer
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
add comment

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() {
    if( ! is_admin() ) {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
    }
}
add_action('init', 'my_add_frontend_scripts');
share|improve this answer
3  
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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