Introduction

Expand tabs is an excellent tab plugin for your WordPress website. This plugin will enable impressive lightweight tabs function. We can easily add multiple tabs from post editor with many customizations.

You can change tabs color, effect, & other settings & by using the shortcode attributes of this plugin.

Getting Started

System Requirements

To get the best experience of this plugin, we recommend the followings–

  1. PHP 5.6 or later
  2. MySQL 5.6 or later
  3. WordPress 4.4.1 or later

To be sure about the above requirements contact your hosting vendor.

Installation

Suppose you have installed WordPress. If you do not know how to install WordPress, contact your hosting provider or see the document – https://codex.wordpress.org/Installing_WordPress.

  1. Login to the admin panel of WordPress
  2. Navigate to the to Plugins → Add New → Upload File. Click Choose File and select the zipped file named wp-expand-tabs-pro.zip. Click Install Now. When done, click Activate Plugin.
  3. After activating the Expand Tabs Pro plugin, you are ready to use it.
Tabs Creation

After installation, you are ready to generate tabs in the post, page or anywhere by using the shortcode. You can add tabs in two ways–

 

01. Tabs from Shortcode

Go to the post or page editor; you will see a drop-down button named "Easy Tabs Shortcodes", click here. Then click on the first menu called "Tabs form shortcode". In your post editor, you will see a shortcode like–

[tr_tabs][ir_items id="1" title="Tab title"]Tab item content ...[/ir_items] [ir_items id="2" title="Tab title"]Tab item content ...[/ir_items] [ir_items id="3" title="Tab title"]Tab item content ...[/ir_items][/tr_tabs]

tr_tabs is a wrapper shortcode for the tab item. You have to use this shortcode wrapper before & after tab items shortcodes. You must use different id if you are planning to use multiple tabs on the same page. Now modify your content.

ir_items is a shortcode for each tab item. Replace the Title and Content text with your text. You can use multiple items in your tab. Just you have to increase er_items shortcode.

Now save the post/page & view page. You will see tabs there.

 

02. Tabs from Custom Post

Add some tabs content on the Tabs custom post with a category. You can add multiple tab items in a category. Now go to the post of page editor (visual editor),  you will see a drop-down button named "Easy Tabs Shortcodes", click here. Then click on the second menu called "Tabs from custom post". In your post editor, you will see a shortcode like –

[tabs id="1" items="3" category="" background="#46B3E6" border="#46B3E6" effect="scale"]

Now save the post/page & view page. You will see tabs there.

 

03. Tabs from Custom Taxonomy

Add some tabs content on the Tabs custom post with a category. You can add multiple tab items in a category. Now go to the post of page editor (visual editor),  you will see a drop-down button named "Easy Tabs Shortcodes", click here. Then click on the third menu called "Tabs from custom taxonomy". In your post editor, you will see a shortcode like–

[cpt_tabs id="1" type="" taxonomy="" items="3" category="" background="#46B3E6" border="#46B3E6" effect="scale"]

Now save the post/page & view page. You will see tabs there.

Shortcodes

Tabs from shortcode

[eaccordion id="01"] [eitems title="Your Title here ..." text="Your Text here ..."] [eitems title="Your Title here ..." text="Your Text here ..."] [eitems title="Your Title here ..." text="Your Text here ..."][/eaccordion]
No. Attribute Default value options Description
1  id 01  use your ID eg: 01 or 02 If you want to show multiple tabs on the same page, you need use different ID eg: id="01" and id="02"
2  #46b3e6  color code  Set a color code for background color.
3  background  #46b3e6  color code  Set a color code for background color.
4  border  #fff  color code  Set a color code for border color .
5  color  #f1f1f1  color code  Set a color code for text color.
6  effect  scale  scale / slide left / slide right / slide top / slide down  Scroll with accordion slide.
7  position  horizontal  horizontal / vertical  Set a tab postion.
8  hposition  top  top / bottom  Set horizontally tab postion.
9  vposition  left  left / right  Set vertically tab postion.
10  open  1  number  Open tab by default, 1 for 1st, 2 for 2nd and 3 for 3rd etc.
11  rtl  false  true / false  Right to left ( for Arabic and Hebrew ).

Tabs from Custom Post

[tabs id="1" items="3" category="" background="#46B3E6" border="#46B3E6" effect="scale"]
No. Attribute Default value options Description
1  id 01  use your ID eg: 01 or 02 If you want to show multiple tabs on the same page, you need use different ID eg: id="01" and id="02"
2  category  blank  "" / category name  Set category name to retrieve the posts from category
3  background  #46b3e6  color code  Set a color code for background color.
4  border  #fff  color code  Set a color code for border color .
5  color  #f1f1f1  color code  Set a color code for text color.
6  effect  scale  scale / slide left / slide right/ slide top / slide down  Scroll with accordion slide.
7  position  horizontal  horizontal / vertical  Set a tab postion.
8  hposition  top  top / bottom  Set horizontally tab postion.
9  vposition  left  left / right  Set vertically tab postion.
10  open  1  number  Open tab by default 1 for 1st, 2 for 2nd and 3 for 3rd etc.
11  rtl  false  true / false  Right to left ( for Arabic and Hebrew ).

Tabs from Custom Taxonomy

[cpt_tabs id="1" type="" taxonomy="" items="3" category="" background="#46B3E6" border="#46B3E6" effect="scale"]
No. Attribute Default value options Description
1  id 01  use your ID eg: 01 or 02 If you want to show multiple tabs on the same page, you need use different ID eg: id="01" and id="02"
2  type  blank  "" / post type  Set post type to retrieve the posts from custom posts type
3  category  blank  "" / category name  Set category name to retrieve the posts from category
4  taxonomy  blank  "" / taxonomy term / taxnomy term, taxnomy term,  Set taxonomy term name to retrieve the posts from custom taxonomy
5  background  #46b3e6  color code  Set a color code for background color.
6  border  #fff  color code  Set a color code for border color .
7  color  #f1f1f1  color code  Set a color code for text color.
8  effect  scale  scale / slide left / slide right/ slide top / slide down  Scroll with accordion slide.
9  position  horizontal  horizontal / vertical  Set a tab postion.
10  hposition  top  top / bottom  Set horizontally tab postion.
11  vposition  left  left / right  Set vertically tab postion.
12  open  1  number  Open tab by default 1 for 1st, 2 for 2nd and 3 for 3rd etc.
13  rtl  false  true / false  Right to left ( for Arabic and Hebrew ).

Conclustion

If you have any idea or suggestion to improve this plugin, please write us here. And, Don't get any help from above documentation? Don't hesitate to post your query/issue in our Instant Support Forum. Thank you!