How do I use jQuery UI using Wordpress?


Staff member
I am trying to get the jQuery UI Dialog to work with WordPress. I saw this post(<a href="">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:

function frontporch_enqueue_scripts() {
        if (!is_admin() ) {
            wp_enqueue_script( 'jquery' );
            wp_register_script( 'google-jquery-ui', '', 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', '', 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:

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

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

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

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

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