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,


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.

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