Shortcodes Reference Guide

Accordion

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.

[accordions] [accordion title=”Accordion Number 1″] *content* [/accordion] [accordion title=”Accordion Number 2″] *content* [/accordion] [accordion title=”Accordion Number 3″] *content* [/accordion] [/accordions]

title: string of characters

Band

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.

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)

Blockquote

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.

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

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

Box

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.

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

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

Break

For adding line breaks in blocks of text to fine tune typographic layout and flow

[br]

none

Button

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.

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

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

Callout

Entice your visitors to perform an action with the callout shortcode.

[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]

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

Clear

Useful for fine tuning layouts. For a very technical and detailed explanation on what clearing means, view this page.

[clear]

none

Gap

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.

[gap height=”20″]

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

Horizontal Rule

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.

[hr style=”icon” icon=”star-empty”]

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

Icon List

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.

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

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

Lead

Highlight the start of a page or blog post the with lead shortcode.

[lead] *content* [/lead]

none

Notice

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.

*content*

type: error, success, warning

Person

Great for constructing a team members page. All social links and emails are optional.

[person name=”Richard Branson” role=”Founder and Chairman” email=”[email protected]” twitter=”https://twitter.com/richardbranson” ] *content* [/person]

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

Pullquote

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.

[pullquote align=”right”] *content* [/pullquote]

align: left, right

Row/Columns

Description and instructions

[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]

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

Tabs

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.

[tabs]
[tab title=”Music” icon=”music”] *content*