PHPMatters Help You Better Hosting Your PHP-based Sites
How to Create Tabs in WordPress Posts?

How to Create Tabs in WordPress Posts?

Adding tabs in WordPress is of great necessity especially when you want to create a long post along with videos, images, texts, etc. As you may see, those little tabs usually display at the top of webpages, and you can easily get new content without leaving the current page by clicking on any tabs.

Have you ever wanted to create such tabbed content on your own site to improve user experience and thus reduce bounce rate? If this is the case, we are more than happy to share with you how to put tabs onto your WordPress powered website. Note that, this “WordPress Posts Tabs” plugin is instanced in the following parts.

Why You Need to Add Tabbed Content in WordPress?

There are innumerable benefits to divide your posts into small tabs, and the most obvious advantage is you can save a lot of space through consolidating large portions of your content. Tabs, work as the index words of content on your website, are similar to the accordion-style tabs on the FAQ pages. Besides that, you may find the need to create tabs for presenting a media library along with multiple categories or featuring your products with specs, reviews and functions.

However, you shouldn’t go overboard when tabbing your content, and poor tabbing practice would have a detrimental impact. Make sure that each tab you want to add must be highly-relevant to your content, and the tabs should be specific and directive. In the following, we are going to show how you can incorporate tabs in WordPress to benefit your readers and thus your business.

How to Add Tabs in WordPress via a Plugin?

As above, we would like to use this “WordPress Post Tabs” plugin to create tabs in WordPress posts. Note that, this simple-yet-powerful plugin will help you add responsive and nice-looking tabs to any of your WordPress posts/pages. In the meantime, you are also prepared with a wide array of premium features, such as 12+ style & skins, external link icons and linkable tabs, etc.

Create Tabs in WordPress - About WordPress Post Tabs

Step 1 – Initialize this WordPress Post Tabs
As usual, you are expected to login to the WordPress dashboard and head over to “Plugins” > “Add New” so that you can start enabling this “WordPress Post Tabs” plugin. Once you’ve “Installed” and “Activated” this plugin from the plugin repository, you will be able to “Edit” and “Deactivate” it within this “Installed Plugins” tab.

Create Tabs in WordPress - Initialize this WordPress Post Tabs

Step 2 – Configurations to this Plugin
After that, you should navigate to “Settings” > “WP Post Tabs” to make personal configurations. As you can see in the following screenshot, there are many editing options available to modify the tab. Within the “Basic Settings” area, you will be prompted to choose your favourite “Skin/Style” from multiple options, including “Grey”, “Red”, “Simple Grey” and “Default.” Pay attention that, this dashboard skin can only be seen by the administrator, and you can change it afterwards.

Create Tabs in WordPress - Basic Settings Section

Besides that, you can check the “Fade effect” box so that a tab will fade out when visitors navigate away from it later on. In the meantime, the rest of options out there all come with question marks that explain the actual functionality of each one. As a matter of course, you can leave those options completely as it is, but it is recommendable to uncheck this box next to the “Open tab links in New Window” option.

Create Tabs in WordPress - Advanced Settings Section

Below is the “Advanced Options” section where you are allowed to disable resources on all of your posts/pages. By checking the boxes, you can simply avoid loading the files generated by this plugin on all blog posts and pages. In the further, this will help you load file resources individually on preferred posts/pages.

Create Tabs in WordPress - Custom Shortcode Section

Scroll down and you will enter the “Custom Shortcodes” section as above. As is explained, you have the ability to replace the default shortcodes to add one tab and end certain group/set of tabs on your website. Here, you are required to write these custom shortcodes down for later use. Keep in mind that spaces are forbidden in the custom shortcode.

Important to Note: Alternatively, you can replace the above-mentioned shortcodes with something that is easy-to-remember. If this is the case, you will have to check whether or not you have used the old configuration code in a post/page. Do not forget to click the “Save Changes” button to take effect.

Step 3 – Insert Your Tabs into a Post/Page
The next step is to go to “Posts” > “Add New” section as follows. Just fill in your post title and content as you like. Of course, you can create a proper category or tag based on personal needs. At the same time, there is a little green and square plus icon added into the “Visual editor” area as below. Just make a hit on this “WordPress Post Tabs” icon, and a new window will pop up in front of you.

Create Tabs in WordPress - Click the Tabs Icon

As is showed, you are required to create your own tab name, such as “Features”, “Results”, “Overview”, “Test” and much more. Remember to click on the “Insert” button to proceed with this process.

Create Tabs in WordPress - Enter Tab Names

Once completed, a series of auto-generated shortcodes will be added to your WordPress editor. Just make a preview of this post and you will be presented with different tabs as is displayed. Beware that, the content refers to a little bit of text placed between the default [wptab name=’YourTabName’] and the [/wptab] shortcodes.

Create Tabs in WordPress - My Test Tabs

Step 4 – Insert Your Needed Content
The last step is to drop/insert any content you want to put onto your WordPress powered website. If you want to add a video from YouTube or other social networking websites, you can simply follow the normal insertion process and then put this video between the above-mentioned shortcodes.

Create Tabs in WordPress - Insert Your Video

When taking a preview of the content, you will see everything in a regular post/page. By the way, you can try embedding other content like image galleries, bold letters or other eye-catching things. Till present, the content on your site has been successfully tabbed up.

What If You Prefer Other WordPress Tab Plugins?

If you find this “WordPress Post Tabs” plugin is not your cup of tea, you can have a look at the following tab solutions. Note that, all of those listed plugins are available for free download from www.wordpress.org.

  • Easy Responsive Tabs – It empowers you to embed bootstrap style tabs to your post, page or custom post in simplest way. More than that, the inbuilt easy-to-use option will help you have an overall management on the colors for tab, tab heading, hover and archive, etc.
  • Fancy Tabs – It empowers you to put a highly-customizable sliding shelf onto a WordPress website. Above all, this powerful plugin prepares you with various tab slide options, including page source, positioning, opacity, size and autohide, etc.
  • Post UI Tabs – It empowers you to tab inside your own posts, pages or even custom post types with serial shortcodes. More importantly, you can display any post content inside jQuery powered tab by using one of twenty-four jQuery UI templates.
  • Tabby Responsive Tabs – It empowers you to insert a rich set of horizontal tabs to your post content. Besides that, there are optional add-ons for you to further customize the tabs.