How to correctly include jquery-ui effects on wordpress

3 Views

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:

Read More
    <?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!

Post Views: 3

Related posts

Leave a Reply

1 comment

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