We’ve all seen them: those little tabs that show up at the tops of pages. When you click on one of the tabs it brings up new content but it doesn’t move you away from the current page you’re looking at.
You may even see a situation where the tabbed area is filled with other content such as videos, images and text. It’s kind of like having a second little website on your page, since users can click on the tab menu titles, moving from page to page, while still remaining on the same URL.
But how can you use them on your WordPress site? Read on to find out.
Why Would You Ever Consider Adding Tabs to Your WordPress Posts?
The short answer to this is that you save space by consolidating large portions of content on your site. This works particularly well when you don’t want to create a long page and force your users to keep scrolling down to learn more. We’ve all seen the FAQ pages that use accordion-style tabs to reveal new information that was once covered on a single page – using tabs isn’t dissimilar.
What are some other things you can use tabs for?
- Displaying a media library with different categories
- Featuring products (you could have Specs, Features and Review tabs)
- Breaking up course content instead of cluttering a page with a huge list
The options are endless, but the point is to use tabs when you see that the content is too intimidating for the average person to start scrolling down and reading it. If you can picture readers getting lost quickly, consider incorporating tabs.
How Do You Incorporate Tabs on Your WordPress Posts?
Adding tabs to posts is fairly simple. You can often drop a few tabs right in the post and go about your business. However, inserting new content inside those tabs is where the fun part begins.
Step 1: Activate the Proper Plugin
Go to the backend of your WordPress site and click on the Plugins > Add New buttons. Search for the WordPress Post Tabs plugin in the plugin area. Install and activate the plugin.
Step 2: Manage Your Tab Settings Before Implementing Them on Your Site
Go to Settings > WP Post Tabs.
This brings you to the Basic Settings page for the plugin. In theory, you can leave this completely as it is, but I like to change around some of the settings to make my tabs look more customized. I would recommend visiting this area at least once to understand what modification options are available for you. Who knows? You might hate the plugin until you change what the tabs look like.
To start, modify the Skin/Style if you want. I went with the default style, but you can choose from red, gray and simple gray. Pick your favorite, match it to your dashboard skin – you’re the only one who will be seeing it, and you can always change it later, so don’t stress about this one too much.
The Fade Effect option is fun to see the tabs sort of fade out when someone navigates away from them. The other options on this page all have question marks that explain exactly what each one does, so feel free to play around with these however much you want.
I would recommend leaving the Open Tab Links in New Window box unchecked. You may even want to change what the navigation test looks like. They simply show Next >> and << Prev and the default options, but you can punch in anything you desire.
That’s not all for the Settings area. You’ll notice an option for disabling the resources on your posts and pages, but there’s really no reason to touch these settings. However, if you scroll down just a bit you’ll find some powerful settings to make your tabbed posts a little easier to implement.
This basically explains that the plugin provides default shortcodes for dropping tabs and tab groups into your website. Write these down or copy them into a saved file to use for later. There is an easier way than just remembering them, but we’ll cover that a bit later. If you don’t think those default shortcodes are any good, change them to something you can remember a little easier.
Just keep in mind that you need to check the rest of your website to ensure that you weren’t using any of the older tab shortcodes. If you change the shortcodes, the older ones will not show anything until you modify them to reflect the new shortcodes. There’s also a Custom Styles field at the bottom of this Settings page, but we won’t go into that right now. Just remember that if you know CSS you can modify the tabs even further.
Click on the Save Changes button at the bottom of the page to proceed with this process.
Step 3: Drop the Tabs Area Into Your Posts
This is where the true functionality comes into play. Go to Posts > Add New.
Start your post just like you would any other blog post. Fill in the title field and type in whatever description you were thinking about. You can also complete all the other tasks required like checking off a category or typing in tags.
If you go to the top of the WordPress editor you can find the WordPress Post Tabs button, which looks like a little square and a green plus sign. Click on this to start incorporating tabs into your WordPress post.
Enter the tab names, such as Overview, Features and Results. It seems tht you can type in as many tabs as you want. Click on the Insert button once complete.
This automatically creates a shortcode in your WordPress editor without you having to type in anything.
When you select the Preview button, it reveals the different tabs, which you can click on and see how they work in the single post. As you can see, the content is a little bit of text that they place in there for you. In order to change this content you have to go back to the WordPress editor and change what sits between the [wptab name=] and the [/wptab] shortcodes.
Step 4: Drop in Your Favorite Content
Everything flies for the most part when inserting content in your tabs. For example, let’s say you need a video in one of the tabs. Just walk through the normal insertion process for a video, but make sure the cursor is between the specified shortcodes before inserting.
Once you preview the content you should see everything like you would with a regular page or post. Try implementing other content like bold letters, image galleries, bullet points and more.
What If Your WordPress Theme Already Includes Tabs?
If you’re using one of the many WordPress themes that already has a page builder, then you probably already have tabs built-in so you can skip the plugin and start adding tabs right away using your theme. Most page builders include block or page elements for adding tabs, tours and accordions to your posts and pages. All you need to do is insert any of these options as you’re building your page.
For example, our Total WordPress Theme uses the Visual Composer to add styled tabs, tours and accordions to any post or page layout. When creating your custom layout, simply select the module to insert.
Then add your content, images and more to each tab, tour or accordion section. It’s that simple. When you’re done, just save your page and checkout your fully responsive tabs, tours and accordions!
Tabs are the ideal solution for showcasing features and descriptions for products. Think about how almost every e-commerce site displays a tabbed layout for the product pages. For example, you may be shopping for a computer and look at the Description tab, which explains the newest features and how the smallness can help with portability and the bright screen can help with watching videos. Then you may move to the Specs tab to view technical details like dimensions, weight, RAM, and more.
Tabs are for consolidating your information and making it easier for your users to move around, instead of forcing them to scroll for minutes or jump around from page to page. If you have any questions about how to incorporate tabs on your WordPress page, please feel free to share your thoughts in the comments section below!