Using tabs for wordpress plugin

3 Views

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

Read More

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 -->
Post Views: 3

Related posts

Leave a Reply

2 comments

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

  2. function load_my_plugin_scripts( $hook ) {
// Load only on ?page=ticket-dashboard
if( $hook != 'toplevel_page_ticket-dashboard' ) {
 return;
}
// Load style & scripts.
wp_enqueue_script( 'tickets_script', get_template_directory_uri().'/js/tickets.js', array('jquery-ui-tabs'), '1.1' ); // Need to add dependency on Array so your custom js will load once jquery-ui-tabs loads, here I have added js in theme file you can use plugin path if you have added js in plugin file
wp_enqueue_script( 'tickets_script' );
wp_enqueue_script('jquery-ui-tabs'); } add_action( 'admin_enqueue_scripts', 'load_my_plugin_scripts' );

    Hope this helps!

    Thanks!