WordPress Sub Menu Options Page with Tabs

I have not been able to find a suitable answer on the web for what I am trying to do. I have created a custom post type “donation” and under that, have a submenu of “settings”. I want the settings page to use tabs for different things to keep it simple.

Here is what I have:

<?php
function sg_settings_setup()
{
    add_submenu_page('edit.php?post_type=donation', 'Settings', 'Settings', 'manage_options', 'sg-settings', 'sg_settings_page');
}

function sg_settings_page()
{
?>

      <div class="wrap">
        <h1>Main Title</h1>

        <?php
    settings_errors();
?>

        <?php
    $active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'general-settings';
?>

        <h2 class="nav-tab-wrapper">
          <a href="?page=sg-settings&tab=general-settings" class="nav-tab <?php
    echo $active_tab == 'general-settings' ? 'nav-tab-active' : '';
?>">General Settings</a>
          <a href="?page=sg-settings&tab=email-settings" class="nav-tab <?php
    echo $active_tab == 'email-settings' ? 'nav-tab-active' : '';
?>">Email Settings</a>
          <a href="?page=sg-settings&tab=stripe-settings" class="nav-tab <?php
    echo $active_tab == 'stripe-settings' ? 'nav-tab-active' : '';
?>">API Settings</a>
        </h2>

        <form method="post" action="options.php">
          <?php
    settings_fields('sg_api_settings');
?>
         <?php
    do_settings_sections('sg_api_settings');
?>
         <?php
    submit_button();
?>
       </form>
      </div>
    <?php
}
?>  

When I click on a tab, I get the error message “Sorry, you are not allowed to access this page.” I can see in the address bar that the URL is being rewritten where it no longer has “edit.php?post_type=donation” in the URL. I tried adding this to the links for the tabs, but it gets edited out by WordPress.

I can make this work if the settings page is a menu_page, but the URL somehow needs to be rewritten for submenu_page. Hopefully someone else has run into this and knows a quick fix!

Answer

Well, I couldn’t find a way to make this work using the WordPress API, I know for example WooCommerce is able to make this work, but since no one replied to my question, I decided to use jQuery instead. Using the built in WordPress classes it is easy to style it for a native WordPress look.

Wrap the tab links in <h2 class="nav-tab-wrapper">

Give each tab link a class of nav-tab

Make sure “active” tabs have a class of nav-tab-active

I created this simple jQuery function:

$('#tabs .tab-content').hide();
$('#tabs .tab-content:first').show();
$('.nav-tab-wrapper a:first').addClass('nav-tab-active');

$(".nav-tab-wrapper").on("click", ".nav-tab", function(e) {
  e.preventDefault();

  $(".nav-tab a").removeClass("nav-tab-active");
  $(".tab-content").hide();
  $(this).addClass("nav-tab-active");
  $($(this).attr("href")).show();
});

And here is some sample HTML:

<div id="tabs">
  <h2 class="nav-tab-wrapper">
    <a href="#tab-1" class="nav-tab">One Time Donation</a>
    <a href="#tab-2" class="nav-tab">Recurring Donation</a>
    <a href="#tab-3" class="nav-tab">My Account</a>
  </h2>

  <div id="tab-1" class="tab-content">
    tab 1 content
  </div>
  <div id="tab-2" class="tab-content">
    tab 2 content
  </div>
  <div id="tab-3" class="tab-content">
    tab 3 content
  </div>
</div>

I wrapped my html in <div id="tabs"> but this is not required.