Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Tabbed Content in WordPress Posts and Pages

Do you want to divide your posts into tabs to save space and make it easier for users to find what they’re looking for?

Adding tabbed content helps you add more information about your products and services. It also allows users to find all the details in a single place instead of going to a different page.

In this article, we will show you how to add tabbed content to WordPress posts and pages.

Add tabbed content in WordPress posts and pages

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 preview

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.

SeedProd license key

Next, you can head to SeedProd » Landing Pages from your WordPress admin panel.

After that, simply click the ‘Create New Landing Page’ button.

Add a New SeedProd Landing Page

From here, SeedProd will show you multiple landing page templates to choose from.

Go ahead and select a template that you’d like to use. Just hover over the template and click the orange tick mark icon.

Select a landing page template

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.

Enter a name for your page

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.

Add tabs block to the 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.

Add new items to tab block

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.

Add content and change tab label

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.

Edit advanced settings for tab block

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.

Publish your tabbed content page

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 WordPress page in action.

Tabbed content landing page preview

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.

Enter a name for your tab

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.

Edit tabs settings and add details

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.

Edit tabs settings and add details

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.

Publish your tabs

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 tabs 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.

Find ID number for tabbed content

Next, you just need to either add a new post or edit an existing one.

When you’re in the content editor, go ahead and add a shortcode block to enter the shortcode.

Add a shortcode block

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.

Tabbed content plugin preview

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 how to choose the best web design software.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

31 CommentsLeave a Reply

  1. 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?

  2. 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

  3. 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?

  4. How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me

  5. 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 …

  6. 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

  7. 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.

      • 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.

  8. 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!

  9. 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?

  10. 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.

  11. 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.

  12. 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!

  13. 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.

  14. 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.

  15. Is the content in the tabs searchable or does the short code prevent the content from being searched?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.