Using tabs for wordpress plugin

by

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 -->

2 Answers
2

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.

Leave a Comment