How to add tabbed content to WordPress posts, pages and widgets

Last updated on

Using WordPress tabs to organise and display different sections of content on your webpage will make it much easier for visitors to browse the page and find what they are looking for.

This tutorial will guide you how to add tabbed content to your WordPress pages, posts or widgets. There are 3 steps in this tutorial:

  • Step 1 - Install WordPress premium plugin Wonder Tabs
  • Step 2 - Add HTML content or WordPress pages to tabs
  • Step 3 - Publish the tabs and add the tab group to a WordPress page, post or widget

At the end of the tutorial, we will create a tabs group as follows:

Step 1 - Install WordPress premium plugin Wonder Tabs

First please install the premium WordPress tabs plugin Wonder Tabs. You can download the free version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version.

The WordPress tabs plugin supports horizontal tabs, vertical tabs and accordion tabs. You can enter HTML code or shortcode as tab content or create tabs from WordPress pages. The created WordPress tabs are fully responsive, they can automatically switch to accordion mode on mobile or small screen devices. It also supports nested tabs and API functions to jump to different tabs.

Step 2 - Add HTML content or WordPress pages to tabs

After you have installed the WordPress tabs plugin Wonder Tabs, in your WordPress backend, left menu, goto Wonder Tabs -> New Tab Group and create a new tab group.

In the tab group editor, step 1, you can click the Add HTML code button to enter HTML code or click the Add Page button to add a WordPress page.

wordpress tabs add content

In step 2 Skins dialog, you can select a horizontal tabs skin, vertical tabs skin or accordion tabs.

wordpress tabs skins

Step 3 - Publish the tabs and add the tab group to a WordPress page, post or widget

Click the Save & Publish button to publish the tab group. The plugin will create the tab group and display its shortcode.

To add the tab group to a WordPress page or post, in the page or post editor, enter the shortcode.
add wordpress tabs to page

If you use the new Gutenbery editor, add a Shortcode widget, then enter the tab group shortcode to the widget input box.

gutenberg add shortcode

To add the tab group to a sidebar widget, add a text widget then enter the shortcode.

add wordpress tabs to widget