Summarize this article with:
Long pages kill engagement. Visitors scroll, lose interest, and leave.
Learning how to add tabs in WordPress solves this problem by organizing content into clickable sections that fit in a compact space.
Tabs work everywhere: product descriptions, service comparisons, FAQ sections, tutorials with multiple steps.
WordPress does not include a native tabs feature. You need a plugin, page builder, or Gutenberg block to add this functionality.
This guide covers four methods: Gutenberg blocks, Elementor widgets, shortcode plugins, and theme built-in options.
Each method includes exact steps, settings paths, and troubleshooting tips. Pick the approach that matches your current setup.
Total time required: 5-15 minutes depending on your chosen method.
How to Add Tabs in WordPress
Adding tabs in WordPress is the process of creating clickable content sections within a single page or post using plugins, page builders, or Gutenberg blocks.
Users need this when organizing product information, service descriptions, comparison content, or lengthy tutorials into digestible segments.
This guide covers 4 methods requiring 5-15 minutes and WordPress 6.0 or later.
Tabs keep visitors on your page longer. They reduce scrolling. They make complex information scannable.
A good user interface groups related content logically, and tabbed layouts do exactly that.
Prerequisites
- WordPress 6.0 or newer installed
- Administrator or Editor access
- Basic familiarity with the Block Editor or your chosen page builder
- 5-15 minutes depending on method
- Free or premium plugin (method-dependent)
If you need to enable the Gutenberg editor in WordPress, do that first.
Method One: Gutenberg Block Plugin
The Block Editor lacks a native tabs block. You need a third-party plugin like Kadence Blocks or Ultimate Blocks to add this functionality.
This method works best for blog posts and simple pages where you want tabbed content without a full page builder.
Step One: How Do You Install a Tabs Block Plugin?
Go to WordPress Dashboard > Plugins > Add New. Search for “Kadence Blocks” or “Ultimate Blocks” and click Install Now.
Both plugins are free. Both add a responsive tabs block to your Gutenberg inserter.
Action
- Navigate to: Dashboard > Plugins > Add New
- Search field: Enter plugin name
- Expected result: Plugin appears with Install Now button
Purpose
The Block Editor does not include a native tabs block, so a third-party plugin extends this functionality.
Step Two: Where Do You Activate the Tabs Block Feature?
After activation, go to Dashboard > [Plugin Name] > Settings or Blocks. Locate the Tabs or Tabbed Content toggle and enable it.
Some block plugins disable certain blocks by default to reduce page load time.
Action
- Navigate to: Dashboard > Plugin Settings
- Locate toggle: Tabs or Tabbed Content block
- Expected result: Block appears in Gutenberg inserter
Step Three: How Do You Add Tabs to a Page or Post?
Open any page or post in the editor. Click the (+) Add Block icon and search for “Tabs.”
The tabs block inserts with a default two-tab layout. You can add more tabs using the block controls.
Action
- Open: WordPress Editor > click (+) icon
- Search: “Tabs” or “Tabbed Content”
- Expected result: Block inserts with default layout
Step Four: How Do You Configure Tab Titles and Content?
Click individual tab headers to edit titles. Click inside each tab panel to add text, images, or nested blocks.
Each tab displays unique content when visitors click the corresponding header.
Action
- Click: Tab header to edit title
- Click: Tab body to add content
- Expected result: Content appears only in selected tab
Step Five: How Do You Style the Tabs Appearance?
Select the Tabs block in the editor. Open the right sidebar > Block Settings > Style tab.
Adjust colors, spacing, typography, and borders. Your CSS customizations apply instantly in the preview.
Action
- Select: Tabs block
- Open: Right sidebar > Style settings
- Expected result: Color and spacing options visible
Method Two: Page Builder (Elementor)
Page builders like Elementor include native tab widgets. No additional plugins needed if you already use one.
This approach works best for landing pages and marketing content where design control matters.
Step One: How Do You Access the Tabs Widget in Elementor?
Open any page or post and click Edit with Elementor. In the widget panel, search for “Tabs.”
The Tabs widget appears under the General category in the free version.
Action
- Open: Page > Edit with Elementor
- Search: Widget panel > “Tabs”
- Expected result: Widget appears under General
Step Two: How Do You Drag the Tabs Widget to Your Page?
Click and hold the Tabs widget. Drag it to your desired section on the canvas.
A default structure appears with placeholder content ready for editing.
Action
- Click and hold: Tabs widget
- Drag: To target section
- Expected result: Default tabs structure appears
Step Three: How Do You Edit Tab Content in Elementor?
Click the Content tab in the left panel. Expand individual tab accordions to edit Title and Content fields.
Changes appear in real-time on the canvas preview.
Action
- Click: Content tab in left panel
- Expand: Individual tab accordion
- Expected result: Real-time preview updates
Step Four: How Do You Adjust Tab Style Settings?
Click the Style tab in the left panel. Modify title colors, typography, borders, and spacing values.
Good user experience design requires consistent styling across your site.
Action
- Click: Style tab
- Modify: Colors, typography, spacing
- Expected result: Immediate visual update
Method Three: Shortcode Plugin
Shortcode plugins work with both the Block Editor and Classic Editor. Create tabs once, paste a shortcode anywhere.
This method works for widget areas, template files, and situations where Gutenberg blocks are not available.
Step One: How Do You Install a Tabs Shortcode Plugin?
Navigate to Dashboard > Plugins > Add New. Search for “Tabs Responsive” by WPShopMart.
Click Install Now, then Activate.
Action
- Navigate to: Dashboard > Plugins > Add New
- Search: “Tabs Responsive”
- Expected result: Plugin card with Install Now button
Step Two: Where Do You Create a New Tab Group?
Go to Dashboard > Tabs Responsive > Add New Tabs. Enter a name for your tab group in the title field.
The tab builder interface loads with configuration options.
Action
- Navigate to: Tabs Responsive > Add New Tabs
- Enter: Tab group name
- Expected result: Builder interface loads
Step Three: How Do You Add Individual Tabs?
Click the red “Add New Tabs” button. Enter a title and description for each tab.
Add icons if needed. The plugin supports Font Awesome and custom images.
Action
- Click: Add New Tabs button
- Enter: Title, description, icon (optional)
- Expected result: New tab appears in list
Step Four: How Do You Copy the Generated Shortcode?
Click Publish or Update. The plugin generates a shortcode like [TABS_R id=XXX].
Copy this shortcode. The unique ID links to your saved tab configuration.
Action
- Click: Publish button
- Locate: Shortcode field
- Expected result: Shortcode ready for copying
Step Five: Where Do You Paste the Shortcode?
Edit your target page or post. Add a Shortcode block (Block Editor) or paste directly (Classic Editor).
Tabs render on the frontend when visitors view the page.
Action
- Edit: Target page or post
- Add: Shortcode block or paste directly
- Expected result: Tabs appear on published page
Method Four: Theme Built-in Tabs (If Available)
Some WordPress themes include native tab functionality. Check before installing extra plugins.
Built-in features avoid plugin conflicts and load faster.
Step One: How Do You Check If Your Theme Includes Tabs?
Open your theme documentation or go to Appearance > Theme Options. Search for “Tabs” or “Tabbed content” in the feature list.
Action
- Open: Theme documentation or Appearance > Theme Options
- Search: “Tabs” in feature list
- Expected result: Instructions appear if tabs are theme-native
Purpose
Using built-in features avoids extra plugin dependencies and potential JavaScript conflicts.
Verification
Always test your tabs before publishing. Broken tabs frustrate visitors and hurt usability.
How Do You Confirm Tabs Work Correctly?
- Click Publish or Update after creating tabs
- Open the page in a new browser tab (frontend view)
- Click each tab header individually
- Confirm content switches without page reload
- Test on mobile device or browser mobile view (Ctrl+Shift+M in Chrome)
Check cross-browser compatibility by testing in Chrome, Firefox, Safari, and Edge.
Tabs should convert to accordion layout on screens below 768px for proper responsive design.
Troubleshooting
Most tab issues come from caching, JavaScript errors, or plugin conflicts. Here are the common problems and fixes.
Tabs Display Stacked Vertically Instead of Horizontally
Solution: Check plugin settings for Layout option > select Horizontal.
Clear caching plugins (WP Super Cache, W3 Total Cache) after changes.
Tab Content Does Not Appear
Solution: Verify content was saved in each tab section.
Check for JavaScript errors in browser console (F12 > Console tab).
If you see a jQuery is not defined error, your theme may be loading scripts incorrectly.
Tabs Break Site Layout on Mobile
Solution: Enable responsive or accordion mode in plugin settings.
Most responsive tabs plugins convert to accordion format on small screens automatically.
Check your viewport settings if tabs overflow horizontally.
Shortcode Displays as Text Instead of Tabs
Solution: Confirm the plugin is activated. Check shortcode ID matches the published tab group ID.
Copy the shortcode again from Tabs Responsive > All Tabs.
Tabs Load Slowly or Cause Layout Shift
Solution: Some plugins use Ajax lazy loading. Disable this if causing issues.
Consider using skeleton screens while tab content loads.
Plugin Conflict With Theme or Other Plugins
Solution: Deactivate other plugins one by one to identify the conflict.
Switch to a default theme (Twenty Twenty-Four) temporarily to test.
Check for WordPress error log entries related to tabs.
Alternative Methods Comparison
Choose your method based on your current setup and technical comfort level.
| Method | Time | Complexity | Best For |
| Gutenberg Block | 5 minutes | Beginner | Blog posts, simple pages |
| Page Builder | 5–10 minutes | Beginner–Intermediate | Landing pages, marketing content |
| Shortcode Plugin | 10–15 minutes | Beginner | Widget areas, template files |
| Theme Built-in | 2–5 minutes | Beginner | Users with compatible themes |
Choose Gutenberg blocks when writing standard posts with the Block Editor.
Choose page builder tabs when designing pages with Elementor, WPBakery, or Divi Builder.
Choose shortcode plugins when adding tabs to sidebars, footers, or theme template files.
Related Processes
After mastering tabs, explore these related content organization techniques:
- Accordion content for FAQ sections (similar to tabs, expands vertically)
- How to add tables in WordPress for data comparison
- How to add a slider in WordPress for image galleries
- How to create a sub menu in WordPress for better navigation
- How to add subheadings in WordPress for content hierarchy
Tabs work well alongside other interactive elements like toggles, accordions, and expandable sections.
Consider your overall visual hierarchy when combining multiple content organization methods on one page.
FAQ on How To Add Tabs In WordPress
Does WordPress have a built-in tabs feature?
No. WordPress does not include a native tabs block in the Gutenberg editor. You need a third-party plugin like Kadence Blocks, Ultimate Blocks, or a page builder like Elementor to add tabbed content to your pages and posts.
What is the best free WordPress tabs plugin?
Kadence Blocks and Ultimate Blocks are the best free options for Gutenberg users. For shortcode-based tabs, Tabs Responsive by WPShopMart works well. All three plugins offer responsive layouts and basic customization without payment.
Can I add tabs without using a plugin?
Yes, but it requires custom code. You would need to write HTML structure, style it with custom CSS, and add JavaScript for tab switching functionality. Plugins are faster and easier for most users.
How do I make tabs responsive on mobile devices?
Most tab plugins include a responsive tabs setting that converts horizontal tabs to accordion layout on small screens. Check your plugin settings for “Mobile” or “Responsive” options. Enable accordion mode for screens below 768px.
Can I use tabs inside Elementor?
Yes. Elementor includes a native Tabs widget in the free version. Drag the widget to your page, edit tab titles and content in the left panel. The widget supports styling options for colors, typography, and spacing.
How do I add icons to tab titles?
Most premium tab plugins support Font Awesome icons. In plugin settings, look for “Icon” options next to each tab title field. Select an icon from the library or upload a custom SVG image.
Why are my tabs not showing on the published page?
Common causes: plugin not activated, shortcode ID mismatch, caching issues, or JavaScript conflicts. Clear your cache first. Check browser console for errors. Verify the shortcode matches your published tab group exactly.
Can I nest tabs inside other tabs?
Some plugins support nested tabs or multilevel tabs. Smart Tabs Pro and Starter Templates offer this feature. Standard free plugins typically do not support nesting. Check plugin documentation before purchasing.
Do tabs affect SEO and page load speed?
Tabs can improve SEO by reducing bounce rates and keeping visitors engaged. However, heavy plugins slow page speed. Choose lightweight plugins. Google indexes tab content normally since it exists in the HTML source code.
How do I link directly to a specific tab from another page?
Use anchor links with tab IDs. Most plugins generate unique IDs for each tab. Add #tab-id to your URL (example: yoursite.com/page/#tab-2). Some plugins require enabling “Deep linking” or “Anchor links” in settings first.
Conclusion
You now know how to add tabs in WordPress using four different methods.
Gutenberg blocks work best for blog posts. Page builders handle complex layouts. Shortcode plugins fit widget areas and template files.
Pick one method and stick with it. Mixing multiple tab plugins creates conflicts and slows your site.
Always test on mobile. A mobile-first design approach means your tabs should convert to accordion format on smaller screens.
Start with a free plugin like Kadence Blocks or Tabs Responsive. Upgrade to premium only if you need nested tabs, custom icons, or WooCommerce product tabs.
Good web design principles apply here: keep tab labels short, limit tabs to 5-7 per group, and ensure each tab serves a clear purpose.
Your visitors will thank you for the organized, scannable content.
