How to Add Tabs in WordPress

Tabs let visitors switch between related sections without scrolling through all of them at once. They work well for product specifications, service packages, setup instructions, delivery information, and other content that belongs together but does not need to be visible at the same time.

WordPress does not currently include a dedicated Tabs block in its standard collection. The official WordPress blocks list includes related layout tools such as Group, Columns, Details, and Accordion, but none of them creates a conventional tabbed interface.

You can still add tabs with a block plugin, a shortcode plugin, or custom code. This guide explains all three approaches and the tradeoffs behind each one.

Decide whether tabs are the right pattern

Tabs are most useful when the panels are equal parts of one topic. A product page might use Description, Specifications, and Delivery tabs. A service page might separate Overview, Process, and Pricing.

Before adding them, check that the content fits the pattern:

• Keep the number of tabs small enough to scan in one row.
• Give every tab a short, descriptive label.
• Put related content inside the same tab set.
• Do not hide a required instruction behind an unexpected label.
• Make sure the interface remains usable on a narrow screen.

Use an accordion instead when readers are likely to open several sections, the labels or content are long, or the layout needs to work especially well on mobile. Use normal page headings when every section is important and should remain visible while readers scan the page.

Method 1: use the VovaBlocks Tabs block

VovaBlocks Pro includes a dedicated Tabs block for the native WordPress editor. It organizes editable blocks into tabbed panels, so the content remains part of the block-based editing workflow.

This is a good fit when you want authors and clients to edit tab content visually instead of working with shortcode tags or maintaining a custom script.

1. Install and activate VovaBlocks Pro

Choose a VovaBlocks Pro plan, install the plugin, and activate the license using the instructions supplied with your purchase. Tabs is a Pro block; it is not included among the seven blocks in VovaBlocks Free.

VovaBlocks works inside the standard WordPress block editor rather than replacing it with a separate page builder.

2. Insert the Tabs block

Open the page or post, select the block inserter, and search for Tabs. Add the block from the VovaBlocks category.

Create the tabs you need and give each one a concise label. Avoid labels such as “More” or “Other” when a specific name would tell the visitor what the panel contains.

3. Add blocks to each panel

Select a tab and add its content to the active panel. Because the panels contain editable inner blocks, you can structure them with familiar WordPress elements such as headings, paragraphs, images, lists, and buttons.

That is the main advantage of this method: the tabs and their contents are edited as blocks in the same interface as the rest of the page. There is no shortcode structure to remember, and an editor can select individual content blocks directly.

4. Style and test the tab set

Use the block settings and your theme's design system to make the active tab easy to identify. Keep text contrast clear and avoid relying on color alone to communicate which tab is selected.

Preview the published page and test every tab. Check both desktop and mobile widths, and confirm that keyboard users can reach and change the active tab.

When to choose this method

The VovaBlocks approach is useful when:

• Your site already uses the block editor.
• Non-technical editors will maintain the content.
• Each panel needs normal WordPress blocks, not just plain text.
• You want the editing experience to match the rest of the page.
• The other VovaBlocks Pro blocks are also useful to your site.

The tradeoff is cost and plugin dependency. The interactive behavior and editor controls require VovaBlocks Pro to remain active.

Method 2: use Shortcodes Ultimate

Shortcodes Ultimate is a free plugin that provides a large collection of shortcode-based content elements, including tabs. Its Tabs shortcode supports horizontal or vertical layouts, a default active tab, and mobile display options.

This is a practical choice for an existing shortcode-based site or for someone who already uses several Shortcodes Ultimate elements. It is less natural for a block-first workflow because the tab structure is stored as shortcode markup rather than editable nested blocks.

1. Install Shortcodes Ultimate

In the WordPress dashboard, go to Plugins → Add New Plugin and search for “Shortcodes Ultimate.” Install and activate the plugin.

Open the page or post where you want to add the tabs. The plugin provides an Insert shortcode tool that can generate the required markup, so you do not have to type every attribute manually.

2. Generate the Tabs shortcode

Choose Tabs in the shortcode generator. Add a title and content for each panel, select the starting tab, and review the layout and mobile options.

The generated structure uses an [su_tabs] container with an [su_tab] shortcode for every panel. The official Shortcodes Ultimate Tabs documentation lists the available settings.

Insert the result into a Shortcode block, then preview the page. WordPress's standard Shortcode block accepts the generated markup, but it has no dedicated tab controls in the block toolbar or settings sidebar.

3. Edit and maintain the shortcode

To change the tab set later, return to the shortcode markup or generate a replacement. Be careful when renaming, moving, or removing a panel: every opening shortcode must still have the correct closing shortcode.

Shortcodes Ultimate makes the initial setup approachable through its visual generator, but the stored content still depends on shortcode syntax. If the plugin is deactivated or removed, WordPress can no longer turn those tags into the intended interactive tabs. Migrating away therefore requires replacing the shortcode-based structure.

When to choose this method

Shortcodes Ultimate can make sense when:

• The site already uses the plugin or other shortcodes.
• You need a free way to create a straightforward tab set.
• You maintain content in both the Classic Editor and the block editor.
• You are comfortable reviewing shortcode markup when making changes.

It is not the strongest choice for a new block-first site. Editors cannot work with each panel as a normal group of nested blocks, and the shortcode dependency adds friction to future maintenance. Its broad shortcode library can still be valuable when that workflow already fits the site.

Method 3: build a custom tab interface

A developer can build tabs with semantic HTML, CSS, and JavaScript, then integrate the component through a custom plugin, theme, or purpose-built block.

The HTML defines the tab labels and panels, CSS controls their layout and active states, and JavaScript switches panels and manages keyboard interaction. A robust implementation also connects each tab to its panel with the correct accessible names, roles, states, and relationships.

Do not treat this as a small copy-and-paste HTML task. A Custom HTML block alone does not provide the complete interaction, and scripts may be filtered according to the WordPress user's permissions. Site-level JavaScript and styles should be loaded through an appropriate custom plugin or theme workflow.

The W3C Tabs Pattern documents the expected keyboard behavior and accessibility semantics. For example, visitors should be able to move through the tab list with the arrow keys, identify the selected tab, and reach the active panel predictably.

When to choose this method

A custom implementation is suitable when:

• A developer maintains the site.
• The interface must follow a unique design system.
• You need behavior that existing blocks and plugins do not provide.
• The component will be reused and tested across a larger project.
• Avoiding a general-purpose content plugin is a firm requirement.

This method offers the most control, but it also creates the most responsibility. You must handle responsive behavior, accessibility, browser testing, script loading, security, and future WordPress or theme changes. For a single ordinary tab set, that maintenance can outweigh the benefit of avoiding a plugin.

Which method should you use?

There is no universal best option. Choose the approach that matches the people editing the site and the way the rest of the content is built.

Method	Best for	Main advantage	Main tradeoff
VovaBlocks Pro	Block-editor sites and non-technical editors	Tab panels contain editable WordPress blocks	Paid plugin dependency
Shortcodes Ultimate	Existing shortcode sites and mixed editor workflows	Free visual generator and a broad shortcode library	Shortcode markup is less native and harder to migrate
Custom code	Developer-maintained sites with unique requirements	Complete control over markup, design, and behavior	Highest implementation and maintenance cost

If your site is already organized around blocks, a dedicated Tabs block usually provides the most consistent editing experience. If Shortcodes Ultimate is already central to the site, its Tabs shortcode may be the fastest addition. Choose custom development when you have requirements that justify owning the component and its ongoing testing.

Tabs, accessibility, and SEO

A compact interface should not make the content harder to find or understand. Before publishing, review the tab set from the perspective of readers, search engines, and assistive technology:

• Use meaningful tab labels that describe the panel content.
• Keep essential introductory information outside the tabs.
• Use logical headings inside longer panels.
• Make all panel content part of the rendered page rather than fetching critical copy only after a click.
• Confirm that the selected tab is visually distinct.
• Test tab switching with a keyboard, not only a mouse.
• Check that labels do not overlap or become too small on mobile.
• Avoid putting a large page's entire structure into one crowded tab set.

Tabs should improve the presentation of related information, not hide a weak content hierarchy. If visitors need to compare two sections at the same time, a table, columns, or normal headings may be clearer.

WordPress tabs checklist

Before publishing, make sure that:

• Every tab has a short and specific label.
• The first panel gives visitors a useful starting point.
• The active tab is easy to recognize.
• All controls work with a keyboard.
• The layout remains readable at mobile widths.
• Links, buttons, images, and forms inside every panel work correctly.
• The chosen plugin or custom solution will be maintained with the site.
• The content would not be clearer as headings or an accordion.

The right implementation depends on your workflow. VovaBlocks Pro keeps tabs and their inner content in the native block editor, Shortcodes Ultimate offers a free shortcode-based route, and custom development provides maximum control. Compare the editing experience as carefully as the front-end design, because the tab set will need to remain understandable long after it is first published.