Tab Ultimate Documentation

1. What you can do with Tab Ultimate

Tab Ultimate turns content into clean, responsive tabs. You build a tab group (a set of tabs) once, then show it on any page with a block, shortcode or widget.

Words used in this manual

• Tab group: one set of tabs (for example "Pricing FAQ"). It has its own ID.
• Tab item (or just tab): one tab in a group, with a title and content.
• Menu: the row (or column) of tab titles that visitors click.
• Panel: the content that shows when a tab is open.

2. Install and activate

Free version

1. In WordPress, go to Plugins → Add New Plugin.
2. Search for Tab Ultimate and click Install Now, then Activate.
3. You will land on Tab Ultimate → Dashboard. You are ready to go.

Installing from a zip file: Plugins → Add New Plugin → Upload Plugin, choose the zip, click Install Now, then Activate.

Pro version Pro

1. Buy Pro and download the Pro zip from your purchase email or your Freemius account.
2. Go to Plugins → Add New Plugin → Upload Plugin, upload the Pro zip and click Install Now.
3. Click Activate. When asked, enter your license key and click Activate License.
4. The free version switches off automatically. Your tab groups and settings stay exactly as they were.
5. Check that it worked: the top bar of the plugin screens shows a Pro badge instead of Free plan.

Tip: If you already use the free plugin, you do not need to uninstall it first.

3. Quick start: your first tabs in 5 minutes

Step 1: Create a tab group. Go to Tab Ultimate → Add New Tab (or click New Tab Group on the dashboard). Type a name in the title box, for example My first tabs. The name is only for you.

In a hurry? Click Start from a ready-made template in the bar above the title. See Templates.

Step 2: Add your tabs. On the Tab Content tab, you will see one tab item. Fill in:

1. Tab Title: the text visitors click.
2. Tab Icon (optional): click Select and pick an icon.
3. Subtitle (optional): a small line under the title.
4. Description: the content. Add text, images (Add Media), videos and shortcodes, just like a normal post.

Click Add Tab Item for each extra tab.

Step 3: Pick a look. Open Tab Settings. Choose a Tab Layout (Horizontal or Vertical) and a Tab Menu Style. Try a few. The Live Preview tab shows the result.

Step 4: Publish. Click Publish on the right.

Step 5: Show it on a page. Copy the shortcode shown under the title (for example [tabsprofree id="123"]), edit any page, and paste it in. Or add the Tab Ultimate block and choose your group. Save the page and view it.

You are done. The rest of this manual explains every option.

4. The dashboard

Open Tab Ultimate → Dashboard. The left menu has four views and a Templates link.

The top bar appears on every plugin screen and links to Dashboard, All Tabs, Add New, Templates and Import / Export.

5. The tab group editor, tab by tab

The editor has a control panel with these tabs: Tab Content, Tab Settings, Design Options, Custom CSS, Pro Features and Live Preview. Above it you will see the title and two copy boxes (Shortcode and PHP Code). Click a box to copy it.

5.1 Tab Content: your tabs

Each tab item is a card. The card header has these buttons, from left to right:

Fields inside a tab

Free users see a greyed "Pro options for this tab" box instead of the four Pro fields. Click it to see upgrade options. Nothing in it is saved.

Click Add Tab Item to add another tab. There is no limit on the number of tabs.

If you have a very large group (about 150 tabs or more) and some tabs do not save, ask your host to raise the PHP setting max_input_vars.

5.2 Tab Settings

Menu styles

Animations

• Free: Fade In, Slide Down, Zoom In, None (Instant).
• Pro adds: Slide Up, Slide From Left, Slide From Right, Flip (vertical axis), Flip (horizontal axis), Rotate In, Scale Down, Bounce In, Blur In.

Scrollable tab menu

1. Set Tab Menu Overflow to Scrollable, with arrows.
2. Publish. When the tabs do not fit, arrows appear at the edges. Visitors can click the arrows, swipe, or use the keyboard.
3. The open tab scrolls into view automatically.

Scrollable menus work on horizontal layouts only.

5.3 Design Options

All colours use a colour picker. Leave a colour empty to use the default.

Tab title settings

Tab content settings

Tab icon settings

5.4 Custom CSS Pro

Add your own CSS to one tab group.

1. Open the Custom CSS tab.
2. Type CSS in the editor (it has colour highlighting).
3. Use %ID% as a placeholder for your group. Example:

%ID% .tptabs-nav li a { letter-spacing: 1px; }
%ID% .tptabs-nav li.active a { border-radius: 999px; }

1. Click Update.

Handy selectors

Only users who can publish unfiltered HTML (normally administrators) can edit Custom CSS. Free users see a locked preview.

5.5 Pro Features tab Pro

Free users see a showcase of Pro features here. Pro users get these settings:

Dynamic tabs (see section 9.1) Behaviour, Layout, Pro colours and Typography (see section 9).

5.6 Live Preview

Open Live Preview to see your real front-end design using what is currently on screen (even before you save). Click Refresh Preview after you change something.

If you see "Error rendering live preview", the message now includes the reason. See Troubleshooting.

5.7 The tab group list

Tab Ultimate → All Tabs shows every group with these columns: title, Items, Shortcode, template/PHP code and date. Hover a row for Edit, Quick Edit, Trash, Duplicate and (Pro) Export JSON.

6. Show your tabs on your site

A tab group must be Published to show for visitors. Drafts are visible only to editors.

6.1 Gutenberg block Free

1. Edit a page or post.
2. Click +, search for Tab Ultimate, and add the block.
3. Choose your group from the list (also available in the right-hand panel).
4. The editor shows a static preview. Click Update.

6.2 Shortcode Free

Paste this anywhere shortcodes work:

[tabsprofree id="123"]

Replace 123 with your group's ID (shown in the shortcode box). The short form [tab_ultimate id="123"] works too.

6.3 Sidebar widget Free

1. Go to Appearance → Widgets.
2. Add the Tab Ultimate widget to a sidebar or footer.
3. Optionally type a Title, choose a Tab group, and save.

Tip: narrow sidebars work best with the Horizontal layout and a Scrollable menu.

6.4 In a theme file Free

<?php echo do_shortcode( '[tabsprofree id="123"]' ); ?>

6.5 Elementor Pro

1. Edit a page with Elementor.
2. Search for Tab Ultimate and drag it onto the page.
3. Choose your tab group in the widget settings.

7. Templates

Templates are ready-made tab groups with sample content. Using one is the fastest way to get a good design.

1. Go to Tab Ultimate → Templates, or click Start from a ready-made template on the Add New screen.
2. Use the category buttons to filter (Business, Support, Education, Events).
3. Click any card to see a large preview.
4. Click Use this template. A draft tab group is created and opens in the editor.
5. Replace the sample text with your own, then Publish.

Free users can preview Pro templates in full size, with an Unlock with Pro button.

8. Duplicate, import and export

Duplicate a tab group Free

1. Go to All Tabs and hover the group.
2. Click Duplicate. A draft copy appears with " (Copy)" in the title.

Duplicate a single tab Free

Click the Duplicate button in the tab's header. The copy appears right below.

Export a tab group Pro

1. Go to Tab Ultimate → Import / Export.
2. Find the group and click Download JSON. (You can also use Export JSON in the All Tabs list.)

The file contains your tabs, settings and Custom CSS.

Import a tab group Pro

1. On the new site, install Tab Ultimate Pro.
2. Go to Tab Ultimate → Import / Export.
3. Choose the JSON file (up to 1 MB) and click Import tab group.
4. A draft group is created. Review it and publish.

Good to know

• Nested groups and image icons are not carried over, because their IDs belong to the old site. Set them again.
• Custom CSS is imported only by users who can publish unfiltered HTML.

9. Pro features, step by step

Open Pro Features in the editor. Each change is saved when you click Publish / Update.

9.1 Dynamic tabs

Builds tabs automatically from your content, so new posts appear without editing the group.

1. In Dynamic tabs, set Build tabs from content to:
2. Posts: one tab per post, or
3. Categories: one tab per category / term.
4. Choose the settings below. Fields appear only when they apply.
5. Publish. The manual tabs in Tab Content are not shown while a dynamic mode is on.

Password-protected and unpublished posts never appear. Editors see a "No results" message if nothing matches.

9.2 Nested tabs

1. First create the inner tab group and publish it.
2. In the outer group, open the tab that should contain it.
3. Choose the inner group in Nested tab group (optional).
4. Publish. The inner group appears below that tab's content.

A group can never contain itself. Nesting is limited to four levels.

9.3 Conditional and scheduled tabs

Open Visibility & schedule inside a tab.

• Times use your site timezone (Settings → General).
• Hidden tabs are removed from the page, so their content is never sent to others.
• Editors see every tab in the live preview, marked with a Rule badge.
• With full-page caching, a cached page keeps what it was built with until the cache refreshes. Clear your cache when a schedule should change the page.

9.4 Behaviour

9.5 Layout

9.6 Pro colours

9.7 Typography

Tab Ultimate does not load fonts from Google, to protect visitor privacy. Use fonts your theme already loads.

9.8 Badges and image icons

• Badge: type up to 16 characters in the tab's Badge field. It appears next to the title.
• Image icon: click Choose image, pick a PNG, JPG, GIF, WebP or SVG from the media library, and it replaces the icon for that tab. Click Remove to go back to the icon font. Icon size follows Icon Font Size.

10. Recipes: common designs

FAQ with a side menu

1. Templates → FAQ → Use this template.
2. Edit the questions and answers, then publish.
3. Add the group to your FAQ page with the block or shortcode.

Product details page

1. Use the Product Details template (minimal underline style).
2. Replace the sample text with your specifications, shipping and reviews.

Pricing plans with badges (Pro)

1. Use Pricing Plans.
2. Set a Subtitle for each plan and a Badge such as Popular.

Many tabs on one line

1. Tab Settings → Tab Menu Overflow → Scrollable, with arrows.

One tab per blog category (Pro)

1. Pro Features → Dynamic tabs → Build tabs from content → Categories.
2. Choose Content type: Posts, Taxonomy: Categories, Posts layout: Cards.

A sale tab that expires (Pro)

1. Open Visibility & schedule in the tab.
2. Set Show from and Show until.

Members-only tab (Pro)

1. Set Who can see this tab to Logged-in users, or choose a role.

Mobile-friendly accordion (Pro)

1. Pro Features → Behaviour → Accordion on mobile → On.

11. Accessibility and keyboard use

Tab Ultimate follows the WAI-ARIA tabs pattern.

• The open tab has aria-selected="true", and panels are linked to their tabs.
• Focus is clearly outlined.
• Animations are shortened for visitors who prefer reduced motion, and autoplay is switched off for them.
• If JavaScript is turned off, all content is shown one after another.
• Use Tab Title HTML Tag (H2 to H6) to fit tab titles into your page's heading outline.

12. Troubleshooting

My tabs do not show on the page. Check that the group is Published (not Draft) and that the ID in the shortcode matches the group. Drafts are visible only to logged-in editors.

"Error rendering live preview". The message now ends with the reason. Reload the editor page (the security token may have expired) and open Live Preview again. If it still fails, turn on WP_DEBUG_LOG, repeat, and send the line from wp-content/debug.log to support.

The Live Preview is empty. Add at least one tab with a title or content, then click Refresh Preview.

The Add Media button is missing in a tab. Reload the editor. Make sure no other plugin blocks the WordPress media library.

Some tabs disappeared after saving a very large group. Ask your host to raise max_input_vars (for example to 5000).

Tabs look different from the live preview. Your theme's CSS can change tab styling. Use Custom CSS Pro, or the colour and size options. Clear your cache plugin after changes.

A scheduled or role-based tab shows the wrong state. Full-page caching saves the page as it was built. Clear the cache, or exclude the page from caching.

Links like #tptabs-12-panel-2 do not open the right tab. Make sure URL Hash Links is On. Each tab group on a page has its own IDs, so links never clash.

Vertical tabs look cramped in a sidebar. Use the Horizontal layout with a Scrollable menu in narrow areas.

I can't edit Custom CSS. Only users who can publish unfiltered HTML can edit it. On multisite, this is usually Super Admins.

Pro options do not appear after buying. Go to Plugins and make sure Tab Ultimate Pro is active and the license is activated.

13. Developer reference

Shortcode: [tabsprofree id="123"] (alias [tab_ultimate id="123"])

PHP: echo do_shortcode( '[tabsprofree id="123"]' );

Post type: tp_tab_pro (private, not visible on the front end)

Main CSS classes

CSS custom properties on the container include --tp-title-color, --tp-active-bg, --tp-content-bg and --tp-content-padding.

JavaScript events (on the .tptabs-container element, bubbling to document)

jQuery(document).on('tptabs:init', function (e, api) { /* api.activate(i), api.current(), api.count() */ });
jQuery(document).on('tptabs:change', function (e, index, previous) {});

Get a group's API: jQuery('#tptabs-12').data('tpTabs').

Filters

Actions: tptabs_enqueue_assets, tptabs_item_fields, tptabs_render_pro_tab.

14. Updating, license and support

• Update the plugin from Plugins → Installed Plugins. Back up your site first.
• Pro license: manage it under Tab Ultimate → Account (activate, deactivate, renew).
• Uninstalling: deactivate and delete the plugin from Plugins. Your tab groups are kept in the database until you delete them under All Tabs → Trash.
• Get help: open Tab Ultimate → Dashboard → Help & Support for the documentation and support links. When you write to support, include your WordPress and PHP versions, the plugin version, and a screenshot.

Thank you for using Tab Ultimate! If it helps your site, a short review means a lot.