Skip to main content
Start selling

Tabs Navigation

If you are worried about cluttering the WordPress admin menu, you can easily change the default navigation by implementing navigational tabs at the top of your plugin settings page.

This is especially relevant when:

  • Your plugin settings page is a submenu. e.g. Under the top-level Settings (options-general.php) WordPress menu item.
  • You have multiple submenus for your plugin's parent menu item.

By default, Freemius pages are added as submenus under the plugin settings menu and if you have multiple active plugins with similar sub-pages then the menu could quickly become very unsightly.

How to Enable Tabs​

To displays Freemius SDK pages as tabs instead of menu items, manually configure your plugin generated SDK code snippet to add 'navigation' => 'tabs', to the configuration array.

This requires manual addition as the setting isn't automatically added when the SDK integration snippet is generated.

Important Note

Whenever your SDK integration code snippet is updated, add this change to the new snippet to ensure the tabs navigation remains enabled.

Adding a Custom Tab​

Using a little custom HTML, you can blend your plugin settings pages in with the Freemius tabs with a custom tab

For the tabs to work correctly you need to make sure your plugin settings are contained in a div.wrap element, which is considered standard practice.

  1. Start by modifying your existing plugin settings markup to include the following HTML.

    <div class="wrap">
      <h2 class="nav-tab-wrapper">
        <!-- Replace the # placeholder link with a full link to your plugin settings page. -->
        <a href="#" class="nav-tab nav-tab-active">Settings</a>
      </h2>
      <!-- Plugin settings go here -->
    </div>

  2. Some flexibility is needed to fit the tabs with your own styling. Add fs-section fs-full-size-wrapper classes to the div.wrap element to help blend in with Freemius tabs.

    <div class="wrap fs-section fs-full-size-wrapper">
      <h2 class="nav-tab-wrapper">
        <a href="#" class="nav-tab fs-tab nav-tab-active home">Settings</a>
      </h2>
      <!-- Plugin settings go here -->
    </div>

The final code snippet should look something like this:

<div class="wrap fs-section fs-full-size-wrapper">
  <h2 class="nav-tab-wrapper">
    <a href="#" class="nav-tab fs-tab nav-tab-active home">Settings</a>
  </h2>
  <!-- Plugin settings go here -->
</div>

Behavior of Tabs Navigation​

When the tabs navigation is enabled, the following behavior is observed:

  • No submenu is displayed for the main plugin settings page.

  • When you click on a Freemius tab (e.g. Contact Us) a submenu item is displayed under the plugin settings menu to indicate which tab is currently visible.

  • You might occasionally see a slight 'blip' when the tabs are rendered depending on the size and complexity of your plugin settings page.

    The custom tab is rendered immediately whereas the Freemius tabs are added via JavaScript a few milliseconds later.

    This is not normally an issue but if it's noticeable then you can try hiding the tabs initially with CSS, and displaying via JavaScript once the Freemius tabs have finished loading.

Adding a Custom Tab Via JavaScript​

It's also possible to add a custom tab purely via JavaScript instead of HTML which has some inherent advantages, namely, it avoids the 'blip' issue completely.

Here's an example snippet to add a custom tab via JavaScript:

jQuery(document).ready(function ($) {
  // Add the `fs-section fs-full-size-wrapper` to `div.wrap` classes to blend in with Freemius tabs
  // add a 'Settings' tab via JS
  const navTabWrapper = $('.nav-tab-wrapper');
  const currentTabs = $('.nav-tab-wrapper a');
  let activeTab = '';
  if (!currentTabs.hasClass('nav-tab-active')) {
    activeTab = ' nav-tab-active';
  }
  navTabWrapper.prepend(
    // Replace the # placeholder link with a full link to your plugin settings page.
    '<a href="#" class="nav-tab fs-tab svg-flags-lite home' +
      activeTab +
      '">Settings</a>'
  );
});

The JavaScript code should be enqueued to run in the page footer to ensure it runs after the Freemius tabs JavaScript. Restrict the code to run only on the plugin settings page and Freemius pages (Account, Contact Us, Upgrade).

tip

Use the Freemius Menu Slugs plugin to find the menu slugs.

Clearing the Freemius Cache​

When editing custom tab code you might occasionally come across your tab changes not being updated as expected for core Freemius tab pages (Account, Contact Us, Upgrade, etc.).

This is usually due to Freemius caching the page markup. To solve this simply clear the cache via the Freemius debugging admin page.

On this page: