Difficulty

gold-star gold-star gold-star blank-star blank-star

How long will it take?

1397068449_clock 5 Minutes

Youtube Video

youtube-icon

Not yet available

Step 1

First of all, create or navigate to the page or post that you would like to edit.

Step 2

Click on the shortcode dropdown, signified by a [] symbol.

Step 3

Click on the shortcode named “Tabs” to insert it into the page.

Step 4

In the opening line of the shortcode, select the names of the tabs and rename them.

The format is as follows for each tab: tab1=”Tab 1″. You simple rename the text within the quotes to change the title displayed on each tab.

Step 5

To the right of the tab names, you will see layout=”horizontal or vertical”. You need to delete as appropriate so the area inbetween the quotes reads “horizontal” or “vertical”.

Horizontal means that the tabs will be displayed across the top, Vertical means they will be displayed in a column to the left.

Step 6

On the next line down, you will see the code that represents the content contained within each tab. Select the text in-between the tags that by default will be Tab content 1. Enter the text content you would like for the tab the first tab here.

Text can be normally formatted inside of the tabs. If it makes it easier, use enter to put the content on a separate line to the tags.

Step 7

Repeat this for tabs two and three to add all of the content for each tab

Remember that you can add shortcodes inside of shortcodes, so you could for example have an accordion inside of one of the tabs.

Step 8

Submit, update, publish or preview your page or post and it should look similar to this image.

Additional Information – Adding More Tabs

To ad an additional tab, you first need to copy the code within the first line for one of the existing tabs. In our example, if we copy tab1 we would use the folowing: tab1=”Products”. Click directly after the last tab in this line (in our example this would be after the word “Contact Us”). Paste the copied code, and then amend the pasted code so it reads tab4 instead of tab1.

After that, you need to add in the extra tab below. You can copy and paste an existing tab, ensuring that you change the tab id to 4 (as this is the fourth tab) or manually type the tags [ tab id=4 ][ /tab ], writing the new tab content between these tags.

Please see the screenshots beside for a comparison on what the page should look like with an additional tab create – the added parts have been emboldened.

You can add as many tabs as you like. Remember to sequentially increment each tab number, as well as the corresponding tab id.

Top