How to Add Tabs in WordPress: A Step-by-Step Guide

WordPress core still has no stable tabs block, and that gap has quietly sold a lot of plugins.

Figuring out how to add tabs in WordPress comes down to which editor you already use. Block editor, page builder, shortcode plugin, or your own markup.

Four methods, each with a real cost. One locks you into a builder. One breaks on deactivation. One takes 30 lines of code.

What you get below:

• Step-by-step setup for Kadence Blocks, Elementor, Divi, and Shortcodes Ultimate
• Editing WooCommerce product tabs with the woocommerce_product_tabs filter
• Whether Google indexes content sitting inside a closed tab panel
• Fixes for stacked panels, dead clicks, and raw shortcode text

Pick the method that matches your setup, then skip ahead.

What Are Tabs in WordPress

Tabs in WordPress are a user interface pattern where one content panel shows at a time while the others stay hidden until their label gets clicked. WordPress users apply the word to 3 unrelated things, which is why search results for it are such a mess.

The 3 meanings, ranked by how often people actually mean them:

• Content tabs inside a post or page, grouping text into clickable panels
• WooCommerce product data tabs (Description, Additional Information, Reviews) on a single product page
• Admin screen tabs in the WordPress dashboard, which are just links and not what anyone is building

Everything below covers the first two.

Core shipped an Accordion block in WordPress 6.9, and the Tabs block is slated for WordPress 7.1 on August 19, 2026, built against the W3C ARIA Authoring Practices Guide tabs pattern. Until then, WordPress 7.0 “Armstrong” (released May 20, 2026) has no stable tabs block.

So on today’s install, tabs come from a plugin, a builder, or your own code.

Tab Labels, Panels, and Active States

A tab set has 4 parts, and every plugin names them differently while building the same thing.

• Container: the wrapper that holds the whole component
• Tab labels: the clickable buttons, usually in a horizontal row
• Tab panels: the content boxes, one per label
• Active state: the styling that marks which panel is currently open

Miss the active state and users lose track of where they are. It happens more than you would think with cheap plugins.

Tabs vs Accordions in WordPress

Both hide content. They solve different layout problems.

Tabs break down past 6 labels because the row wraps and the whole thing stops reading as a row. Accordion layouts scale better there.

And tabs are the wrong home for comparison data. That belongs in a table, visible, no clicking required.

What Are the 4 Methods to Add Tabs in WordPress?

The 4 methods to add tabs in WordPress are block plugins, page builders, dedicated tabs plugins, and custom HTML with CSS and JavaScript. Your existing editor picks the method for you in most cases. Fighting that choice creates migration debt later.

Roughly 60% of WordPress sites now run some form of page builder, up from 45% in 2022 (Colorlib). If you are in that group, use the widget your builder already ships instead of stacking another plugin on top.

Block theme sites should reach for a block plugin. WooCommerce stores editing product page tabs need the filter method in section 7, which is a different system entirely.

How to Add Tabs With the WordPress Block Editor

Adding tabs in the block editor requires a third-party block plugin, since WordPress core has no stable tabs block yet. Kadence Blocks, Spectra, Otter Blocks, and Stackable each ship one for free. Install, insert, set the tab count, name the labels, fill the panels.

Spectra (formerly Ultimate Addons for Gutenberg, built by Brainstorm Force, the Astra team) passes 1 million active installs on WordPress.org.

Otter Blocks from ThemeIsle sits near 300,000, Stackable near 100,000, and GenerateBlocks near 200,000 (AutomagicWP plugin data).

Worth knowing where core is heading: the Tabs block currently living in the Gutenberg experimental package came out of Pew Research Center’s own implementation, contributed back through pull request #69789.

Adding a Tabs Block With Kadence Blocks

Setup sequence:

• Plugins > Add New, search Kadence Blocks, install and activate
• In the post editor, insert the Tabs block and pick your tab count
• Rename each label directly in the tab row
• Drop any block inside each panel (images, lists, columns, whatever)
• Switch to vertical layout in the sidebar if the row wraps awkwardly

Kadence, now part of StellarWP, has been actively patching nested tab bugs through its October 2025 releases.

Reusing a Tab Set With Synced Patterns

Build the tab set once, select the outer block, and save it as a synced pattern.

Every page using that pattern updates when you edit the original. Handy for a shipping and returns tab set repeated across 40 product pages.

The catch: editor performance sags past roughly 8 tabs with heavy inner blocks, because each panel is a full block tree.

How to Add Tabs With a Page Builder

Every major page builder ships a tabs widget in its free tier. Drag the widget onto the canvas, set horizontal or vertical orientation, then fill each tab item with content. No plugin install, no shortcode, no code.

Per HTTP Archive’s April 2026 crawl analyzed by GravityKit, Elementor reaches 32.67% of WordPress sites, ahead of the WordPress Block Editor at 20.62%, wpBakery at 8.52%, and Divi at 5.72%.

Elementor Tabs Widget Setup

Elementor’s free version bundles 40+ widgets, and Tabs is one of them across 10 million+ active installs.

Drag Tabs onto the section. Each tab item gets its own Title field and Content field in the left panel.

Set Type to Horizontal or Vertical under Content > Tabs. Then check the tablet breakpoint, because Elementor stacks tabs into an accordion below it by default, which is the correct responsive behavior but surprises people the first time.

Divi, Bricks, and Beaver Builder Equivalents

Divi: add the Tabs Module, then add a Tab Item per panel. Elegant Themes has kept Divi between 5.48% and 5.93% of WordPress sites for 3 straight years.

Bricks: the Tabs element is nestable, so panels accept any other element inside them. Bricks grew from 0.19% to 0.34% of WordPress sites between April 2025 and April 2026, a 71.2% jump off a small base.

Beaver Builder: the Tabs module lives under Advanced Modules, with per-tab background and border controls.

One honest downside across all four. Deactivate the builder and the tab markup goes with it, leaving either raw shortcodes or an empty div where your content used to be.

How to Add Tabs With a Dedicated Tabs Plugin

Dedicated tabs plugins output tabs through a shortcode, which makes them the right pick for Classic Editor sites, custom themes, and anywhere you need the same tab set in a post, a widget, and a template file. Shortcodes Ultimate, WP Tabs, and Easy Responsive Tabs cover this.

Shortcodes Ultimate carries 400,000+ active installs and a 4.9 rating across 5,923 reviews on WordPress.org, bundling 50+ elements including tabs, accordions, and content sliders.

The shortcode pattern nests tab items inside a wrapper:

“ [sutabs] [sutab title="Shipping"]Content here[/sutab] [sutab title="Returns"]More content[/sutab] [/sutabs] `

To place that same set in a template file, wrap it in doshortcode(). For a sidebar or footer, paste it into a Text or Shortcode widget.

Storage matters more than people expect. Some plugins keep tab content in post meta, others in a custom post type, and that decision determines whether your tabs survive an export and import to a new host.

The real downside: deactivate the plugin and every shortcode prints as literal bracket text across your site. Most of these plugins also load jQuery-based tab scripts, which is fine on WordPress (jQuery still ships with core and appears on 73.5% of all websites per W3Techs, June 2025) but adds weight you may not want.

How to Add Tabs With Custom HTML, CSS, and JavaScript

Hand-coded tabs need 3 pieces: button markup for the labels, div markup for the panels, and a click handler that swaps which panel carries the hidden attribute. No plugin, no jQuery, roughly 30 lines total.

This method wins on payload. A plugin tab set drags in a stylesheet and a script sitewide, while your own HTML loads only where you put it.

It also wins on control. If your theme already loads Bootstrap, the framework’s tab component hands you the markup and behavior with zero extra requests.

Tab Markup Structure

Keep the id and aria-controls values in sync or nothing works for keyboard users.

` <div class="tabs"> <button id="t1" aria-controls="p1" aria-selected="true">Shipping</button> <button id="t2" aria-controls="p2" aria-selected="false">Returns</button> <div id="p1" role="tabpanel">Panel one</div> <div id="p2" role="tabpanel" hidden>Panel two</div> </div> `

Use the hidden attribute rather than display: none in your stylesheet. Screen readers respect it, and the state stays queryable from JavaScript without reading computed styles.

Enqueuing the Script in a Child Theme

Where the code goes:

• Script file in /wp-content/themes/your-child-theme/js/tabs.js

• Registered through wpenqueuescript() in your child theme's functions.php

• Stylesheet rules in the child theme CSS, not the Additional CSS panel, so version control catches them

Register the whole thing as a shortcode afterward. Editors get a clean insert, you keep the markup.

For layout variants (pill labels, underline labels, vertical stacks) the CSS tab examples collection covers patterns worth copying. Add a media query around 600px to stack labels vertically before the row wraps.

How to Add or Edit Tabs on WooCommerce Product Pages

WooCommerce product tabs are controlled by the woocommerce_product_tabs filter, not by any content tab plugin. Every store starts with 3 default tabs: Description, Additional Information, and Reviews. The filter renames, reorders, removes, and adds them.

BuiltWith counts 4.17 million live WooCommerce stores, and W3Techs puts WooCommerce on roughly 1 in every 5 WordPress sites.

Each tab carries a priority value that sets display order. Description is 10, Additional Information 20, Reviews 30. Lower numbers sit further left.

Editing Default Product Tabs With a Filter

Drop this in your child theme’s functions file:

` addfilter( 'woocommerceproducttabs', 'wpdedittabs', 98 ); function wpdedittabs( $tabs ) { $tabs['description']['title'] = 'Product Details'; unset( $tabs['additionalinformation'] ); $tabs['reviews']['priority'] = 5; return $tabs; } `

That renames Description, drops the Additional Information tab, and pushes Reviews to the front.

Priority 98 on the filter matters. Run it too early and WooCommerce overwrites your changes when it registers its own defaults.

Adding a Custom Product Tab

Two moving parts: the tab registration and the callback that prints the panel content.

Register with a title, a priority, and a callback key. The callback function echoes whatever the panel should hold, usually a size guide, shipping table, or care instructions.

That approach applies the tab to every product in the catalog. For per-product tabs, plugins handle it better: YITH WooCommerce Tab Manager and WooCommerce Product Tabs Manager both add a tab configuration box to the individual product editor.

Pick one and stay with it. Running a global filter and a per-product plugin at the same time produces duplicate tabs, and tracking down which one printed what is a tedious afternoon.

How to Style Tabs to Match a Theme

Styling WordPress tabs means overriding the plugin’s own CSS with more specific selectors, pulled from browser DevTools rather than guessed at. Target 4 states separately: default label, hover, active, and focus. Block themes inherit palette and typography values from theme.json without extra work.

Right-click a tab label, choose Inspect, and read the class names off the Elements panel. Every plugin invents its own, and no two agree.

The 4 states worth styling on their own:

• Default: the resting label, usually inheriting body typography
• Hover: a background or underline shift signalling the label is clickable
• Active: the current panel’s label, visually separated from the rest
• Focus: the keyboard outline, which too many themes strip out with outline: none

Contrast is where most custom tab styling falls apart. WebAIM’s 2025 Million report found low contrast text on 79.1% of home pages, averaging 29.6 instances per page.

An active tab label that drops to light grey on white reads as decorative, not as state. Check the contrast ratio before you ship it.

Where the CSS lives matters more than people expect. Additional CSS in the Customizer works, but a child theme stylesheet keeps your rules in version control and survives a theme reinstall.

Plugin CSS often loads with high specificity on purpose, which is why your rule appears to do nothing. Run the selectors through a specificity check before reaching for !important.

Kadence shipped a fix in October 2025 for accordion heading style active and hover selectors, which is a decent illustration of how fiddly state selectors get inside block plugins.

Layout variants worth knowing: underline tabs (a border-bottom on the active label), pill tabs (rounded background), and vertical tabs (labels in a left column). Pick one and apply it consistently, because mixed tab styles across a site wreck visual hierarchy fast.

For the hover treatment itself, the CSS hover effect patterns collection has more restrained options than most plugin defaults.

How to Make WordPress Tabs Accessible

Accessible tabs need correct ARIA roles, arrow key navigation between labels, and a visible focus ring. The pattern is documented in the W3C ARIA Authoring Practices Guide, which is the same reference the upcoming core Tabs block is built against.

Most tab plugins ship partial support. Testing with a keyboard takes 30 seconds and catches nearly all of it.

Adding ARIA attributes is not automatically an improvement. WebAIM’s 2026 Million report found 82.7% of home pages now use ARIA, and those pages averaged 59.1 errors against 42 on pages without it.

The same report found ARIA menus on 5.7% of pages, and 22% of those menus created barriers through incomplete markup. Half-implemented tab widgets fail the same way.

Keyboard behavior the pattern requires:

• Left and right arrows move between tab labels
• Tab key moves focus out of the label row and into the open panel
• Only the selected label carries tabindex=”0″, the rest get -1

That last rule is called roving tabindex. The Tabs Block plugin on WordPress.org shipped a fix for exactly this in a recent release, which tells you how commonly it gets missed.

Test with NVDA on Windows and VoiceOver on iOS. WebAIM’s 2024 Screen Reader User Survey put NVDA at 65.6% common usage and JAWS at 60.5%, with 91.3% of respondents also using a screen reader on mobile.

Headings inside your panels are not decoration either. The same survey found 71.6% of respondents navigate long pages by heading.

Run the whole thing against a web accessibility checklist before launch, and treat tabs the way you would any other accessible UI component.

How Do Tabs Affect SEO in WordPress?

Tabs do not hurt SEO when panel content sits in the HTML at page load. Google indexes it and gives it full ranking weight. Content injected after a click never enters the rendered DOM and does not get indexed at all.

Gary Illyes settled the first half in November 2016, stating that content hidden for user experience carries full weight in mobile-first indexing.

John Mueller confirmed it again in a March 2020 hangout: anything present in the HTML gets taken into account, tabs included.

The second half is newer and less comfortable. In January 2025, responding to Remy Sharp on Bluesky, Mueller said Google does not click on-click elements to reveal hidden content under the same URL.

So the distinction is not visible versus hidden. It is present in the DOM versus fetched later.

Testing Whether Tab Content Is Indexed

Open the URL Inspection tool in Google Search Console, run a live test, and read the rendered HTML.

Search that output for a distinctive phrase from your third or fourth tab panel. Present means indexable. Absent means you have a problem.

A quicker check: view source on the front end and hunt for the same phrase. Server-rendered tabs show up immediately.

MERJ ran 12 separate experiments on tabbed content indexing, and the pattern held across all of them.

AJAX-Loaded Tabs and Missing Content

The failure case: a plugin that requests panel content over AJAX when the label is clicked, keeping the initial page weight down.

Great for speed. Terrible for indexing, because Googlebot never fires that click.

Some WooCommerce tab plugins do this with review panels on large catalogs. If your product reviews are not showing in search, check whether they load on demand.

Heading structure inside panels still counts, so use proper subheadings rather than bolded paragraphs. Passage extraction relies on them.

One judgment call worth making early. Content you want ranking (specs, ingredients, policy details) belongs in tabs only if it is server-rendered. Everything genuinely secondary can go anywhere.

How Do Tabs Affect Page Speed and Core Web Vitals?

Tabs touch 2 Core Web Vitals directly. Cumulative Layout Shift when panels of different heights swap on click, and Interaction to Next Paint when the click handler does more work than it needs to.

WordPress sits at roughly 46% of origins passing all 3 Core Web Vitals on mobile per the November 2025 HTTP Archive snapshot, though its INP figure is a healthy 85.89%.

The CLS fix is a min-height on the panel container. Set it to the tallest panel and the layout stops jumping when a user switches tabs.

Unsized media inside panels causes the same problem. The 2025 Web Almanac found 62% of mobile pages fail to set explicit dimensions on at least one image, improved from 66% in 2024 but still the leading CLS trigger.

Width and height attributes on every image inside every panel. Or a CSS aspect-ratio. Either works.

Images in inactive panels are a free win. WordPress adds loading=”lazy” by default since 5.5, and HTTP Archive data shows 84% of all sites using browser-level lazy loading are WordPress sites.

Panels below the initial viewport should stay lazy. Never lazy-load an image that could be your LCP element.

Measure before and after in PageSpeed Insights, and use Query Monitor to see exactly which plugin is enqueuing the tab script on pages that have no tabs on them. That last one catches a surprising amount of waste.

How to Fix Common Tab Display Problems

Broken tabs trace to 5 causes: CSS not loading, a JavaScript conflict, a deactivated plugin, a mobile breakpoint failure, or stale cache. Each produces a distinct symptom, so what you see on screen tells you which one you are chasing.

The console tells you nearly everything. A failed resource load on the tab stylesheet explains stacked panels instantly.

Dead clicks usually mean a script threw before the tab handler bound. The classic culprit is a jQuery is not defined error, which happens when a theme deregisters jQuery or moves it to the footer.

Shortcode text printing on the front end is the plugin equivalent of an unplugged cable. Shortcodes Ultimate itself shipped a patch for shortcodes appearing as plain text in the classic interface, so it is not always your fault.

Isolating a plugin conflict, in order:

• Install Health Check & Troubleshooting and enable Troubleshooting Mode, which disables plugins for your session only through a browser cookie
• Confirm the tabs work with everything off
• Re-enable plugins one at a time until the tabs break again
• Check the error log for PHP notices firing on the same page

US WordPress sites run 21 plugins on average (SQ Magazine, 2025), which is exactly why sequential deactivation beats guessing.

Mobile breakage below 480px is almost always the label row wrapping into an unreadable stack. Most builders handle this by converting to an accordion at the tablet breakpoint, and a mobile-first approach to the CSS avoids the problem entirely.

Cache is the last suspect and the most embarrassing. With 82.4% of WordPress sites running at least one caching plugin (SQ Magazine, 2025), a stale page is the likeliest reason your edits are not showing.

Purge from LiteSpeed Cache (7 million+ active installs) or WP Rocket, then hard refresh. Clear your CDN too if one sits in front.

FAQ on How To Add Tabs In WordPress

Can you add tabs in WordPress without a plugin?

Yes. Write the button and panel markup yourself, add a short vanilla JavaScript click handler, and enqueue both from a child theme. Roughly 30 lines total, no jQuery dependency, and nothing breaks when you switch themes later.

Does WordPress have a built-in tabs block?

Not in the current stable release. WordPress 6.9 shipped an Accordion block, and the Tabs block is slated for WordPress 7.1 on August 19, 2026. Until then, tabs come from a plugin or custom code.

Which free plugin adds tabs to the block editor?

Kadence Blocks, Spectra, Otter Blocks, and Stackable all include a free tabs block. Spectra passes 1 million active installs. Install one, insert the block, name your labels, then fill each panel with any blocks you want.

How do I add tabs in Elementor?

Drag the Tabs widget onto your section, included in the free version. Each tab item gets a Title and Content field in the left panel. Set Horizontal or Vertical under Content, then check the tablet breakpoint.

Does Google index content hidden inside tabs?

Yes, when the panel content sits in the HTML at page load. Google gives it full ranking weight. Content fetched over AJAX after a click never enters the rendered DOM, so it stays invisible to search.

How do I rename the Description tab in WooCommerce?

Hook the woocommerce_product_tabs filter at priority 98 in your child theme, then set $tabs[‘description’][‘title’] to whatever you want. Run the filter earlier and WooCommerce overwrites your change when it registers its own defaults.

Why are all my tab panels showing at once?

The plugin stylesheet is not loading. Open the browser console and look for a 404 on the CSS file. A caching plugin serving a stale version causes the same symptom, so purge and hard refresh.

Do tabs slow down a WordPress site?

Slightly. jQuery-dependent tabs plugins add render-blocking script weight, and panels resizing on click generate Cumulative Layout Shift. Set a min-height on the panel container and give every image explicit width and height attributes.

Are WordPress tab plugins accessible by default?

Rarely all the way. Correct markup needs role=”tablist”, role=”tab”, role=”tabpanel”, aria-selected, plus arrow key navigation and roving tabindex. Test with a keyboard first, then NVDA on Windows and VoiceOver on iOS.

What happens to tabs if I deactivate the plugin?

Shortcode-based tabs print as raw bracket text across every page that used them. Page builder tabs vanish with the builder markup. Block plugin tabs and hand-coded tabs survive better, which matters when planning any migration.

Conclusion

There’s no universal answer here, and anyone telling you otherwise is selling something.

Block editor site? Kadence or Spectra. Done in five minutes, survives a theme swap, and you’re not adding a builder you’ll regret.

Already running Elementor or Divi? Use the widget that’s already sitting in your panel. Adding a tabs plugin on top of a page builder is how sites end up with three tab systems and nobody remembering which page uses which.

Classic Editor or a custom theme with weird template needs? Shortcodes Ultimate still holds up. Just accept the raw bracket text risk if you ever deactivate it.

And if you’re comfortable in functions.php, write the 30 lines. Smallest payload, full control over the ARIA, no plugin update ever breaking your layout on a Tuesday morning.

Before You Ship

Three checks that catch most of what goes wrong:

• View source and search for a phrase from your last tab panel. Not there? Google isn’t indexing it either.
• Tab through the labels with your keyboard. If focus disappears or arrow keys do nothing, the plugin skipped roving tabindex.
• Set a min-height on the panel container. Layout shift on tab click is free to fix and annoying to leave in.

WooCommerce stores are their own thing. The woocommerce_product_tabs filter at priority 98, not a content tabs plugin, and pick either the filter or a per-product plugin. Not both.

Core’s Tabs block lands in 7.1 on August 19, 2026. Built against the W3C pattern, which should mean the accessibility comes right out of the box for once. Worth watching if you’re planning a rebuild anyway.

Until then, pick the method that matches the editor you already open every day. That’s genuinely most of the decision.