wordpress tabs

How to Add WordPress Tabs to Organize Related Content Smartly

 |  | 7 Minutes Read | 2114 Views

Do you want to organize your closely related content in tabs to save space and make it easier and faster for your site visitors to find their desired piece of content? WordPress tabs can be your best choice to add more information in a single place. Moreover, your visitors can see the related content seamlessly without scrolling down or going to other pages.

In this blog, I’ll show you how to add tabs on your WordPress site to organize related content easily and smartly.

4 easy steps to add WordPress Tabs 

Follow these simple steps to add WordPress tabs in minutes. Moreover, it doesn’t require any coding knowledge.

Step 1: Install and activate WP Tabs

Unfortunately, WordPress doesn’t offer to add tabs by default. So, you must install and activate a good tab plugin that helps you add tabs seamlessly without writing codes. 

However, a good plugin doesn’t mean only offering tons of features but also being well-coded, updated with the latest web technologies, light-weight, slick, fast, and most importantly, easy to use. Considering these facts, I prefer WP Tabs to easily create responsive tabs in WordPress. Undoubtedly, it can be the best choice for you too. 

Let’s install and activate WP Tabs. 

First, click WP Tabs to download it. After that, Open your WordPress dashboard in a new tab and follow the simple instructions below. 

Install WP Tabs
Install WP Tabs
  1. Click Plugins at your WordPress dashboard admin sidebar.
  2. Click Add New under the Plugins.
  3. Click Upload Plugin.
  4. Click Choose File.
  5. Select the wp-expand-tabs-free zip file. If you don’t find it, please click here and then click Downloads again. Found it? Great!
  6. Click Open
  7. Click Install Now.
Activate WP Tabs
Activate WP Tabs

8. Finally, click Activate Plugin to have the WP Tabs on your WordPress dashboard admin sidebar.

Step 2: Add tab titles and content

Once you install and activate WP Tabs, it must be on your WordPress admin sidebar, as seen in the image below.

Add a new WordPress tab
Add a new WordPress tab
  1. First, click WP Tabs.
  2. Click Add New.
  3. Give your tabs a title. 
  4. Select Content.
  5. Click Add New Tab. Once you click it, it expands two text fields. The first field is for a tab title, and the second is for its description. You can see them below. 
Add WordPress tab titles and content
Add WordPress tab titles and content
  1. Write a title for your first tab. 
  2. Write the tabbed content of your first tab. 
  3. Click Add New Tab to add a new one. Thus, you can add as many tabs as you want. 

Step 3: Design your WordPress tabs and tabbed content

After you add all your tab titles and tabbed content, it’s time to dive into designing your tab bar and tabbed content. With the robust features of WP Tabs, you can create your WordPress tabs exactly how you want. 

Design tabs and tabbed content in WordPress
Design tabs and tabbed content in WordPress
  1. First, select the tab named TABS SETTINGS
  2. Select the Horizontal layout to display your tabs horizontally. 
  3. There are three tabs in this tab bar. Each tab has plenty of design features. With them, you can design your tab bar and tabbed content how you want. So, explore them individually and try them out as per your needs.
  4. Design is an iterative process. So, you can see the Preview by clicking the SHOW PREVIEW button after applying some design features, and you can go back to revamp it if needed. In this way, you can perfectly make your tab bar and tabbed content how it should be. 
  5. After you design your tabs perfectly, hit the Publish or Update button. 

You can see some demos or watch the following tutorial to get more ideas about designing WordPress tabbed content.

Step 4: Publish your WordPress tabs

After you design your WordPress tabs how they should be, it’s time to hit the publish button. 

WP tabs Gutenberg block
Find the WP tabs Gutenberg block
Publish WordPress tabs
Publish WordPress tabs
  1. First, click (the plus icon). 
  2. Next, type WP Tabs in the search bar. 
  3. Click the WP Tabs Gutenberg block. 
  4. Click the dropdown. It will show the list of tab group titles (tab group shortcodes) you’ve created. 
  5. Select the title you want to publish. 
  6. Finally, hit the Publish or Update button. 

Great! You have done it. 

Here is how WordPress tabs look.

WordPress tabbed content example
WordPress tabbed content example

Best Practices in tab design

Follow these best practices in WooCommerce and WordPress tabs design and make the most of them. 

Write short tab labels 

Tab labels should be concise and clear. Ideally, they should not be more than two words.

tab label design
Concise tab labels

Avoid ALL CAPS

Use title style capitalization for tab labels. ALL CAPITALS is rarely a good option because it’s harder to read.

Use title case in WordPress tabs

Write tab labels in plain language

Write tab labels in very common language so it sounds usual to customers.

Use plain language in tabs

Use highly readable fonts

Use the highly readable fonts that users can understand easily.

Use readable fonts

Stick to only one row of tabs 

Amazon popularized tabs first in 1998. 

However, it started using huge tabs to show tons of product categories. 

amazon old home page
Old Amazon home page

Jacob Nielsen said, “It’s a misuse of tabs.” Then, Amazon changed its design in 2007.

In essence, multiple tab rows makes it hard to relate the tab with its content.

Therefore, multiple tab rows is not a good idea.

multiple tab rows
Multiple tab rows

However, what to do when it’s your crying need?

There are two options you can choose from: 

1. A vertical tab bar.

vertical tabs
vertical tab bar

2. A scrollable horizontal tab bar. 

scrollable tab bar
scrollable tab bar

Use right and left arrows to make the visitors understand that there are more tabs to scroll. 

Display tabs in a good order

Arrange tab labels in an order that makes sense for your users.

ordering tabs properly

Highlight the selected tab

Make the currently selected tab stand out from others. As a result, visitors can easily relate the tab with its content.

Highlight the selected tab
Highlight the selected tab

Keep unselected tabs visible

Unselected WooCommerce and WordPress tabs should be clearly visible so that visitors can see them and click them to see the content.

keep unselected tabs visible

Connect the current tab to the content area

Make the currently selected tab connected to the content area so that users can easily relate the tab with the content.

Connect the selected tab to the content area

Make tabs interactive

When a visitor hovers over a tab, it should interact with an effect or a slight change in color or size.   

Make tabs interactive

Ensure instant response 

Tabs are used to let users find the content in no time with a better user experience. Regarding filter tabs, it could be achieved by using the AJAX load method to display content instantly. 

Allow users to navigate WordPress tabs by clicking only

Although visitors can move from one tab to another faster than they would if they had to move by clicking the tabs, using the cursor location to open and close tabs can be a poor user experience.

open tabs with click only

Equal spaces between tabs

Maintain equal spaces between WooCommerce and WordPress tabs so that they look consistent.

Equal spaces in tabs
Equal spaces in tabs

Equal paddings for all tabs 

Use equal paddings for all tabs to make the tab bar visually perfect.

Equal padding in tabs
Equal padding in tabs

Nested Tabs

If you need to use nested tabs to display subcategories of the content, you should use different styles for them. 

different tab styles
different tab styles

Or, you can distribute the content area to the subcategories and show them along with content at a time. 

multiple content sections
multiple content sections

Alternatively, you can use accordions to show the subcategories smartly. 

accordion instead of nested tabs
accordion instead of nested tabs

You can use Easy Accordion to organize content with beautiful accordions in minutes 
without writing code.   

Exciting News! You will find most of the designs above done by default in WP Tabs settings. It means WP Tabs saves your huge valuable time. Save time and enjoy your life.

Final notes

Adding WordPress tabs is an easy and space-saving way to display your closely related content. Moreover, it improves your site’s user experience with better interactivity. You have to follow only four easy steps to get it done for your website.

So, let’s add WooCommerce and WordPress tabs to your website now.

Thanks for reading. We highly appreciate your comments and always love to respond to them promptly.

If you find this blog helpful, please share it with your friends and followers on social media.

Written by

Manir Husain is a creative Content Writer at ShapedPlugin, LLC. He loves to write articles on WordPress products specially. In his free time, he plays table tennis and spends time with family.

Leave a comment