{"id":126588,"date":"2014-03-05T11:30:00","date_gmt":"2014-03-05T16:30:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=126588"},"modified":"2022-03-02T05:37:17","modified_gmt":"2022-03-02T05:37:17","slug":"free-wordpress-tab-plugins","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/free-wordpress-tab-plugins\/","title":{"rendered":"5 Terrific Free WordPress Tab Plugins"},"content":{"rendered":"<p>Tabbed sections on a website can be very convenient. They allow you to break up a lot of information and put it into one small space. Readers are less overwhelmed that way and therefore more likely to hang around and check out what you have to offer.<\/p>\n<p>The easiest way to get tabbed content in WordPress is with a tabs plugin. Below we will go over the best plugins we found to get your content tabbed up.<\/p>\n<ol>\n<li><a href=\"#ultimate-blocks\">Ultimate Blocks<\/a><\/li>\n<li><a href=\"#tabby\">Tabby Responsive Tabs<\/a><\/li>\n<li><a href=\"#responsive\">Tab Responsive<\/a><\/li>\n<li><a href=\"#tabs\">Tabs<\/a><\/li>\n<li><a href=\"#ultimate\">Tab Ultimate<\/a><\/li>\n<\/ol>\n<h2 id=\"ultimate-blocks\">Ultimate Blocks<\/h2>\n<figure id=\"attachment_218102\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-218102\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/ultimate-blocks-1050x471.png\" alt=\"Ultimate Blocks\" width=\"1050\" height=\"471\" \/><figcaption class=\"wp-caption-text\">Ultimate Blocks<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" rel=\"noopener\" target=\"_blank\">Ultimate Blocks<\/a> is a powerful block plugin and comes with a wide variety of Gutenberg blocks. This also includes a tab block that lets you create beautiful and responsive tabs on your website.<\/p>\n<p>The tabs block in the Ultimate Blocks plugin is highly customizable and allows you to create horizontal and vertical tabs.<\/p>\n<p>You can also choose from three different tab style options such as tabs, pills, and underline. Moreover, you also get the option to customize the tab colors and change the active tab colors, tab title color, and more.<\/p>\n<figure id=\"attachment_218103\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218103 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/ultimate-blocks-tabs.png\" alt=\"Ultimate Blocks - Tabs\" width=\"884\" height=\"559\" \/><figcaption class=\"wp-caption-text\">Easily add customizable tabbed sections to your content with Ultimate Blocks.<\/figcaption><\/figure>\n<p>Overall, it\u2019s pretty simple and fast to create beautiful tabs using the Ultimate Blocks plugin. And the best part is that it\u2019s a Gutenberg block add-on so you can natively build tabs inside the editor instead of using shortcodes.<\/p>\n<p>The Ultimate Blocks plugin is completely free which makes it the perfect choice if you\u2019re using Gutenberg. With this plugin, you\u2019ll not only be able to create tabs with ease but also get many other useful Gutenberg blocks you can use on your website.<\/p>\n<h2 id=\"tabby\">Tabby Responsive Tabs<\/h2>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tabby-responsive-tabs\/\" target=\"_blank\">Tabby Responsive Tabs<\/a> is a sleek and easy-to-use tabs plugin.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-194735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabby-plugins.png\" alt=\"image from WP.org of tabby responsive tabs\" width=\"600\" height=\"275\" \/><\/div>\n<\/div>\n<p>It is the only plugin on this list that doesn\u2019t have its own UI.<\/p>\n<p>Instead, tabs are able to be quickly added by inserting two pieces of simple shortcode.<\/p>\n<p>Name your tabs with [tabby title=&#8221;tabname&#8221;]<\/p>\n<p>Then add content between each tab name and then finish it off with [tabbyending].<\/p>\n<p>For example:<\/p>\n<p>[tabby title=&#8221;Tab 1&#8243;]<\/p>\n<p>Content under tab 1.<\/p>\n<p>[tabby title=&#8221;Tab 2&#8243;]<\/p>\n<p>Content under tab 2.<\/p>\n<p>[tabbyending]<\/p>\n<p>It\u2019s literally as easy as that.<\/p>\n<p>This shortcode will create a beautiful set of tabs.<\/p>\n<figure id=\"attachment_194736\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194736\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabby-plugins-1.png\" alt=\"Example of some tabs with the headers tab 1, tab 2, tab 3.\" width=\"600\" height=\"189\" \/><figcaption class=\"wp-caption-text\">Such a quick and easy way to display your content.<\/figcaption><\/figure>\n<p>The tabs are also responsive, so on a smaller screen, they will display stacked above each other to make the most of the space.<\/p>\n<figure id=\"attachment_194737\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194737\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabby-plugins-2.png\" alt=\"Image of a set of tabs shown stacked above each other in mobile view.\" width=\"600\" height=\"274\" \/><figcaption class=\"wp-caption-text\">A simple shortcode may just be all you need for your tabs!<\/figcaption><\/figure>\n<p>The only drawback with this plugin is that there isn\u2019t any way to edit the style of the tabs without purchasing a separate plugin. However, if a quick and free way to display your content in tabs is what you\u2019re looking for, without all the bells and whistles, Tabby Tabs might be the perfect solution.<\/p>\n<h2 id=\"responsive\">Tabs Responsive<\/h2>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tabs-responsive\/\" target=\"_blank\">Tabs Responsive<\/a> offers a variety of options to help you craft the perfect tabs for your site.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-194738\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-responsive.png\" alt=\"Header of tabs responsive taken from wp.org\" width=\"600\" height=\"262\" \/><\/div>\n<\/div>\n<p>This tabs plugin features its own interface where you put together your content, edit your design, and then publish your tabs and add it to your post using shortcode.<\/p>\n<p>This does mean it can be time consuming having to create the tabs outside of your page builder, however it also means that you have extra options when it comes to how they\u2019re displayed.<\/p>\n<p>You can add basic text content to each tab or open up the WYSIWYG editor for more options.<\/p>\n<figure id=\"attachment_194739\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194739\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-responsive-wysiwyg.png\" alt=\"Image of the WYSIWYG editor you can use to add your content\" width=\"600\" height=\"389\" \/><figcaption class=\"wp-caption-text\">You can even add media!<\/figcaption><\/figure>\n<p>Stick a favicon on each tab, change the colors, font, and size using the options on the right-hand side.<\/p>\n<figure id=\"attachment_194740\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194740\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-responsive-3.png\" alt=\"Example of a set of tabs from tab responsive\" width=\"600\" height=\"258\" \/><figcaption class=\"wp-caption-text\">There are lots of ways to customize your tabs\u2019 design.<\/figcaption><\/figure>\n<p>Overall, this is a fantastic plugin which allows you to create custom-designed tabs. You can even add custom CSS for even more personalization.<\/p>\n<p>The only negative I\u2019ve found with this plugin is that every time you want to change the content or add a new tab, you have to head back into the UI and re-publish the set of tabs &#8211; and the UI is full of adverts so makes it difficult to navigate.<\/p>\n<p>For a free plugin it produces great results, but the UI could do with being a bit friendlier.<\/p>\n<h2 id=\"tabs\">Tabs<\/h2>\n<p>With only 1,000 active installs, <a href=\"https:\/\/wordpress.org\/plugins\/tabs\/\" target=\"_blank\">Tabs<\/a> may just be the hidden gem you\u2019ve been looking for.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-194741\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs.png\" alt=\"Header of Tabs taken from wp.org\" width=\"600\" height=\"258\" \/><\/div>\n<\/div>\n<p>This plugin involves using a separate UI to create your tabs, however it is super simple and easy to navigate.<\/p>\n<figure id=\"attachment_194742\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194742\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-1.png\" alt=\"Image of the Tabs UI\" width=\"600\" height=\"276\" \/><figcaption class=\"wp-caption-text\">Tabs\u2019 interface is organized by tabs!<\/figcaption><\/figure>\n<p>You can add as many tabs as you need, choose from a range of font and color options, and then paste the shortcode onto your page.<\/p>\n<figure id=\"attachment_194743\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194743\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-2.png\" alt=\"Image of three tabs created using tabs.\" width=\"600\" height=\"147\" \/><figcaption class=\"wp-caption-text\">You can also choose favicons and deactivate individual tabs.<\/figcaption><\/figure>\n<p>All in all, this is a fantastic plugin (probably my favorite of the list!) so don\u2019t let the low number of active installs put you off.<\/p>\n<h2 id=\"ultimate\">Tab Ultimate<\/h2>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tabs-pro\/\" target=\"_blank\">Tab Ultimate<\/a> can help you quickly create a neat set of tabs to display your content in.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-194744\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tab-ultimate.png\" alt=\"Header of Tab Ultimate from wp.org\" width=\"600\" height=\"274\" \/><\/div>\n<\/div>\n<p>When you first head to the UI, you\u2019ll see a lot of \u201cUpgrade to Unlock\u201d next to many of the features.<\/p>\n<figure id=\"attachment_194745\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194745\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-ultimate-2.png\" alt=\"Image of the list of premium features in tab ultimate.\" width=\"600\" height=\"504\" \/><figcaption class=\"wp-caption-text\">Don\u2019t worry &#8211; you don\u2019t need these!<\/figcaption><\/figure>\n<p>You can actually create beautiful, responsive tabs with the free version.<\/p>\n<p>Edit each tab individually, add icons and images if required. You can then head to the overall settings to change the font color and size.<\/p>\n<figure id=\"attachment_194746\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194746\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-ultimate-1.png\" alt=\"Image of the text editor box within tab ultimate\" width=\"600\" height=\"394\" \/><figcaption class=\"wp-caption-text\">It gives you the freedom to add content using the visual editor or text editor.<\/figcaption><\/figure>\n<p>If you leave the settings at their defaults and simply add your content, you can quickly produce a neat set of tabs.<\/p>\n<figure id=\"attachment_194747\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-194747\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/03\/tabs-ultimate-3.png\" alt=\"Example of three tabs created in tab ultimate\" width=\"600\" height=\"176\" \/><figcaption class=\"wp-caption-text\">You can also add an icon to each tab.<\/figcaption><\/figure>\n<p>If you\u2019re looking for a free tab plugin that you only intend to use a small handful of times, Tab Ultimate will do the job. If you\u2019re looking for more style options or a quicker process, one of the others on this list may be better suited to your needs.<\/p>\n<h2>Top of the Tabs<\/h2>\n<p>Unless you\u2019re fairly good with CSS, then often with plugins like these, your choice will come down to which one has the look you like. And so even though some of these plugins come with a lot of options, you may find yourself choosing a simpler one purely because of the look.<\/p>\n<p>Or, of course, you may need a certain function that only one has, even though it\u2019s a plugin that doesn\u2019t have the most options.<\/p>\n<p>With all that said, Tabs definitely deserves another mention. It combines a simple UI with a decent list of style options so I really have no complaints.<\/p>\n<p>But again, if you\u2019re just looking for something simple, one of the other plugins above may work just as well for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Easily set up tabbed sections in your posts or pages with these four plugins.<\/p>\n","protected":false},"author":4,"featured_media":206246,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[9833],"tutorials_categories":[],"class_list":["post-126588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-tabs"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/126588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=126588"}],"version-history":[{"count":7,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/126588\/revisions"}],"predecessor-version":[{"id":206607,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/126588\/revisions\/206607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/206246"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=126588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=126588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=126588"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=126588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}