Example Pages

Page Template: Documents

Page Template: Product Listings

Page Template: Products [Category Overview]

Product Category Archive

Product Single – Buy Example

Product Single – Rent Example

Blog Archive

Blog Post

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 Email

Buttons

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:

Button

Grid 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.

Source Name

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

Accordion Title #1
Accordion Content #1
Accordion Title #2
Accordion Content #2

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

grey150

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

wp-imageSome content along with the thumbnail

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

Panel Content
Panel Footer

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:

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 Caption
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
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
    1. Ordered list item 1
    2. Ordered list item 2
    3. Ordered list item 3
  4. Ordered list item 1
  5. Ordered list item 1
  6. 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

Quote Source

Extra Large Buttons

Default

Primary

Secondary

Tertiary


Large Buttons

Default

Primary

Secondary

Tertiary

Medium Buttons

Default

Primary

Secondary

Tertiary

Small Buttons

Default

Primary

Secondary

Tertiary

Extra Small Buttons

Default

Primary

Secondary

Tertiary

Panel Title

Panel Content

Panel Footer

Accordion Title 1

Accordion Content 1

Accordion Title 2

Accordion Content 2

Accordion Title 3

Accordion Content 3

Table Caption
Table Header
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Caption
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 Caption
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.

wp-image

Image Caption

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.

wp-image

Image Caption

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.

wp-image

Image Caption

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.