How to correctly include jquery-ui effects on wordpress

Question

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!

Solution

It might be possible that the jquery-ui-core included with wordpress does not include Effects. The documentation is unclear(http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress) You might have to load a custom jquery-ui package from a url. Below will load full jquery UI from google cdn

<?php wp_enqueue_script("myUi","https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"); ?>

You can also use the wp_enqueue_script($name, $src) function to load your own scripts.

Comments

[Zach Lysobey]

It definitely does not include Effects: "jQuery UI Effects is NOT included with the jquery-ui-core"