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 am trying to integrate the Jquery UI select menu ("dropdown" Style), in my wordpress site.

But I am not able to do it, in widget area I created a select box and gave it respective ID of that css and jquery, but its not getting loaded with jquery.

Here is my code, which I am using it to achieve:-

The head part:-

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />
    <link rel="Stylesheet" href="<?php echo get_template_directory_uri(); ?>/ui.selectmenu.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ui.selectmenu.js"></script>
    <style type="text/css">
        /*demo styles*/
        select,.ui-select-menu { float: left; margin-right: 10px; font-size: 62.5%;}
        select, .ui-selectmenu { width: 200px; font-size: 62.5%; margin:10px;}
        #cat{font-size: 62.5%;}

    </style>
    <script type="text/javascript">
        JQuery(function(){
            JQuery('select#cat').selectmenu({style:'dropdown'}); 
        });
    </script>
    <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>

The select menu appears with normal css, but the jquery is not working,

I am bad in Jquery, so can any one help, I am using 2011 Theme, and you can check the selet menu on my site http://webstutorial.com/

Edited:

<script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery('select#cat').selectmenu({style:'dropdown'});
}); </script>

share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted

This works for me locally in testing..

add_action('wp_enqueue_scripts','enq_menu_scripts_and_styles');

function enq_menu_scripts_and_styles() {
    // UI Core, loads jQuery as a dependancy
    wp_enqueue_script( 
       'uicore', 
       'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', 
        array('jquery') 
    );

    // UI Theme CSS
    wp_enqueue_style( 'uicss', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css' );

    // Selectmenu JS
    wp_enqueue_script( 'uisel', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.js' );

    // Selectmenu CSS
    wp_enqueue_style( 'uicss2', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.css' );

}

add_action('wp_head','select_menu_test_code');

// Simple test code 
function select_menu_test_code() {
    // Simple no-conflict function
    ?>
    <script type="text/javascript">
    jQuery(function($){
        // You can use $ here
        $('select#cat').selectmenu();
    });
    </script>
    <?php
}

It wouldn't work for me when trying to use ui-core from WordPress, jQuery seems to be ok though. I used the same version of UI with the test code so it's strange that the one included in WordPress didn't work for me(i do have a plugin active that uses ui core, but disabling didn't seem to help at all).

See if my above code works for you, and tweak as necessary if it does.. :)

share|improve this answer
    
no this isn't working for me, I am using 2011 theme, and copied the above function to functions.php file of 2011 theme, now in firebug the css is also not getting loaded Whats wrong? –  ntechi Jul 11 '11 at 9:00
    
Check the source, are the scripts being output correctly into the page? Do you have other plugins active that use jQuery or jQuery UI? –  t31os Jul 11 '11 at 9:52
    
just the style sheets are not getting called, rest the jqueries I am able to see the source code –  ntechi Jul 11 '11 at 10:19
    
I also included the style sheets in header, now the style sheets are also loaded in source code, but then too, the ui is not displayed –  ntechi Jul 11 '11 at 10:24
    
I found the plugin which is having conflict with the ui, but when I deactivate, the select box is not functioning fine, I cant explain abt its behaviour, you check on my site, in widget area webstutorial.com –  ntechi Jul 11 '11 at 10:42
show 3 more comments

Try using jQuery instead of JQuery

share|improve this answer
    
I tried but no change, Check my question for the edited part –  ntechi Jul 10 '11 at 4:53
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.