3

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
  • 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, 2012 at 17:41
  • I've made the changes
    – Jes
    Dec 15, 2012 at 17:56

2 Answers 2

6

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.

6
  • alright ok I will see what other scripts needed
    – Jes
    Dec 15, 2012 at 17:58
  • After I post that you change your code in question. Please try setup tabs only with markup from link in answer. Dec 15, 2012 at 17:58
  • 1
    Remember to vote up good answers :) Dec 15, 2012 at 18:03
  • It requires rep of 15 points sorry I wish I could
    – Jes
    Dec 15, 2012 at 18:07
  • I added the script you gave using an echo statement now the only issue is the other two scripts, how can I add them and be compliant where it won't break any other plugins or themes.
    – Jes
    Dec 15, 2012 at 18:30
0
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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.