...

How to Add Tabbed Content in WordPress Posts and Pages

142

Do you want to divide your posts into tabs to save space and make it easier for users to find what they’re looking for? In this article, we will show you how to add tabbed content in WordPress posts and pages.

A WordPress post with tabbed content

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Tabs Shortcode and Widget plugin. This plugin works out of the box, and there are no settings for you to configure.

Simply create a new post, and on the post edit screen, you will notice a new shortcode button. Clicking on the button will reveal a menu.

Tabs layout button

Click on the tabs layout option in the menu, and it will launch the plugin’s tab editor interface.

Adding tabs

The first option on the tab editor is to choose the number of tabs you want to display. Next, you can choose the layout type. The plugin supports, horizontal and vertical tabs. After that you need to provide each of your tabs a title, choose an icon if you like, and then add the tab content.

Repeat the process for all your tabs. The last option on the popup is to add a custom CSS class. If you would like to change the appearance of the tabs, then you should enter a CSS class here.

During the whole process, you will be able to see a live preview of your tabs on the right side. Once you are done, click on the insert button to add the tabs in your WordPress post.

Save and preview your post and you will see your tabs in action.

Adding a Tabbed Widget in WordPress

The plugin also provides a widget to add tabbed content into your WordPress sidebars. Simply visit Appearance » Widgets and add OTW Shortcode Widget to a sidebar.

Adding a tabbed content widget

In the widget settings area, click on the add button to add tab layout. This will bring up the same tab editor we showed you earlier. Simply create your tabs using the user interface and add it to the widget. Lastly, click on the save button to store your widget settings.

You can now preview your website to see the tabbed content widget in action.

More adventurous users can also check out this tutorial on how to add a jQuery tabber widget in WordPress.

We hope this article helped you learn how to add tabbed content in WordPress posts and pages. You may also want to take a look at our list of 8 best jQuery tutorials for WordPress beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.