10. Shortcodes

Theme theme comes with several shortcodes for the most popular elements:

• Tabs
• Accordion
• Buttons
• Notifications
• FAQ

Tabs

There are two shortcodes used for tabs. The first one is tabs and is used as a wrapper of tab items. The second shortcode is tab and is for a tab item. In the example below you can see how the shortcodes are used.

[tabs]
[tab title="Tab Title"]The content of the tab[/tab]
[tab title="Tab Title"]The content of the tab[/tab]
[tab title="Tab Title"]The content of the tab[/tab]
[/tabs]

The tabs shortcode accepts a style parameter which changes the way the tabs look. The values for that parameter are 1, 2 and 3 and are used like in the example below:

[tabs style="2"]
[tab title="Tab Title"]The content of the tab[/tab]
[tab title="Tab Title"]The content of the tab[/tab]
[tab title="Tab Title"]The content of the tab[/tab]
[/tabs]

Accordion

Accordions are very similar to shortcodes in the way the shortcodes are written. The only difference is that instead of tabs and tab as the shortcodes you will use accordions and accordion as in the example below.

[accordions]
[accordion title="Accordion Title"]The content of the accordion[/accordion]
[accordion title="Accordion Title"]The content of the accordion[/accordion]
[accordion title="Accordion Title"]The content of the accordion[/accordion]
[/accordions]

Buttons

The shortcode for buttons is button and accepts 2 parameters: url and style. In the url parameter you simply type in the URL to which the button should go and in the style parameter you can use 1, 2 and 3. As in the example below:

[button url="#" style="2"]BUTTON[/button]

Notifications

The shortcode for notifications is notification and accepts one parameter: color. The available colors are red, orange, yellow, blue, green, black. Below is an example of usage:

[notification color="red"]Text for the notification[/notification]
[notification color="orange"]Text for the notification[/notification]
[notification color="yellow"]Text for the notification[/notification]
[notification color="blue"]Text for the notification[/notification]
[notification color="green"]Text for the notification[/notification]
[notification color="black"]Text for the notification[/notification]

FAQ

The shortcodes for FAQ ( frequently asked questions ) are similar to tabs and accordions, they are accordions and accordion. Below is an example:

[faqs]
[faq title="The question goes here"]The answer goes here[/faq]
[faq title="The question goes here"]The answer goes here[/faq]
[faq title="The question goes here"]The answer goes here[/faq]
[faq title="The question goes here"]The answer goes here[/faq]
[faq title="The question goes here"]The answer goes here[/faq]
[faq title="The question goes here"]The answer goes here[/faq]
[/faqs]