One of our readers recently asked us how to divide posts into tabs to save space and make it easier for users to find what they’re looking for.
At WPBeginner, we’ve helped many website owners enhance their content organization with tabbed layouts.
Adding tabbed content allows you to pack more information about your products and services into a single page, improving user experience and keeping all the details in one convenient place. As a result, you’ll reduce page clutter and make navigation easier for visitors.
In this article, we’ll show you how to add tabbed content to your WordPress posts and pages, ensuring your visitors can easily find what they need.
When Should You Use Tabbed Content in WordPress?
Using tabs allows you to add more details in a small amount of space or split large chunks of content for better organization and user experience.
Let’s say you have an online store. You can add tabs for product descriptions, reviews, technical specifications, and more. This separation helps provide all the details for your customers in one place and makes the page interactive.
Similarly, you can see tabbed content on WordPress.org plugin pages. The page is divided into different sections using tabs like details, reviews, installation, support, and development information.
Tabbed content helps keep people on your WordPress website. You don’t have to send people to another page to get all the details they need about your products and services.
That said, let’s see how you can add tabbed content to WordPress pages and posts.
Here are the 2 methods we’ll use to get this done:
Method 1: Adding Tabbed Content Using a Landing Page Builder
The best way to add tabbed content in WordPress is using a SeedProd. It’s the best WordPress landing page and website builder. SeedProd is beginner-friendly and comes with a drag-and-drop builder, pre-made templates, and multiple customization options.
For this tutorial, we’ll use the SeedProd Pro license because it includes advanced blocks to add tabbed content. There is also a SeedProd Lite version you can use for free.
First, you’ll need to install and activate the SeedProd plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, you will be redirected to the SeedProd welcome screen in your WordPress dashboard. Go ahead and enter your license key, which you can find in your SeedProd account area.
Next, you can head to SeedProd » Landing Pages from your WordPress admin panel.
After that, simply click the ‘Create New Landing Page’ button.
From here, SeedProd will show you multiple landing page templates from which to choose.
Go ahead and select a template that you’d like to use. Just hover over the template and click the orange tick mark icon.
A popup window will now open where you’ll need to enter a title for your page in the ‘Page Name’ field, and a permalink slug under ‘Page URL.’
After that, simply click the ‘Save and Start Editing the Page’ button.
This will launch the SeedProd drag-and-drop builder. You can now add different blocks to your template and edit existing elements.
To add tabbed content, simply drag the ‘Tabs’ block under the Advanced section and drop it onto the page template.
Next, you can customize the tab block in SeedProd.
For instance, you can click the ‘Add New Item’ button to add as many tabs as you want. Plus, there are options to edit the font size, space between text, and alignment for the content in each tab.
Next, you can click on any tab to edit it further and add details.
For instance, you can change the title for each tab, add content, and change the tab icon.
Besides that, SeedProd also provides advanced customization options.
Simply click the ‘Advanced’ tab in the menu on your left. Here, you can change the tab layout, typography, color, background color, borders, and more.
When you’ve made changes to the tab block and customized your landing page, don’t forget to click the green ‘Save’ button at the top.
After that, you can head to the ‘Page Settings’ tab.
Next, you can click the ‘Page Status’ toggle and change the status from Draft to Publish.
You can click the ‘Save’ button to store your changes and close the page builder.
Now, simply visit your website to see the tabbed content on the WordPress page in action.
Method 2: Adding Tabbed Content Using a WordPress Plugin
If you don’t want to use a landing page builder, then you can use a dedicated WordPress plugin to add tabbed content to your posts and pages.
First, you’ll need to install and activate the Tabs Responsive plugin. For more details, please see our guide on how to install a WordPress plugin.
Upon activation, you can go to Tabs Responsive » Add New Tabs from your WordPress dashboard and start by entering a name for your tabs.
Next, you can scroll down to add as many tabs as you want by clicking the red ‘Add New Tabs’ button.
Plus, you can edit each tab individually by changing its title, adding a description, using a different tab icon, and editing the icon location.
Besides that, the plugin also offers different ‘Tabs Settings’ in the menu on your right.
For instance, you can choose whether to display tabs title, select different options for title and icon, change icon position, show tabs border, select text color, and more.
When you’ve made the changes, you can now use the tabs in any blog post or page using the shortcode generated by the plugin.
Simply click the ‘Publish’ button.
Next, you can add the tabs on any page or post using the [TABS_R id=130] shortcode. Just make sure to replace the ID number in the shortcode with your tab ID number.
You can easily find the tab ID and shortcode by going to Tabs Responsive » All tabs and copying the code under the Tabs Shortcode column.
Next, you just need to either add a new post or edit an existing one.
When you’re in the Gutenberg block editor, go ahead and add a shortcode block to enter the shortcode.
After that, you can preview your blog post or page. If everything checks out, you can click the ‘Publish’ or ‘Update’ button to save the tabs in your post.
Now, visit your website to see the tabbed content in action.
We hope this article helped you learn how to add tabbed content to WordPress posts and pages. You can also see our guide on WooCommerce made simple and our expert list of the best WordPress plugins for business websites.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
This sounds like a great option to better personalize product review articles. Users would be able to easily switch between the product rating (review), detailed product information, or a tab offering them places to buy it. As a review plugin, this solution seems truly excellent, and thanks for the great tip.
Ahmed Abo Rwash
It’s excellent, professional, and valuable. Thank you
WPBeginner Support
You’re welcome!
Admin
Alexander
Hi, I need to display posts as tabs, I need the post title to be the tab label and the post content to be the tab content, any recommendations on how to do it?
WPBeginner Support
For what it sounds like you’re wanting, you would want to go through some of the options from our guide below:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Admin
msiddiqui
very simply explain u r no 1 in WordPress
WPBeginner Support
Glad you like our content
Admin
navya
I am beginner in wp.Can anyone help me to solve my problem?
in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance
Dan Acton
I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?
Andi Sutrisnya
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany
thanks bro this helpful
Lena
Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
I’m planning a Content sharing platform …
David
Hi,
I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
Thanks for any help
David
Soni
This is a helpful article.
I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
Or you use another plugin to create that tabbed content?
I think that tab is great.
Ssekito
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support
Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Admin
Ssekito
Thanks for the reply!
I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.
I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!
Please guide me this.
Thanks.
Sase Antic
Helpful info on tabs in WordPress!
However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?
For example: I need one “tabs group” consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
Is this possible?
Otherwise, it’s a lot of work to add the same “tabs group” to all pages and posts one by one.
Thanks in advance for the reply!
uvie
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony
This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?
Sameer
Hello,
Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.
WPBeginner Support
Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.
Admin
Weiwei
if in the content , there are more pages, what should I do?
WPBeginner Staff
If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.
Shah
I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!
Heather Lewis
This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.
vinayak
hi and thanks for providing a post where i could add tabbed content in my blog.
i was looking for a plugin that could do this.
Amjaru
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff
It will still be searchable.
Knitwit23
can you show us a post where this is in use?
KonaGirl
Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?
WPBeginner Staff
It is used inside posts and pages to display content in tabs.
Sally Bennett
It would be very useful if you explained what ‘tabs’ are to a complete novice
WPBeginner Staff
Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.