SeedProd Logo

Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create Tabs in WordPress

How to Create Tabs in WordPress for Stunning Tabbed Content 

Want to learn how to create tabs in WordPress?

Adding tabs to your WordPress website is an excellent way to organize different types of content and save space on posts and pages.

In this article, we’ll show you how to add tabs in WordPress step-by-step.

What Are Tabs in WordPress?

Tabs are a type of navigation system that organizes content, making it easier for visitors to browse your website. You can add tabs to posts and pages or use a tabs widget for displaying tabbed content in your WordPress sidebar and widget areas.

Why Do You Need Tabbed WordPress Content?

Besides sorting content, tabs make it much easier to keep your website visitors active and engaged. Because tabs group content topics together on one page, users won’t need to click away to other pages, which is ideal for shorter attention spans.

For example, WordPress.org uses tabs on its plugins page to display information like details, reviews, support, and development.

Tabbed content examples on WordPress.org

Some other ways to use tabs include:

  • In product descriptions to show different product specifications
  • In your blog sidebar to filter categories
  • On contact pages to sort contact information

Pro Tip: Tabs shouldn’t be confused with accordions. Users click tabs to switch information, whereas accordions expand to reveal information.

Now you know more about how tabs work and why you need them, let’s look at how to add tabs to your WordPress site.

Below we’ll share 2 ways to add tabs to WordPress. First, we’ll use a page builder, then show you how to create tabs with a WordPress plugin.

Let’s get started.

Method 1: How to Make Tabs in WordPress with a Page Builder

For the first method, we’ll use SeedProd, the best WordPress website builder, to add tabbed content to your website.

SeedProd WordPress website builder

SeedProd is a powerful drag-and-drop page builder that lets you create flexible WordPress layouts without writing code. With its professional website kits, landing page templates, and live visual editor, you can customize every part of your site and see the changes in real-time.

You can also use SeedProd to:

This page builder also includes highly customizable blocks for enhancing your WordPress design. For example, with the Tabs block, which we’ll use in this guide, you can add multiple tabs to pages with a few clicks.

Follow the steps below to create tabs in WordPress with SeedProd.

Video Tutorial

If you prefer, you can follow the written steps below.

Step 1. Install SeedProd Website Builder

First, you’ll need to head to the SeedProd website and download the plugin. SeedProd does have a free version; however, you’ll need a premium plan to unlock tabs and other blocks.

Once you’ve downloaded the plugin, you’ll need to install and activate it on your WordPress site. You can follow these instructions on installing a WordPress plugin if you’ve never done it before.

After activating the plugin, navigate to SeedProd » Settings and enter your plugin license key.

enter your license key

You can find your SeedProd license key in your account dashboard under the Downloads section.

Find your SeedProd license key

Remember to click the Verify Key button before heading to the next step.

Step 2. Create a WordPress Theme or Landing Page

There are 2 ways to use SeedProd to add tabs to your website:

  1. Use the Theme Builder to create a custom WordPress theme, and add tabs to any WordPress page.
  2. Create a standalone landing page with tabbed content using the drag-and-drop page builder.

For this guide, we’ll use the first option because it lets you add tabs to any page you like, including your homepage, WordPress sidebar, header, footer, and anywhere else in your theme.

You can follow this step-by-step guide to create a WordPress theme with SeedProd, then come back here for instructions on adding tabs to your site.

Step 3. Add Tabs to Your WordPress Pages

After building your WordPress theme, you’ll need to decide which pages should have tabbed content. For instance, you could add tabs to your contact page to show different types of contact information or in a custom sidebar for different post categories.

In this example, we’ll add tabs to the about page to show more details, like job vacancies, editorial guidelines, and more.

To do that, go to Pages » All Pages from your WordPress admin and find the page you’d like to edit.

Since you’re using a SeedProd website kit, content pages like the about, contact, and services pages, are created automatically. To open them in the visual editor, click the Edit with SeedProd link.

Edit with SeedProd

Once your page is open in the page builder, you can use SeedProd’s customization options to make changes. You can click any element to change its contents, colors, styling, and visibility.

SeedProd drag-and-drop builder

It’s also easy to add more elements to your page by dragging them from the blocks panel and dropping them in place. So let’s do that with SeedProd’s tab block.

First, add a new section to the page to “house” your tabbed content. In our case, we’ll duplicate one of the existing sections and drag it to the bottom of the page.

Duplicate a section in SeedProd's page builder

After that, swap out the image with something more relevant and delete any content you no longer need by clicking the trashcan icon.

Delete a block in SeedProd

Now you can look for the Tabs block in the left-hand panel and drag it into the new section on your page.

Drag and drop the SeedProd Tabs block

Clicking the block shows its content settings where you can:

  • Add multiple tabs
  • Show or hide the tab icon
  • Change the font size
  • Increase or decrease the space between tabs
  • Adjust the tab alignment
Tabs block settings

Expanding each tab lets you add a tab title and write your content using a classic editor with ‘what you see is what you get’ (WYSIWYG) settings.

You can also enable a custom icon to add more interest to your tabs and make them stand out. Simply turn the ‘Hide tab icon’ toggle to the ‘Off’ position and choose a custom icon from the Font Awesome library.

SeedProd tab icons

Clicking the Advanced tab lets you choose more customization options, including custom background colors, fonts, borders, spacing, and more.

Advanced tabs settings

You can also display vertical tabs or a horizontal tab set by clicking either layout option.

Vertical and Horizontal tabs in SeedProd

Remember to click the Save button in the top-right corner of the screen to save your changes.

Follow the same steps to add tabs to any other page on your WordPress website, then move on to the next step to make your changes live.

Step 4. Publish Your Tabbed Content

After adding tabs to your various WordPress pages, you’re ready to publish them for your website visitors to see.

To do this, go to the SeedProd » Theme Builder page and switch the ‘Enable SeedProd theme’ toggle to the ‘On’ position.

enable seedprod theme

Now you can preview your pages and see your tabbed content in action.

How to create tabs in WordPress with SeedProd example

Method 2: How to Add Tabs with a WordPress Plugin

The following method is a good alternative if you don’t want to change your WordPress theme or create a landing page. We’ll use the free Tabs Responsive WordPress plugin to add responsive tabs to your WordPress site.

First, you’ll need to install the Tabs Responsive plugin and activate it from your WordPress admin.

Install and activate the Tabs Responsive WordPress plugin

Then, navigate to Tabs Responsive » Add New Tabs and give your tab set a title.

Add new tabs set

From there, you can select the default template, or if you’re using the Pro version, you can choose from 18+ template styles.

The next step is to add your tabs. You can create as many tabs as you like and include:

  • Tab titles
  • Tab descriptions
  • Tab icons
Edit your tabs content

You can also edit the styling of each tab in the right-hand sidebar by choosing custom tab styles, background colors, font colors, and more.

Tab customzation options

When you’re satisfied with your tabs, copy the tabs shortcode and paste it anywhere in your WordPress theme.

Copy the tabs shortcode

For example, you can paste the shortcode into a WordPress post or page like this: 

Add the tabs shortcode to a WordPress post or page

This is how it will look on the front end of your site:

WordPress page tabs example

You can also add the tabs shortcode to a widget-ready area, such as your WordPress sidebar or footer widgets, by pasting the shortcode into a paragraph block.

Paste tabs shortcode in WordPress sidebar

After, you’ll see your tabbed content live in your sidebar areas:

Tabs example in WordPress sidebar

There you have it!

In this tutorial, you’ve learned how to create tabs in WordPress without writing code. Ready to create customizable tabs on your website?

You might also like these other helpful WordPress guides while you’re here:

Thanks for reading. Please follow us on YouTubeTwitter, and Facebook for more helpful content to grow your business.

Get SeedProd

Join Our Newsletter

Subscribers to get Free WordPress Tips and Resources

We do not sell or share your information with anyone.

Let's Connect

Most Popular

Copyright © 2022 SeedProd LLC. SeedProd is a trademark of SeedProd, LLC

PayPal Verified Badge
WPBeginner Verified Badge