How to Display Tabs in WordPress Pages and Blog Posts

How to Display Tabs in WordPress Pages and Blog Posts

To ensure the great reading experience for some lengthy and content-rich blog posts, most of you may choose to add the pagination for them. But actually, you can also divide the content into multiple tabs for the much more clear display. In the following, we have introduced the simple steps of how to display tabs in WordPress pages and blog posts.

By doing so, you can save plenty of spaces on your screen by splitting a large portion of contents. After that, your readers can find multiple tabs on your post or page. When they click each tab, they can check the new and different contents without moving away from the current webpage. In addition, the tabbed sections can be filled with various kinds of contents. For instance, you can add the common blog posts, videos and photo galleries.

As researched, the tabbed contents are much more likely to be used in the following situation.

  • Break up the lengthy posts that have multiple crucial parts and paragraphs.
  • Display the product listing or the media library that have multiple categories.
  • Showcase the featured contents.

How to Display Tabs in WordPress

No matter what reason is for you to display tabs in WordPress pages and blog posts, you can use the WordPress Post Tabs plugin to achieve your goal with ease. This tool allows you to add the structured, fully responsive and ultimately clean tabbed contents to your WordPress posts and pages, using your editing screen directly.

Determine the Basic Plugin Settings

For the proper utilization of the tabs, you firstly need to finish the most basic settings of this plugin. Here, you should click the Settings > WP Post Tabs button.

Basic Plugin Settings

Now, you can choose the skin or the style of the tabs among 4 default options. If you want, you can also enable the fade effect on the tab menus, enable the display of the tabs on archives and index, allow the pretty links for the tab contents using the symbol “#”, enable the cookies for the latest active tab, open the tabbed links in a new window and showcase the title attributes when people hover the mouses on the tab menus.

In addition, if the tabs are too many on the navigation, you can decide the text for the Previous navigation and the Next navigation. Even, we highly recommend you to enable the feature of reloading on clicks. This can increase your pageviews to some extent.

Set Up Some Advanced Settings

If you want, you can also move down to set up some advanced options. For instance, you can avoid loading some JavaScript and CSS files of this plugin by default on your pages and posts. In addition, you can be showcased with the custom checkbox that allows you to individually load the resources on the selected pages.

Advanced Settings

Furthermore, the display of the tabbed contents requires the shortcode to achieve. By default, this plugin offers the exclusive shortcode for the starting and the ending of the particular set of tabs. However, if you want, you can replace the default coding option with the custom ones as you want.

Here, if you make the changes for this part, you need to figure out whether you have already used the same shortcode before on your other pages.

Custom Shortcode

Lastly, if you have enough knowledge and skills, you can also add some custom styles that you want to apply to your tab elements.

Add the Tabbed Contents to Your Posts or Pages

Now, as all the settings are determined the way you like, you can add the tabs to showcase the tabbed blog contents. For this, you need to utilize the Visual Editor after accessing the editing screen. Here, you can find a new tool from the toolbar that is named WordPress Post Tabs.

WordPress Post Tabs Button

After clicking that new button, you can start entering your first tab. For this, you simply need to enter the tab name from the popup window, and then, click the Insert button.

Enter Tab Name

This way, the plugin shortcode can be inserted automatically.

Tab Shortcode

Now, you can add the content between these two lines of code. Here, you need to note that the content can be the normal blog post, the inserted video, plenty of images and many more. You just can drop in your favorite contents freely. In addition, this plugin will display the tab description by default. However, you can change the descriptive words they way you like or even hide these words from the plugin settings page.

After finishing the content of the first tab, now, you can click that exclusive button one more time and add another one. Note that this plugin allows you to add as many tabs as possible to better organize the post content.

Or, when you are in the step of entering the tab names, you can enter all your tabs in one time with the comma for separation. This way, you can add multiple tabbed contents without the need to click that button repeatedly.

Now, as the content is finished, you can publish it. And the front-end display can be something like the following.

Tabbed Contents