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.



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

function my_plugin_load_js() {
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

function mypluginjs() {
echo '<script>
jQuery(function() {
    jQuery( "#tabs" ).tabs();
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">
  <li><a href="#tabs-1">First</a></li>
  <li><a href="#tabs-2">Second</a></li>
  <li><a href="#tabs-3">Third</a></li>

  <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') ?>" />
   </div> <!--- wrap end --> 
  • 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

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.

  • 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
  • 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
  • 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 '12 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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