Example Pages
Page Template: Product Listings
Page Template: Products [Category Overview]
Shortcodes
Intro/Lead Text
Code Example
[lead class=""]My intro text to be styled[/lead]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output:
My intro text to be styled
Stylized Lists
Accepted Shortcodes
[list class=""][/list], [list-unordered][/list-unordered], [list-ordered][/list-ordered], [list-unstyled][/list-unstyled], [list-inline][/list-inline]Code Example
[list class="list-unordered"]
List Item #1
List Item #2
[/list]
[list-unordered]
List Item #1
List Item #2
[/list-unordered]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | When using the list shortcode: ‘list-unordered’, ‘list-ordered’, ‘list-unstyled’, ‘list-inline’ will be accepted. With any shortcode any extra classes can be added. | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output:
- List Item #1
- List Item #2
- List Item #1
- List Item #2
- List Item #1
- List Item #2
- List Item #1
- List Item #2
Email Encode
Code Example
[email url="email@address.com" class=""]My Email[/email]
or
[email]email@address.com[/email]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
url | The url you want the email to link to; if none is provided it will default to what’s inside the brackets | optional | any text | none |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output:
My EmailButtons
Code Example
[button type="default" size="" block="" url="" target="" disabled="" title=""][/button]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
type | The type of the button | optional | default, primary, secondary, tertiary | default |
size | The size of the button | optional | extra-large, large, medium, small, extra-small | none |
block | Whether the button should be a block-level button | optional | true, false | false |
disabled | Whether the button be disabled | optional | true, false | false |
url | The url you want the button to link to | optional | any valid link | none |
target | Target for the link | optional | any valid target | none |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output:
ButtonGrid Structure
Code Example
[row]
[column md="6"]
...
[/column]
[column md="6"]
...
[/column]
[/row]
The container component is also supported in case your theme doesn’t include a container.
[container]
[row]
[column md="6"]
...
[/column]
[column md="6"]
...
[/column]
[/row]
[/container]
container Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
fluid | Is the container fluid? (see Bootstrap documentation for details) | optional | true, false | false |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
row Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
column Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
xs | Size of column on extra small screens (less than 544px) | optional | 1-12 | false |
sm | Size of column on small screens (greater than or equal to 544px) | optional | 1-12 | false |
md | Size of column on medium screens (greater than or equal to 768px) | optional | 1-12 | false |
lg | Size of column on large screens (greater than or equal to 1024px) | optional | 1-12 | false |
xl | Size of column on extra large screens (greater than or equal to 1280px) | optional | 1-12 | false |
offset_xs | Offset on extra small screens | optional | 1-12 | false |
offset_sm | Offset on small screens | optional | 1-12 | false |
offset_md | Offset on column on medium screens | optional | 1-12 | false |
offset_lg | Offset on column on large screens | optional | 1-12 | false |
offset_xl | Offset on column on extra large screens | optional | 1-12 | false |
pull_xs | Pull on extra small screens | optional | 1-12 | false |
pull_sm | Pull on small screens | optional | 1-12 | false |
pull_md | Pull on column on medium screens | optional | 1-12 | false |
pull_lg | Pull on column on large screens | optional | 1-12 | false |
pull_xl | Pull on column on extra large screens | optional | 1-12 | false |
push_xs | Push on extra small screens | optional | 1-12 | false |
push_sm | Push on small screens | optional | 1-12 | false |
push_md | Push on column on medium screens | optional | 1-12 | false |
push_lg | Push on column on large screens | optional | 1-12 | false |
push_xl | Push on column on extra large screens | optional | 1-12 | false |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Quote
Code Example
[quote title="" subtitle="" source="Source Name" url="" class=""][/quote]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
title | Use to set the quote title | optional | any text | none |
subtitle | Use to set the quote subtitle | optional | any text | none |
source | Use to set a citation source | optional | any text | none |
url | Using the url parameter will link the quote source | optional | any text | none |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis dignissim mauris, et euismod risus vehicula sed.
Accordion / Accordion Item
Code Example
[accordion type="default"]
[accordion-header][accordion-title]Accordion Title #1[/accordion-title][/accordion-header]
[accordion-content]Accordion Content #1[/accordion-content]
[accordion-header][accordion-title]Accordion Title #2[/accordion-title][/accordion-header]
[accordion-content]Accordion Content #2[/accordion-content]
[/accordion]]
Accordion Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Accordion Header Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Accordion Title Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Accordion Content Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output
Menu
Code Example
[menu menu="default"]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
menu | he menu that is desired; accepts (matching in order) id, slug, nam. | optional | any text | none |
container | Whether to wrap the ul, and what to wrap it with. Allowed tags are div and nav. Use false for no container e.g. 'container' => false | optional | any text | none |
container_class | The class that is applied to the container. | optional | any text | none |
container_id | The ID that is applied to the container. | optional | any text | none |
menu_class | The class that is applied to the ul element which encloses the menu items. Multiple classes can be separated with spaces. Formerly known as $wrap_class. | optional | any text | none |
menu_id | The ID that is applied to the ul element which encloses the menu items. Formerly known as $wrap_id. | optional | any text | none |
echo | Whether to echo the menu or return it. For returning menu use ‘0’ | optional | any text | true |
fallback_cb | If the menu doesn’t exist, the fallback function to use. Set to false for no fallback. Note: Passes $args to the custom function. | optional | any text | wp_page_menu |
before | Output text before the <a> of the link. | optional | any text | none |
after | Output text after the </a> of the link. | optional | any text | none |
link_before | Output text before the link text. | optional | any text | none |
link_after | Output text after the link text. | optional | any text | none |
depth | How many levels of the hierarchy are to be included where 0 means all. -1 displays links at any depth and arranges them in a single, flat list. | optional | any text | 0 |
walker | Custom walker object to use (Note: You must pass an actual object to use, not a string). | optional | any text | none |
theme_location | The location in the theme to be used–must be registered with register_nav_menu() in order to be selectable by the user. | optional | any text | none |
Output
Icon
Code Example
[icon type="" size="" color="" class=""]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
type | The type of icon you want to display | optional | See: Example Icons | none |
size | The size of the icon in pixels. Do not add ‘px’, just the font-size. | optional | px | body size (16px) |
color | Use css color attributes to output a color | optional | any text | grey |
url | Using the url parameter will link the quote source | optional | any text | none |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output
Image
Code Example
[img responsive="" class=""][/img]
img Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
responsive | Make the wrapped images responsive | optional | true, false | false |
class | Any extra classes you want to add. Recommended classes: img-circle, img-rounded | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output

Thumbnail
Code Example
[thumbnail class="" has_content=""][/thumbnail]
thumbnail Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
has_content | Set to “true” if this thumbnail contains more than just an image or linked image as in Bootstrap’s thumbnail documentation. | optional | true, false | false |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output

Panel
Code Example
[panel type="default"]
[panel-header][panel-title]Panel Title[/panel-title][/panel-header]
[panel-content][/panel-content]
[panel-footer]Panel Footer[/panel-footer]
[/panel]
panel Parameters:
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
type | The type of the panel | optional | default | default |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
panel header Parameters:
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
panel title Parameters:
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
panel content Parameters:
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
panel footer Parameters:
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output:
Panel Title
Display
Code Example
[display hidden="" block="" inline="" inline_block="" class=""][/display]
Parameters
Parameter | Description | Required | Values | Default |
---|---|---|---|---|
hidden | Sizes at which this element is hidden (separated by spaces) | optional | xs, sm, md, lg, xl | false |
block | Sizes at which this element is visible and displayed as a “block” element (separated by spaces) | optional | xs, sm, md, lg, xl | false |
inline | Sizes at which this element is visible and displayed as an “inline” element (separated by spaces) | optional | xs, sm, md, lg, xl | false |
inline_block | Sizes at which this element is visible and displayed as an “inline-block” element (separated by spaces) | optional | xs, sm, md, lg, xl | false |
class | Any extra classes you want to add | optional | any text | none |
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe. | optional | any text | none |
Output:
Mixed display attributes example. Inspect or change browser width to see changes.Table Responsive
Code Example
[table-responsive]<table><tr><td></td</tr></table>[/table-responsive]
Parameters
Use this shortcode to wrap any table to make it’s width fluid and includes a horizontal scroll-bar on smaller screens.
Output
Table Header | |||||
---|---|---|---|---|---|
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Gallery
Code Example
[gallery]
Parameters
Add this shortcode to the visual editor and use the edit command to insert images into a gallery
Output
General Styles
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
- Ordered list item 1
- Ordered list item 1
- Ordered list item 2
- Definition list title
- Definition list division 1
- Definition list division 2
- Definition list division 3
“Blockquote Maecenas tristique, dui vel ultricies mattis, nibh velit cursus ex, augue enim massa.”
Aenean elementum, risus id commodo laoreet, tortor mauris porttitor velit, vitae imperdiet magna nulla id enim. In semper turpis quis mauris fringilla scelerisque. Quisque venenatis imperdiet nisi nec consequat. Cum sociis natoque penatibus et magnis dis parturient montes
Panel Title
Panel Content
Accordion Title 1
Accordion Content 1
Accordion Title 2
Accordion Content 2
Accordion Title 3
Accordion Content 3
Table Header | ||
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Header | Table Data | Table Data | Table Data |
---|---|---|---|
Table Header | Table Data | Table Data | Table Data |
Table Header | Table Data | Table Data | Table Data |
Table Header | Table Header | Table Header | |
---|---|---|---|
Table Header | Table Data | Table Data | Table Data |
Table Header | Table Data | Table Data | Table Data |
Table Header | Table Data | Table Data | Table Data |
Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.
Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.
Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.
Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.