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 create tabs for admin settings page in wp, but I think I'm doing it wrong. The example below shows how I did it but I don't know how to change this to use it correctly with no conflict ie. $.

function my_plugin_load_js() {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://code.jquery.com/jquery-1.8.3.js');
wp_enqueue_script('jquery');

wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'http://code.jquery.com/ui/1.9.2/jquery-ui.js');
wp_enqueue_script('jquery-ui-core');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

function mypluginjs() {
echo '<script type="text/javascript">
jQuery(function() {
   jQuery( "#tabs" ).tabs();
});
</script>';
}
add_action( 'admin_print_scripts', 'mypluginjs' );
share|improve this question
add comment

1 Answer

up vote 7 down vote accepted

Never de-register core-bundled scripts in the WP-Admin. You shouldn't do it on the front end, either, unless you really, really know what you're doing. But especially in the WP-Admin, just use the core-bundled scripts.

Also, when you use core-bundled jQuery UI, WordPress already knows that jQuery is a dependency.

Just change the first callback to this:

function my_plugin_load_js() {
    wp_enqueue_script('jquery-ui-core');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

Note: you should be using a plugin-specific hook here, to enqueue only on your own Plugin's admin page, rather than enqueueing in the entire WP-Admin.

Also, for jQuery UI Tabs, you'll need to enqueue the jquery-ui-tabs script. Core registers it with all its needed deps, so you can just enqueue it directly:

function my_plugin_load_js() {
    wp_enqueue_script('jquery-ui-tabs');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

For the second, just properly wrap the script in no-conflict wrappers:

function mypluginjs() {
    ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
   jQuery( "#tabs" ).tabs();
});
</script>
    <?php
}
add_action( 'admin_print_scripts', 'mypluginjs' );
share|improve this answer
    
+1, with the caveat that if developer wants to use a CDN-hosted jQuery / jQuery-UI, there's a plugin that will do that safely (i.e. using the same versions as those bundled with WordPress): Use Google Libraries –  webaware Dec 16 '12 at 2:28
1  
I disagree. Core scripts should never be overridden in the WP-Admin (except for extremely rare edge cases). Reference this Trac ticket, as well. –  Chip Bennett Dec 16 '12 at 2:33
    
Sure, never except... per Ipstenu in that thread. Sounds good, "except". But I'm not fighting to stop the intent of that Trac, merely pointing out that if developer wants to use a CDN then there is a safe option. Let's see how that Trac discussion plays out. –  webaware Dec 16 '12 at 2:45
    
Do I need to register the scripts (register_settings)? –  Jes Dec 16 '12 at 2:47
    
Also for the second one shouldn't I echo out the javascript instead of using php tags inside if the function? –  Jes Dec 16 '12 at 2:49
show 6 more comments

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.