Shortcodes Reference Guide

Accordion

[tabs]

[tab title=”Description”]
Accordions are great for showing a lot of content in a small space. Each accordion panel can be expanded to reveal the content inside. Each accordion should have a title.
[/tab]

[tab title=”Code”]

[/tab]

[tab title=”Configuration”]

title
string of characters

[/tab]

[/tabs]

Band

[tabs]

[tab title=”Description”]
Bands are a great way to organise content into different sections (bands) and bring emphasis and a creative flare to it. Choose from the default or alternative variates, both of which are highly configurable from with the theme customizer.
[/tab]

[tab title=”Code”]
[/tab]

[tab title=”Configuration”]

variation
default, alternative
inset
yes, no
backgroundimage
URL to image resource
bordertop
shorthand css border value
borderbottom
shorthand css border value
paddingtop
value with units (e.g. 3px)
paddingbottom
value with units (e.g. 3px)

[/tab]

[/tabs]

Blockquote

[tabs]

[tab title=”Description”]
Create a page of client testimonials or display your favourite quote aswell as everything in between. Two styles to choose from, a simple blockquote or a testimonial.
[/tab]

[tab title=”Code”]
[blockquote type=”testimonial” author=”Richard Branson” role=”Founder and Chairman”]
*content*
[/blockquote]
[/tab]

[tab title=”Configuration”]

type
blockquote, testimonial
author
string of characters
role
string of characters
image
URL to image resource

[/tab]

[/tabs]

Box

[tabs]

[tab title=”Description”]
Great for bringing emphasis to a section of content. Choose any background colour, border colour and even make the box look inset into the page or outset on top of the page.
[/tab]

[tab title=”Code”]
[box backgroundcolour=”#EEEEEE” style=”inset”]
*content*
[/box]
[/tab]

[tab title=”Configuration”]

backgroundcolour
hex colour
bordercolour
hex colour
style
inset, outset
borderradius
value with units (e.g. 3px)

[/tab]

[/tabs]

Break

[tabs]

[tab title=”Description”]
For adding line breaks in blocks of text to fine tune typographic layout and flow
[/tab]

[tab title=”Code”]
[br]
[/tab]

[tab title=”Configuration”]

none

[/tab]

[/tabs]

Button

[tabs]

[tab title=”Description”]
Hyperlink to any URL or resource online whilst picking from three preset colour ways, or provide a hex colour for compete control. You can easily link to internal WordPress resources simply by passing it the ID of the object. You can also link to any external resource by passing it the full URL.
[/tab]

[tab title=”Code”]
[button size=”large” link=”http://www.google.co.uk”] Visit Google [/button]
[/tab]

[tab title=”Configuration”]

size
small, medium, large
colour
default, light, dark, hex colour
link
URL or Object ID
target
_blank, _self, _parent, _top

[/tab]

[/tabs]

Callout

[tabs]

[tab title=”Description”]
Entice your visitors to perform an action with the callout shortcode.
[/tab]

[tab title=”Code”]
[callout title=”Buy one get one free” buttontext=”Browse products” buttonlink=”http://www.google.co.uk”]
Buy one product and get another product of the same value or less for free
[/callout]
[/tab]

[tab title=”Configuration”]

title
string of characters
buttontext
buttonsize
small, medium, large
buttoncolor
hex colour
buttonlink
URL
buttontarget
_blank, _self, _parent, _top

[/tab]

[/tabs]

Clear

[tabs]

[tab title=”Description”]
Useful for fine tuning layouts. For a very technical and detailed explanation on what clearing means, view this page.
[/tab]

[tab title=”Code”]
[clear]
[/tab]

[tab title=”Configuration”]

none

[/tab]

[/tabs]

Gap

[tabs]

[tab title=”Description”]
Handy for fine tuning the horizontal space between page elements without adding any visual clutter. The default height is 10px tall, but this can be easily changed to provide a larger gap.
[/tab]

[tab title=”Code”]
[gap height=”20″]
[/tab]

[tab title=”Configuration”]

height
numerical value without units (e.g. 20)

[/tab]

[/tabs]

Horizontal Rule

[tabs]

[tab title=”Description”]
Great for organising content and pages into sections. Choose from three styles, a simple line, an elegant and subtle shadow effect or a line with an icon in the middle to add a more descriptive content divider.
[/tab]

[tab title=”Code”]
[hr style=”icon” icon=”star-empty”]
[/tab]

[tab title=”Configuration”]

style
line, icon, shadow
icon
FontAwesome icon name (minus ‘icon-‘ prefix) reference

[/tab]

[/tabs]

Icon List

[tabs]

[tab title=”Description”]
Very similar to the standard un-ordered and ordered lists you might be familiar with, but this list enables you to specify icons for each individual item. If no icon is specified it defaults to a tick.
[/tab]

[tab title=”Code”]
[icon_list]
[item icon=”glass”] *content* [/item]
[item icon=”music”] *content* [/item]
[item icon=”search”] *content* [/item]
[/icon_list]
[/tab]

[tab title=”Configuration”]

icon
FontAwesome icon name (minus ‘icon-‘ prefix) reference

[/tab]

[/tabs]

Lead

[tabs]

[tab title=”Description”]
Highlight the start of a page or blog post the with lead shortcode.
[/tab]

[tab title=”Code”]
[lead] *content* [/lead]
[/tab]

[tab title=”Configuration”]

none

[/tab]

[/tabs]

Notice

[tabs]

[tab title=”Description”]
Have anything you want to be particulary visible to the customer? Perhaps they have just completed a form succesfully, or you performing some maintenance on the site and you want to let customers know.
[/tab]

[tab title=”Code”]
[notice type=”warning”] *content* [/notice]
[/tab]

[tab title=”Configuration”]

type
error, success, warning

[/tab]

[/tabs]

Person

[tabs]

[tab title=”Description”]
Great for constructing a team members page. All social links and emails are optional.
[/tab]

[tab title=”Code”]
[person name=”Richard Branson” role=”Founder and Chairman” email=”richard@virgin.com” twitter=”https://twitter.com/richardbranson” ] *content* [/person]
[/tab]

[tab title=”Configuration”]

name
string of characters
role
string of characters
image
URL to image resource
link
URL
email
email address
twitter
full URL to Twitter profile
facebook
full URL to Facebook profile
linkedin
full URL to LinkedIn profile

[/tab]

[/tabs]

Pullquote

[tabs]

[tab title=”Description”]
Highlight a quote or short sentence from a page or blog post by pulling it either left or right within the page and adding some colour. The rest of the article wraps around the pullquote giving it a great look.
[/tab]

[tab title=”Code”]
[pullquote align=”right”] *content* [/pullquote]
[/tab]

[tab title=”Configuration”]

align
left, right

[/tab]

[/tabs]

Row/Columns

[tabs]

[tab title=”Description”]
Description and instructions
[/tab]

[tab title=”Code”]
[row]
[column width=”one-quarter”] *content* [/column]
[column width=”one-half”]
[subrow]
[subcolumn width=”one-half”] *content* [/subcolumn]
[subcolumn width=”one-half”] *content* [/subcolumn]
[/subrow]
[/column]
[column width=”one-quarter”] *content* [/column]
[/row]
[/tab]

[tab title=”Configuration”]

width
one-quarter, three-eigtht, four-tenth, one-third, etc
offset
one-quarter, three-eigtht, four-tenth, one-third, etc
linearise
yes, no

[/tab]

[/tabs]

Tabs

[tabs]

[tab title=”Description”]
Tabs are great for showing a lot of content in a small space. Flick between tabs to reveal the underlying content. You can also add an optional icon to each tab.
[/tab]

[tab title=”Code”]
[tabs]
[tab title=”Music” icon=”music”] *content* [/tab]
[tab title=”Biography”] *content* [/tab]
[tab title=”Contact Details”] *content* [/tab]
[/tabs]
[/tab]

[tab title=”Configuration”]

title
string of characters
icon
FontAwesome icon name (minus ‘icon-‘ prefix) reference

[/tab]

[/tabs]

Tag List

[tabs]

[tab title=”Description”]
Description and instructions
[/tab]

[tab title=”Code”]
[tag_list]
[tag] *content* [/tag]
[tag] *content* [/tag]
[tag] *content* [/tag]
[/tag_list]
[/tab]

[tab title=”Configuration”]
[/tab]

[/tabs]

Teaser

[tabs]

[tab title=”Description”]
A teaser is a great way to construct a portal page that will help your visitors get to where they want to go faster, wheather its a list of your services, products or any other sub page.
[/tab]

[tab title=”Code”]
[teaser title=”Services” link=”http://www.google.co.uk”]
*content*
[/teaser]
[/tab]

[tab title=”Configuration”]

title
string of characters
link
URL
image
URL to image resource
target
_blank, _self, _parent, _top

[/tab]

[/tabs]