Knowledge Base

Easy Living

Shortcodes

Shortcodes

WordPress shortcodes allow you to easily add complicated features and elements to your pages without having knowledge of the code. To learn more about shortcodes and how they are used, visit the WordPress Shortcode API. Easy Living comes with 12 built in shortcodes which will be described in detail below:

ROWS & COLUMNS

Attributes: span

When building your pages, you will probably find the need to structure your content into columns. You can do this using the rows and columns shortcodes. Although rows and columns are two seperate shortcodes, you must use them together for them to work properly. Easy Living is built off a 12 column grid. Say you wanted to break your content into three columns. To do this, you would put this in your page content editor:

[row]
[col span=”4″]
Your content goes here
[/col]
[col span=”4″]
Your content goes here
[/col]
[col span=”4″]
Your content goes here
[/col]
[/row]

Notice there are 3 columns that each span 4 units. 3 x 4 equals 12 total units. To break your content into 4 columns, you would do 4 columns that each span 3 units. You will use this structure to lay out your pages. Any of the following shortcodes can be placed inside rows & columns. You can also nest rows & columns to create more complex layouts.

HEADING

Attributes: none

The widget heading shortcode outputs a simple heading and divider that is convient for seperating content blocks and providing headers for sections.

[heading]This is a heading[/heading]

BUTTON

Attributes: url, type, position

url – a url path for the button’s target. Example: https://www.google.com/
type – small, large (default: large)
position – left, right, center (default: left)
[button url=”https://www.google.com/” type=”small” position=”center”]button text[/button]

BUTTON_COLOR

Attributes: url, type, position

url – a url path for the button’s target. Example: https://www.google.com/
type – small, large (default: large)
position – left, right, center (default: left)
[button_color url=”https://www.google.com/” type=”small” position=”center”]button text[/button_color]

QUOTE

Attributes: none

[quote]This is a quote[/quote]

BIG_MESSAGE

Attributes: title, text, padding_top, padding_bottom

title – the title
text – text displayed below title
padding_top – space above big message. Example – 120px (default: 70px)
padding_bottom – space below big message. Example – 120px (default: 70px)
[big_message title=”Big Message Title” text=”This is the text” padding_top=”70px” padding_bottom=”70px”][/big_message]

TABS

Attributes: id, title

id – unqiue integer. Example – 1
title – the title
[tabs]
[tab id="1" title="TAB1"]This is the content for tab 1[/tab]
[tab id="2" title="TAB2"]This is the content for tab 2[/tab]
[tab id="3" title="TAB3"]This is the content for tab 3[/tab]
[/tabs]

ACCORDION

Attributes: title, content

title – the title
content – the content
[accordion title="This is the title" content="This is the content"][/accordion]

ALERT_BOX

Attributes: type

type – error, warning, info, success (default – success)
[alert_box type="error"]This is the message![/alert_box]

PRICING_TABLE

Attributes: title, price, price_caption, list, button_text, button_url

title – the title
price – the price. Example – $20.00
price_caption – text displayed below the price. Exampe – per month
list – comma separated list. Example – item1, item2, item3, item4
button_text – the button text
button_url – the url path to the button target
[pricing_table title="STANDARD" price="$50.00" price_caption="per month" list="5 GB Storage, 3 Databases" button_text="PURCHASE" button_url="http://yourwebsite.com"]

AGENT

Attributes: img, name, text, facebook, twitter, google_plus, linkedin, rss

img – a url to the agents image
name – agents name
text – text display belowed agents name
facebook – url to the agents facebook profile
twitter – url to the agents twitter profile
google_plus – url to the agents google plus profile
linkedin – url to the agents linkedin profile
rss – url to the agents rss feed
[agent img="http://rypecreative.com/easy-living-wp/wp-content/uploads/2014/08/agent1.png" name="JOHN DOE" text="Lorem ipsum dolor amet, consectetur adipiscing elit. Sed purus eget nunc." facebook="#" twitter="#" google_plus="#" linkedin="#" rss="#"]