Shortcodes

Working with Shortcodes

We’ve provided some shortcodes in this theme to help acheive complex layout features like Accordion, Tabs, Buttons easily. You can add these shortcodes to your posts and pages.

Buttons

{button size="lg" icon="fa-angle-right" color="blue" link="http://www.google.com"} Google {/button}
Output:
Google

{button}{/button} shortcode has four attributes associated with it, colour, size, icon & link. Color is the button background colour, size is the size of button, icon is the icon to place at the beginning of the button text and link is its destination after click.
color attribute has 6 optional values: blue, green, red, purple, orange, brown
Size attribute has 3 optional values: lg, sm, xs
Icon is a class name which can be replaced with any of the icon from FontAwesome
Accordion

{accordion}{accordion-item title="Accordion Title" target="one"] Accordion One content goes here. {/accordion-item} {/accordion}

Output:

Accordion one content goes here.

{accordion}{/accordion} shortcode has two attributes associated with it, title & target. Title is the accordion heading and target is its content box to open after click.Recomendations:
Use targets in this way: one, two, three OR a, b, c (no spaces are allowed in target values)
Tabs

{tabs}{tab title="Tab Menu Name" id="one"} content for this tab goes here. {/tab} {/tabs}
Output:

Content for this tab goes here.
{tabs}{/tabs} shortcode has two attributes associated with it, title & id. Title is the tab menu name and id is its content box to open after click.Recomendations: Use targets in this way: one, two, three OR a, b, c (no spaces are allowed in target values)
Content Columns

{col-wrapper} {col size="4"} content for this column goes here. {/col} {/col-wrapper}

Output:

content for this column goes here

{col-wrapper}{/col-wrapper} shortcode is used to add an additional wrapper to adjust the outside margin and align the content with the layout.{col}{/col} shortcode has one attribute associated with it, size. Size attribute is used to define the width of the column.

Columns Logic:

  • This is a grid based layout. There are 12 total number of columns with specific width and margins to each.
  • Whenever you want add columns in a row, you have to add those in accordence with the 12 in number.
  • E.g. if you want to add 3 columns, then 12 / 3 = 4. So you will need to add 3 columns in a row and each having the size as 4.i.e. {col size=”4″}{/col} {col size=”4″}{/col} {col size=”4″}{/col}
  • If you want to add 2 columns, then 12 / 2 = 6. So you will need to add 2 columns in a row and each having the size as 6