WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Please pardon me if this question is totally unrelated in itself, but I'll do my best to point out the issue I am having and what I would like to achieve.

Scenario: I have a custom theme option's panel, that uses custom-made tabs.
Goal: Whenever the user saves the panel's options, the page and the panel's tabs should stay just like they are (i.e. no reloading and no taking-the-user-back to initial tab). I am almost completely certain that this is AJAX-related, thus the title.

This is the PHP code of my panel: http://pastie.org/3102112

This is the JS that makes the tabs works (for the sake of this example, as the tabs themselves work flawlessly):

$('div#options_tabs div.block').hide();
$('ul.options_tabs li:first').addClass('active').show();
$('div#options_tabs div.block:first').show();

$('ul.options_tabs li').click(function() {

    $('ul.options_tabs li').removeClass('active');
    $('div#options_tabs div.block').fadeOut(100);

    var activeTab = $(this).find('a').attr('href');
    return false;

And finally, my attempt at AJAXing the tabs and the way my panel is saved (note that I am really clueless as to what should be placed within the AJAX action; and I also feel I might be completely off-track, as my panel uses the WordPress built-in register_settings method):

(function ($) {

inlineEditOption = {
    init: function () {
        $('.save-options', '#the-theme-options').live('click', function () {
            return false;

    save_options: function (e) {
      var d = {
        action: "options.php"
      b = $(':input').serialize();
      d = b + "&" + $.param(d);
      $.post(ajaxurl, d, function (r) {
        if (r != -1) {
          $('.ajax-message').ajaxMessage('<div class="message"><span>&nbsp;</span>Theme Options were saved</div>');
        } else {
          $('.ajax-message').ajaxMessage('<div class="message warning"><span>&nbsp;</span>Theme Options could not be saved</div>');
      return false;


Anyhow, I hope I was clear enough; if I forgot something please let me know!
Thank you all in advance,

share|improve this question
up vote 0 down vote accepted

WordPress already provides a very nice API for admin / option page tabs. No need to reinvent the wheel on that one.

Your Ajax action is "options.php" You need an action that's linked to a PHP function that gets included by add_action( 'wp_ajax_YOUR-ACTION-NAME*', 'your_php_function');

* YOUR-ACTION-NAME is the action you defined when localizing the script

Take a look at Chip Bennet's very detailed tutorial on the Settings API. It covers just about everything including tabs.

There is also a lot of great information here-> on WordPress Ajax.

share|improve this answer
Hey Chris, thanks a ton - I have no idea how I hadn't seen that tutorial. However, in my case I cannot turn all my panel back and start with the tutorial from scratch. The code I am showing above is a tiny excerpt of a highly customized panel. Thus, I would simply like to adapt my current tabular-system to one that support AJAX. Is that possible? – cr0z3r Jan 1 '12 at 15:36

Your Answer


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.