What Dynamic Tabs does
Dynamic Tabs turns any block of content into a set of clickable tabs using a simple shortcode — no page builder or block library required. Wrap your content in [dtabs], mark each tab with [dtab title="…"], and pick a visual style from the settings screen. That's the whole workflow.
It's commonly used for course lessons + notes, product descriptions + specs, FAQs, and documentation pages — anywhere related content benefits from being split into switchable panels instead of one long scroll.
Installing the plugin
- In your WordPress dashboard, go to Plugins → Add New → Upload Plugin.
- Choose the
dynamic-tabs.zipfile you downloaded and click Install Now. - Click Activate.
- A new Dynamic Tabs page appears under Settings in your admin menu, with live previews of every style.
Basic shortcode syntax
Every tab group starts with [dtabs] and ends with [/dtabs]. Each tab is opened with [dtab title="…"] — there's no separate closing tag per tab, the next [dtab] (or the final [/dtabs]) closes the previous one automatically.
[dtabs] [dtab title="Description"] Your first tab's content. Any WordPress content works here — text, images, embeds, shortcodes, blocks. [dtab title="Specifications"] Your second tab's content. [/dtabs]
You can add as many [dtab] sections as you like inside one [dtabs] block.
Live style demo
This is the plugin's real front-end CSS and JavaScript, running right here in the page. Switch styles, toggle boxed/borderless, and pick an accent colour to see exactly what your site's visitors will see.
This is the Description tab. Any WordPress content can live inside a tab — paragraphs, images, embeds, even other shortcodes.
- Weight: 1.2 kg
- Dimensions: 24 × 16 × 4 cm
- Material: Anodised aluminium
"Switching styles took one click in the settings page — no CSS editing needed." — a happy customer, probably.
This demo uses the exact CSS classes and click-handler logic the plugin outputs on your site (dtab-wrapper, dtab-nav, dtab-button, dtab-pane) — what you see here is what visitors see.
Nesting a second row of tabs
Enable Sub-Tabs on the settings page, then use [sdtab title="…"] inside any [dtab] to add a nested row. Sub-tabs have their own style setting, independent of the main tabs.
[dtabs] [dtab title="Overview"] [sdtab title="Summary"] A short summary shown first. [sdtab title="Details"] The longer version, one click away. [dtab title="Resources"] Links and downloads go here. [/dtabs]
A short intro paragraph can sit above the sub-tabs.
A short summary shown first.
The longer version, one click away.
Links and downloads go here.
Sub-tabs always render borderless, regardless of the parent's boxed/borderless setting — they inherit the surrounding tab's own padding instead.
Settings
All settings live under Settings → Dynamic Tabs, with a live preview for both the main-tab and sub-tab style pickers.
| Setting | What it does |
|---|---|
| Tab Style — Main Tab | Visual style for top-level tabs: Segmented, Underline, Pills, Boxed, or Minimal. |
| Tab Style — Sub Tab | Visual style for nested [sdtab] tabs, set independently of the main style. |
| Accent Colour | The highlight colour used for the active tab, in every style. |
| Boxed Content | Wraps tab content in a bordered card with padding. Off = borderless, blending into your page. |
| Force Borderless on Phones | Only applies when Boxed Content is on: switches to borderless automatically on phone-sized screens. |
| Enable Sub-Tabs | Turns on the [sdtab] shortcode for nested tab rows. |
Embedded video & smart quotes
If a tab contains an embedded video (YouTube, Vimeo, etc.), Dynamic Tabs automatically re-triggers a resize when you switch to that tab — so a video hidden inside an inactive tab never renders at 0×0 or gets clipped.
Smart quotes: if your editor auto-converts straight quotes to curly ones inside a shortcode attribute, Dynamic Tabs still parses title="…" correctly either way.
Frequently asked questions
Does this work with the Block Editor and Classic Editor?
Yes. Use a Shortcode block in the Block Editor, or paste the shortcode directly in the Classic Editor.
Can I use it inside a page builder?
Yes — drop the shortcode into any Text/HTML or Shortcode widget in Elementor, Divi, Beaver Builder, etc.
Will it conflict with other tab or accordion plugins?
No. Dynamic Tabs only registers its own [dtabs], [dtab], and [sdtab] shortcodes and doesn't touch other plugins' markup or CSS.
Does it load extra CSS/JS files on every page?
No separate files at all — a small inline <style> and <script> are printed in the footer only on pages that actually use a [dtabs] shortcode.
Getting help
Use the support option on the Dynamic Tabs product page on WPBay to reach us with questions, bug reports, or feature requests.