How do I use jQuery UI using Wordpress?

admin

Administrator
Staff member
I am trying to get the jQuery UI Dialog to work with WordPress. I saw this post(<a href="https://stackoverflow.com/questions/5790820/using-jquery-ui-dialog-in-wordpress">Using jQuery UI dialog in Wordpress</a>) and I attempted the solution but it is not working for me. In case it matters, I am using a child theme based on the twentyeleven theme.

I put this directly in front of the wp_head() function in php:

Code:
function frontporch_enqueue_scripts() {
        if (!is_admin() ) {
            wp_enqueue_script( 'jquery' );
            wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
            wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
            wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true); 
            wp_enqueue_style( 'jquery-style' );
            wp_enqueue_script( 'google-jquery-ui' );
            wp_enqueue_script( 'jquery-template' );
        }       
    }   
    add_action( 'init', 'frontporch_enqueue_scripts' );

<em>I noticed that the twentyeleven theme or the child theme doesn't actually have that third script(template.js), but I don't think that is causing the problem.</em>

Then I added this at the bottom of the HEAD tag:

Code:
&lt;script type="text/javascript"&gt;
$( "#markte_area" ).dialog({
    autoOpen: false,    
});

jQuery(document).ready(function($){
    jQuery( "#markte_link" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    }); 
}); //end document ready
&lt;/script&gt;

I get the following error in the Error Console when I load the page:

<blockquote>
<strong>Error: $ is not a function</strong>
</blockquote>

The page where this is occurring is <a href="http://www.dynamicpalette.com/esprit/" rel="nofollow noreferrer">here</a> if that will help you diagnose the problem. Thanks for any help!