Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Add Tabs to WordPress Post and Pages

How to Add Tabs to WordPress Post and Pages

WordPress has many additions that boost the flexibility of creating content. Whether it’s typography or graphics, you can add plugins that accentuate your posts and pages quite easily. In fact, you can add tabs to WordPress to give your content a more interactive feel while highlighting specific information.

Tabs are used quite often, especially in eCommerce. When you see a site that separates information about a product on the same page, those are usually tabs. Essentially, you’re increasing the amount of text that can go into a single post or page while keeping the view space relatively small.

In this tutorial, I’ll show you how to add tabbed content in WordPress. It’s a simple procedure that has a lot of possibilities regardless of what kind of a website you’re creating.

What Can You Do with Tabbed Content?

Using tabs gives you the ability to add more details to a topic in a smaller amount of space. You see this a lot in places that offer product descriptions, technical details and user reviews all in one section. The user has control to click into any of the content areas to learn more about the titled tab.

If you’re trying to condense a lot of information into as little of space as possible, tabs are quite useful. For example, let’s say you have five paragraphs on your site and you want to shorten the visual length of the webpage. You could place each of those five paragraphs into their own tabs and greatly shorten the length of the page. That is, as long as it makes sense to put content into the tabs.

Tabbed elements can also be used to display staff members. Since most tabs can handle images, each can have a picture and bio information of people working on specific projects or within the company.

When you add tabs to WordPress, you open a variety of opportunities for improving the layout of your content. And improving the visual appeal of your site is how fans and followers are formed.

Using Plugins to Add Tabs to WordPress

You will need to know how to install plugins to continue this tutorial.

Today, I’m going to feature WordPress Tabs. Its a simple and easy to use plugin that has a few customization settings to help in your site’s design scheme. It provides a shortcode that you can add into any content area in WordPress whether you’re creating a post or a page.

Go to the Plugins area and Install, “WordPress Tabs.” You’ll notice a lot of plugins that are close in name. Make sure you install and activate the correct one.

WordPress Tabs

Go to Settings and click the new tool, “WordPress Tabs Setup.” This will open a section that will let you customize how your tabs appear on the site. It’s beneficial if you know the hexadecimal code of the colors you wish to use.

WordPress Tabs Setup

On the right of this new screen, you’ll see a sample of what the tabs will look like. Using the controls, you can change a lot of how the tabs appear. Colors, font sizes and layout are all available.

If you’re unsure about the hexadecimal code for the colors on your site, click the “” buttons to open a color picker. Most controls on this page will let you pick the color for background and font.

Click the “Save” button on the bottom when you’re done customizing.

Save Custom Tab

Now that we have the tabs ready to use, let’s create a quick one. Go to any existing post or page you want to add tabbed content to. For this tutorial, I’m just making a new post to show how tabs work.

In the content area, type the following shortcode:

[tab:Tab #1]


The text appearing after “tab:” is the title that is shown to visitors. So if you want to use this to show a product description, you would use, “tab:Description” within the brackets.

Type Shortcode

Input content after the tab you wish to show. You can use basic text, some HTML commands or add images. Think of each tab simply adding a new micro-page to your post. Everything in the WordPress editor can be used within the tabbed content.

Tab Content

Create a second tab in the same manner with a different name. In this example, I’m simply adding “Tab #2” to the post.

Create Second Tab

You can create as many tabs as you’d like. When you’re done, input the following shortcode:

[tab:END]


This is capital-sensitive, so you need to make sure you use “END” exactly as shown above.

End Shortcode

Publish or update your post and the tabs will become live. They don’t have a lot of flash and pizzazz, but the tabs do function well in virtually any environment and within most themes.

Live Tabs

Other Tab Plugins to Consider

Tabs are quite a common feature for websites. They can be extremely versatile when delivering information in a limited amount of space. The hardest part is picking a tabbing plugin that fits your aesthetics or layout ideas for the site.

Here are a few more plugins I found that may be worth considering.

Shortcodes Ultimate

Shortcodes Ultimate

Shortcodes Ultimate is an incredibly useful plugin to have installed. Among the 50+ shortcode elements it adds to WordPress is a good tab creator. Although it doesn’t have the customization options that other plugins, it is a simple system and is easy to use. In reality, there are a lot of shortcodes in this plugin that I find quite useful.

Tabby Responsive Tabs

Tabby Responsive Tabs

Tabby Responsive Tabs is a good system for creating tabbed content that is perfect for mobile devices. It has a few options available which allow you to customize the layout. However, you can install its companion plugin “Tabby Responsive Tabs Customiser” for a fee. This addition comes with a variety of tools to help change the layout’s appearance.

Tabs

Tabs

Tabs is a fun plugin as it allows users to input images within the tabbed content. This system may be a bit easier for people to use as it comes with its own builder. In the end, all you need is a single shortcode to show the tabs in a post or page. You’re able to control a variety of features such as colors and alignment with just a few clicks of the mouse.

Custom Product Tabs for WooCommerce

Custom Product Tabs

I figured I should add Custom Product Tabs for WooCommerce as many of you will use your website to make money by selling goods. This is an addition for the popular plugin, “WooCommerce.” Its text editor is capable of handling many elements such as images and HTML, just like the standard text editor in WordPress. This is a great way to add more details surrounding the products you sell.

Adding More to Your Content

Adding tabs to WordPress is just one small part of what you can do to enhance your content. The system is full of plugins which may offer a layer of interaction while improving engagement. All it takes is a bit of patience to scour through the thousands of titles and abilities to find the best for your site.

What kind of content additions have you used in the past? What’s your favorite plugin for content development in WordPress?

Author: Kaumil Patel

Kaumil Patel is the Chief Operating Officer of GreenGeeks and has over 13 years of experience in the web hosting industry working for and owning web hosting companies. Kaumil’s expertise is in marketing, business development, operations, acquisitions and mergers.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.