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

The post Why Using Tabs Is Such A Great Idea And How To Create Them In WordPress appeared first on Elegant Themes Blog.