What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Tabs in WordPress Posts and Pages with Plugin

How to Add Tabs in WordPress Posts and Pages with Plugin

Tabs provide a great way to organize the blog content. By adding tabs in posts or pages, you can break long content into several organized sections, which not only saves the space, but also makes the content structured. In addition, readers are able to browse the full content without scrolling down endlessly.

Tabs are more than helpful if you publish many long contents or maintain product pages on which you want to display contents in sections like Features, Specs and Reviews for easy navigation. For more usage, read this tutorial about WordPress tabs.

WordPress Tabs

There are two ways to add tabs in WordPress posts and pages. One is to code the tabs into your theme manually, and the other is by using a WordPress plugin. Since we do think the latter is more energy-saving and suitable for almost everyone, we have selected two plugins and explained how to use them in below. You can choose the one you prefer.

Option 1: Add Tabs in WordPress with Tabs Shortcode and Widget

Tabs Shortcode and Widget is a simple and easy-to-use plugin that allows you to add tabs in the post editor, template files and sidebar without any coding. To use the plugin, you only need to install and activate it. There are no settings to deal with.

Add tabbed content in WordPress posts

Firstly, create a post or edit an existing one that you want to add tabs to. On the editing screen, you can find an “Insert Shortcode” button. Clicking on the button will reveal an option of “Tabs Layout”.

Tabs Layout

The tabs layout option will then lead to the tab editor of the plugin. On the popup screen, you have to:

  1. Select the number of tabs among 1 to 10.
  2. Choose to create vertical or horizontal tabs.
  3. Add the title, content and icon for each individual tab. The plugin comes with 70 built-in icons, and you can also upload your own.
  4. Add custom CSS class to customize the style of the tabs.
  5. Preview the tabs on the right column of the popup screen and adjust the content or icons as you like.

Tab Editor

After completing these tasks, click on the “Insert” button on the upper right of the tab editor. Then you can find a shortcode is generated automatically in the post editor. To make changes to the tab title or content, you only need to find the corresponding fields and replace the old content with the new one.

Tabs Shortcode

After adding all other content you need, preview the post to check whether everything is right. At last, publish the post to make the tabs alive.

Tabs Preview

Add tabbed content in WordPress sidebar

As is mentioned before, the Tabs Shortcode and Widget plugin can be used to add tabs in the sidebar, too. To do this, go to Appearance > Widgets. Then, find the widget named “OTW Shortcode Widget” and drag it to a widget area.

Tabs Widget

Clicking on the “Add” button, you will get the same tab editor as you do in the post editor. So you only have to do the same things to get the tabs configured. And at last, save the tabs and the shortcode widget. Refresh your WordPress site, and you will see the tabs in the sidebar.

Tabs in the Sidebar

As you may have noticed, this plugin is quite easy-to-use, but the limitation is that it has very limited built-in styles and options. If you want more flexibility, you can turn to Option 2.

Option 2: Add Tabs in WordPress with WordPress Post Tabs Plugin

WordPress Post Tabs is a popular tab plugin that helps you add structured and responsive tabbed content in an easy way. Besides the standard content, you are allowed to embed Vimeo and YouTube videos as well as tables as the tab content.

The free Lite version of this plugin comes with three premade skins. If you want more styles and advanced features like widget placeholder, style editor and image support, you can purchase the premium version.

After installing the plugin, you can follow the steps below to get started with it.

Step 1: Check the plugin settings

WordPress Post Tabs comes with a number of settings which you can find in Settings > WP Post Tabs. The default settings could work for most users, but we’d still suggest you check them through to make the necessary changes according to your needs. What you can do includes:

  • Selecting a style among “Red”, “Simple Gray” and “Gray”.
  • Turning on the fade effect.
  • Enabling tabs on the archives, index, and so on.
  • Enabling the navigation links & changing the navigation texts.
  • Opening the tab link in a new window. This should only be checked if you have added external links in the tabbed content.
  • Creating custom shortcodes. This is not suggested if you have used the plugin for a while because the change will make all the old shortcodes invalid, which means your previously-created tabs become broken.

Most of these settings are easy-to-understand because there are explanations when you hover your mouse over the question mark.

Plugin Settings

Step 2: Add tabs in WordPress posts

Edit a post or add a new one just like you do with any other post. In the visual editor, there is a new button created by the plugin which is named “WordPress Post Tabs”. Click on the button.

WordPress Post Tabs Button

Now you get a popup asking you to enter the tab names. Depending on how many tabs you need, you can enter as many tab names as you want. After filling in all of them, click on the “Insert” button.

Tab Names

A shortcode is then added in the post editor automatically. What you should do now is to change the default tab text to be your own. You can add links and videos as well.

Add Tabbed Content

After doing this, preview the post to check the tabs.

Tabs Preview and Test

Author

Joyce is a professional writer & SEOer who loves trying new things and sharing the experience through blogging. She loves clean design, playing with different WordPress themes, SEO, etc. Now she is very struggle with purchasing a bubbling apartment in downtown. You can help her by clicking our ADs or making a purchase via our links ;-)

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *