When building a WordPress site, especially one that contains a lot of content, you might get overwhelmed with the presentation aspect. How can you display all of this content without bogging down site visitors? How can you maintain a cohesive and appealing aesthetic while including all the information you need to express?
It’s a balance act, to be certain. Honestly, it goes back to the age old fight between form and function. You need your site to perform in a certain way but you don’t want to sacrifice design. You want to include a specific feature but doing so could throw off your layout.
And look, I get it. In fact, I’ve been there. I’ve struggled many times to put together a portfolio site, simply because I had too much information to get across. Time and time again, I perceived I didn’t have enough space to convey all the details I wanted to get out there. Well, not without sending my site visitors down a rabbit hole of never ending links, that is.
So what’s the solution?
There are probably many. For instance, you could ask yourself if you really need all that content in the first place. And you could think about how you can distill your content into smaller chunks. That whole “less is more” mentality. But I’m not going to bother with that aspect today. I’m going to assume every last tidbit you want to include is necessary. And with that in mind, I can’t think of a better solution to the “too much content problem” than to use tabs.
What Are Tabs?
Come on now, you know what tabs are. Like tabs in a binder—those colorful bits of plastic that stick out from a notebook that allow you to easily skip to the section or chapter you want. Or if you want a more modern reference, think of tabs in a browser. They make it easy to skip from one website to the next without having to close anything or navigate away from a page you want to keep open, right?
Well, that same principle can be applied to your website. In WordPress, you can easily add tabs to different pages and posts to make organizing and displaying your content more straightforward and intuitive for visitors.
As might’ve guessed, there’s no need to code tabs from scratch here. There are a ton of plugins that offer this feature to save you some time. Some are barebones simple while others offer a whole world of features. What direction you go in is up to you, of course. I just hope you find this compilation useful!
Elegant Themes Customers Are In Luck!
Using the themes and plugins available from our own selection of products provides several solutions for creating tabs. I will touch on these briefly before moving on to various third party solutions for those that are not members here at Elegant Themes.
Building Tabs With Divi
Our Divi theme ships with a great tabs module right off the bat. This module can be used to create and place tabs anywhere on the page using the Divi Builder. If you are an Elegant Themes customer and haven’t given Divi a try, then you are missing out! We already have a full video tutorial on how to use the tabs module, so I won’t go into detail here.
Using Our Elegant Shortcodes
All of the themes here at Elegant Themes come with a variety of shortcodes, including a tabs shortcode! You can also use our Shortcode Plugin to combine these shortcodes with themes from outside our collection. A full list of available shortcodes are their markup can be found here. You can also watch our instructional video on the member documentation page.
The Elegant Builder Plugin
Our builder plugin also comes with a tabs module, allowing you to visually construct tabs within any theme. If you are looking for a drag and drop solution similar to Divi, but you are using a different theme, then our builder plugin is a great option.
Easy Responsive Tabs
The Easy Responsive Tabs plugin is a favorite among many developers, and for good reason. It’s bootstrap 3.0 compatible and works by adding simple TinyMCE buttons to the post editor. Then, all you have to do is click the appropriate icon in the editor to insert responsive tabs into your post or page.
You can toggle the responsiveness on and off (though I can’t imagine why you’d want it off) and customize the CSS so the tabs match your theme perfectly. Built-in controls let you set the tab colors—including the headers and content—as well as the default tab a page should load in full view. The ability to select from top and bottom tabs rounds out the feature set here.
Post UI Tabs
Another free plugin you might want to try out is Post UI Tabs. You don’t get much simpler or more straightforward than this. After installation, you can easily insert jQuery tabs into your posts and pages using shortcodes. It comes equipped with 24 different UI themes so you’re certain to find something that suits your site. And even if you don’t you can configure it however you want by creating a custom stylesheet.
Tabby Responsive Tabs
Another free choice that has attracted the attention of many developers is the Tabby Responsive Tabs plugin. It relies on jQuery as many tab plugins do but does enough things differently to make it notable. For instance, you can create a set of horizontal tabs to display in a page or post and they will automatically switch to an accordion view on smaller screens. You can insert more than one tab set on a page, too.
It also complies with accessibility standards by using Aria attributes and roles. Additionally, the content within tabs can be accessed from the keyboard alone. There’s an add-on called Tabby Responsive Tabs Customizer that enables a settings panel for your tabs. You can use default styles or select from several of the provided presets. Or, you can set custom colors if you wish. Another cool feature the add-on offers is the ability to add icon files to your tab titles.
The add-on will set you back about $25 for a single site license and about $124 to use it on unlimited sites.
WordPress Post Tabs
Now here’s a full tabs solution for you. WordPress Post Tabs does everything you could ever want a tab plugin to do for your site and then some. I’m not needlessly talking it up, either. This plugin can literally create just about any kind of tab you can imagine. It seamlessly integrates with whatever theme you’re currently using to make tabs that look like they’ve always been there. And that’s sort of the whole point, isn’t it?
The free version of the plugin comes with 3 styles, next/previous navigation links, a “quicktag” for adding tabs to your content, and the ability to create an unlimited number of tab sets to a single post or page. It also includes a custom style box for adding whatever CSS you’d like. Plus, you can add videos, images, and tables within tabs.
The Pro version comes with quite a few more features that make this offering from TabberVilla noteworthy. Premium features include 12 preset styles, a style editor integrated into admin, more quick tag features, and a widget placeholder for displaying Related Posts, Popular Posts, and any other widget within tabs.
Other features include nested tabs, linkable tabs, the ability to add images next to tab titles, smooth scrolling, and superior support from the plugin development team. And since you can implement it all using shortcodes, I’d say this plugin is a valuable tool to have in your developer’s toolbox. The premium version currently sells for $9 for a single site license and $25 for multisite.
WP UI – Tabs, Accordions, Sliders
WP UI – Tabs, Accordions, Sliders is another freemium offering that is worth a look. As its name suggests, this plugin is all about improving your site’s user interface so visitors don’t get bogged down by clutter. You want them to find the information they’re looking for right away and this plugin makes that possible. You actually have several options to choose from for organizing your content, including tabs, accordions, spoilers, and dialogs. It comes with short codes for easy implementation, too.
It’s powered by jQuery and comes with 15 different styles to choose from. You can set different styles on each page, too. Plus, you can create custom styles and themes if the need arises. You can even display posts and feeds as tabs if you want using a selection of included shortcodes. The included documentation makes this plugin easy to figure out, too. And there’s a premium version called Accordions Plus if you want to take your tabs and accordions to the next level.
TAB SLIDE
If you need a simple tab solution for your site, TAB SLIDE might just be it. This plugin makes it easy to display a lot of content in a small space. Add widgets, RSS feeds, videos, images, posts, menus, sign-ups forms, and more all within tabs. After installation, a settings panel will appear in the Dashboard. You can modify the size of your tabs, page sources, opacity, positioning, and more.
WP Tab Widget
Another free plugin I’m fond of is called WP Tab Widget. It features a lazy loading effect, which make the tabs particularly attractive. It was originally designed as a premium plugin but is now available for free, which I for one certainly can’t argue with. The lazy load effect is made possible thanks to AJAX. That means your site will load fast, even if you have a ton of content tucked into your tabs. You can insert tabbed content into a widget in your site’s sidebar, too, to increase the prominence of content you want visitors to pay particular attention to.
Other features include a built-in pagination system and full control over the number of tabs and posts within the tabs to be displayed. Did I also mention it’s responsive? So you know it’s going to look nice on any device. You can also select between 3 different styles and display it anywhere a widget can appear.
SlideTabs
If you’re looking for another premium plugin to try out, might I suggest SlideTabs? With this plugin you can display as many tabs as you want thanks to directional buttons. That way, your site visitors can click through a series of tabs, even if they extend beyond the typical space allotted for them. It’s also touchscreen enabled, so users can swipe between tabs easily.
You can choose from several different layouts and customize them with CSS, plus you can insert just about any kind of content you want within tabs. Why stick to plain text when you can include photos, videos, maps, forms, image sliders, galleries, and more. You can even display your posts within tabs if you want. It uses AJAX, too, so you know it won’t bog down your site in any way.
The plugin also ensures your content is displayed within semantic HTML, which means it’s SEO-friendly and supported by most browsers. It includes external linking support, API and callback functions, as well as the ability to autoplay tabs. With multiple animation settings, loop sliding, an HTML and a visual editor, shortcodes, and tab previews, this plugin seriously leaves no stone unturned in terms of catering to your every possible tab-related need. For a single site license, you can expect to pay $29. Multisite sets you back $59 while an unlimited license costs $189.
Mate Tabs Reload
The last plugin I’m going to talk about here today is Mate Tabs Reload. It’s another premium option but it brings a unique spin to the table so I just had to include it. It combines the features of tab and accordion plugins into one convenient interface. It’s fully responsive, retina-ready, and supports hover effects and click events, making for an interactive experience for your site visitors.
You can also make it so tabs open outside links. It supports shortcodes, includes a color picker and auto scrolling, and works on most browsers. You can get a single site license of Mate Tabs Reload for $14 and an extended license for $70. An unlimited license doesn’t appear to be offered at this point in time.
Wrapping Up
I barely scratched the surface of the available tab plugins out there with this article. Seriously, there are more than you can even imagine! And while that might be a bit overwhelming when you’re trying to make a decision, I think it’s a good thing. After all, it’s better to have too many options than not enough, right? Plus, tabs are so useful, it’s worth spending some time pondering which solution best suits your needs or the needs of your clients.
Do you use any of the plugins i mentioned here? What has your experience been so far? Are you pleased or do you think there are features missing that, if added, could improve function? And of course, please let me know if I left out your favorite WordPress tab plugin. Who knows, I might have to do a second installment one day!
Article thumbnail image by Anastasia_B / shutterstock.com
Is it possible to do a page search and open the tab where the search content is viewed?
Hi, can you recommend a solution for a tabbed search box where the user’s input is stored in the input box from tab to tab? Say someone wants to search for documentation, search videos, search archives, etc., they should not have to input their query each time but it should be remembered. Do I have to break out my ol’ JavaScript Bible from years ago or is there a WordPress plugin to handle this seemingly common problem? Thank you! Emily Tuck
Please reupload your images, its so annoying trying to understand whats happening. Thanks =)
wow, this is amazing, thank you. i will try tabs plugin for my site…
We have used SlideTabs and also Tabby, both work great too!
Is there a solution in any of those WP plugins 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).
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!
I’ve one question/belief to validate.
As far as I know, Google has publicly stated they are ignoring content that is hidden behind tabs or accordions. Or at least in many cases they consider this content lower in value because it is not presented to the user on page load. This is painfully pitiful because tabs and accordions make so much sense from a design and UX perspective. Can any of you guys with more understanding of how SEO and Tabbed content functions validate this belief? If it is indeed true, is there any sort of workaround? Because I just created a website for a client that uses a lot of tabbed/accordion content and I’d loathe change all of that just because Google plays God! (not like I’ll have a choice though)
Hey ET please answer my support ticket about your Tabs Module and how I can link to a specific tab with an anchor or something!
Thanks
Joe
Interesting article and enjoyed reading. As you said that if there is lots of content on the page then there is always one question occurs that how we will present this info to users in a way where the site should not look like News Paper. Most of the times I suggest tabs to my clients if possible and if it is related to landing page of the site, it’s not only about good look and feel but also about reducing bounce rate of the site. I’ve used WP UI and I found it very useful. Thank you for sharing.
Any options for accordions within tabs?
Personally, I find that adding content to a page like this is bad form. Divi and countless others like it store the content on a per page basis which doesn’t promote re-use. If a user decides to later to place the content somewhere else as well, they’ll have to redo it. The short-terms gains are nice but the long term effects are not.
Not that it’s hard to do multiple times but it’s somewhat ill conceived IMO.There should be a central place to store the content and the builder elements should merely reference it. When done this way, if you need to make an edit then there’s also no need to edit multiple copies since there’s only one.
The reason I often here for why authors do things this way is because the they’ve learned the bad practice from someone else. Monkey see, monkey do. Most people wouldn’t know any better. Doing it the right way should be a benefit of buying from someone else. 🙂
Hi Brenda,
I am using Tablepress http://tablepress.org/
Easy to use and formatting tables on contents.
Best regards.
I make use of Tabs for on-line help. However I often want to email a direct link to a specific section in one of the tabs, using anchors like . Althought the anchors work perfectly on pages without tabs, they don’t on tabbed content. It’s always the first tab that opens. Any tips and tricks how to make anchors work with tabs.
I am using the Elegant Products Theme.
I too am searching for this solution. Any tips would be great.
I’m using Divi, and would like to link to a particular tab from the homepage slider.
I have submitted a ticket on this too!~
Nice list. I love tabs – I use them on several sites.
One problem with tabs is since it’s usually associated with being “modern” or whatever, I’ve seen people use these just so they can say they’re “using tabs on their site” even though it’s not appropriate for their content.
You guys are awesome, read my mind on exactly this subject over the past two days.
LOVE this theme, best I’ve used as a newbie since 2008 when I started. Unquestionably the best. I’d never applaud anyone if it wasn’t sincere, this really is just such an overdue theme with the drag/drop interface (Divi), awesome.
PROBLEM: Please do video of these tutorials next time! Some of us learn better by example and verbal explanation. Thanks. 🙂
But do they work in a responsive layout? If not: forget about them.
I have a question … does search engines such as Google, Bing etc ‘see’ all the content from all tab’s even though you can’t see it all?
Have always wondered that …
Search engines can see everything on the page, even if it’s being hidden with CSS.
After having done a quick and dirty test (see reply to Keith’s comment) it looks like search engines will see the text in the tabs along with the tab titles.
Might be an interesting experiment to make a post or a page using tabs in the content, wait ’til Google scans it again (if you don’t want to burn a rescan with Webmaster tools), then check and see what it displays in the search results. Presuming you use SEO settings or perhaps Yoast, you can control the excerpt. But do you want too….
Just musings.
..oh but you can Keith 😉
The ET Tabs button is in between the ET Button & ET Author Bio on the Post Toolbar
Hi Brenda,
Excellent article, I found it very useful.
Best regards!
Tabs no doubt are awesome way to organize your content, without making to too long, as most users don’t like to scroll down and down. You can also use different variations on same page instead of using pagination in your article.
I am personally using Mate Tabs, and I Love This.
I recently used the tab module in divi for a FAQS section on http://wphero.co.za, I think the site came out well
Hi Brenda
Looks as though I’m in luck – I’m a Divi user so I can use the tabs module.
Can’t use them in posts though and it would be a crying shame to use a plugin just to put them on posts.
I did think that as Divi evolved the page modules would start to be introduced into posts… just a thought Divi dev team.
At first read of your comment, I thought you might be missing the fact that there is an ET Tab icon in the Tiny MCE toolbar. So I tried it on a test site and found that while the tabs work in a post without having to use a separate plugin, it does show up weird on the blog page. All the short codes are stripped out and the text of the tabs as well as the titles are jammed up together in the excerpts.
Really need something better – not sure how to do it without a plugin.
I completely agree. I’d love to see the modules available to use in posts without having to use the full-blown page-builder.
That would be huge for me!