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.

Done my research and found this is how to call the built-in ui tabs jquery script in wp for the admin area but I'm stuck on implementing the other jquery scripts needed that I believe are built into wp. I know how to add the css and just added html, I just don't want to cause any problems with other existing plugins so I want to add these scripts below properly that are required.

http://code.jquery.com/jquery-1.8.3.js

http://code.jquery.com/ui/1.9.2/jquery-ui.js

Here is what I'm going to use for javascript (again how to add the scripts above?):

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

function mypluginjs() {
echo '<script>
jQuery(function() {
    jQuery( "#tabs" ).tabs();
});
</script>';
}
add_action( 'admin_enqueue_scripts', 'mypluginjs' );

Here is what I got so far for html:

<div class="wrap">
  <h2>My plugin</h2>
  <form method="post" action="options.php">
  <?php settings_fields('my_plugin_options'); ?>
  <?php $options = get_option('my-plugin'); ?>

  <div id="tabs">
  <ul>
  <li><a href="#tabs-1">First</a></li>
  <li><a href="#tabs-2">Second</a></li>
  <li><a href="#tabs-3">Third</a></li>
  </ul>

  <table class="form-table">

  <div id="tabs-1"> options tr/td go here </div>
  <div id="tabs-2"> options tr/td go here </div>
  <div id="tabs-3"> options tr/td go here </div>

  <p class="submit">
   <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
  </p>
  </table>
  </form>
   </div> <!--- wrap end --> 
share|improve this question
    
Please post the code you've tried and any other information you can provide. This question is pretty light on detail. –  s_ha_dum Dec 15 '12 at 17:41
    
I've made the changes –  Jes Dec 15 '12 at 17:56
add comment

1 Answer

up vote 6 down vote accepted

If there is problem only with html markup you should check example from official jQuery UI site here: http://jqueryui.com/tabs/

It looks like yours, but for work you must check if your site include stuff like jquery and jquery ui script, jquery css is important too. After that you should have script with:

$( "#tabs" ).tabs();

And everything should work fine. If you think that everything is ok with setup and you don't see any results you should check your browser console for more information about errors from javascript engine.

share|improve this answer
    
alright ok I will see what other scripts needed –  Jes Dec 15 '12 at 17:58
    
After I post that you change your code in question. Please try setup tabs only with markup from link in answer. –  Maciej Płusa Dec 15 '12 at 17:58
    
ok thanks the link has the core jquery called –  Jes Dec 15 '12 at 18:00
1  
Remember to vote up good answers :) –  Maciej Płusa Dec 15 '12 at 18:03
    
It requires rep of 15 points sorry I wish I could –  Jes Dec 15 '12 at 18:07
show 2 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.