Eski Shortcodesv1.0

WordPress Shortcodes Plugin


Find us online


Documentation Version
v1.0
Last Update
3rd March 2014
Created By
eski

Shortcodes

Shortcodes are small text snippets that you can insert into your page, post or projects content. These shortcodes then get processed by WordPress and output to the front end. Shortcodes can be very powerful, with all the heavy lifting done by the theme and WordPress. Entering a seemingly simple shortcode can produce something much more functional and attractive to the front end.

Shortcodes are easily recognisable by their square brackets, e.g. [button]Click me[/button].

Shortcodes usually come in matching pairs. You might have noticed in the example above the button shortcode seemed to be mentioned twice. In fact this is all one shortcode, the first instance is known as the open, and the second instance the close. The subtle difference between an opening and closing shortcode is the addition of a forward slash at the start of the close. Everything between the open and close is the content of that shortcode. Take the button example above, which will output a button with the label 'Click me'.

It is crucial that this pattern is adhered to. Failure to do so will almost guarantee that your front end page will not turn out as you thought it would.

There are some shortcodes that only require an opening shortcode, for example [gap], a simple shortcode that inserts some white space into the page, useful for creating layouts and page structure. As the shortcode is fairly simple in its mechanics, it doesn't require any content, therefore it doesn't require a closing [/gap].

You can place shortcodes within shortcodes to create more advanced layouts and functions. However, due to a limitation with the WordPress core, there are certain restrictions to this. You cannot nest shortcodes within each other if they share the exact same name. For example, using the [box] shortcode, you can easily add a [button] inside like so: [box] [button] Click Me! [/button] [/box]. You cannot add another [box] within a [box]. As the shortcodes share the same name, WordPress incorrectly outputs the code on the front end, and is almost certain to look awful. For more information on nesting shortcodes, you can read the official WordPress documentation here.

Reference Guide

Accordion

id
string
class
string
active
integer
required title
string

Animation

id
string
class
string
animation
zoomIn, fadeIn, fadeInRight, fadeInLeft, fadeInTop, fadeInBottom, flipInX, flipInY
delay
integer
easing
see easings.net
offset
integer
speed
integer
target
children, self

Blog

id
string
class
string
columns
1, 2, 3, 4, 5
load
numeric value, or -1 to show all (4)
offset
integer
orderby
title, date, rand, random, menu_order, ID, author, none, modified, comment_count
order
asc, desc
category
comma seperated list of category slugs
post_format
comma seperated list of post format names
post_id
comma seperated list of post ID's
show_image
yes, no
show_title
yes, no
show_date
yes, no
show_excerpt
yes, no
crop_image
yes, no
excerpt_length
numeric value above 0 (20)
boxed
yes, no

Button

id
string
class
string
important link
URL or Object ID (#)
size
xsmall, small, default, large
swatch
black, red, orange, yellow, green, blue, pink, purple, default
target
_blank, _self, _parent, _top

Callout

id
string
class
string
important title
string
boxed
yes, no
important button_text
string
button_size
xsmall, small, default, large
button_swatch
black, red, orange, yellow, green, blue, pink, purple, default
important button_link
URL or Object ID (#)
button_target
_blank, _self, _parent, _top

Feature

id
string
class
string
title
string
note
string
important image
URL to image resource
link
URL or Object ID
target
_blank, _self, _parent, _top
width
Valid CSS measurement (1px)
important height
Valid CSS measurement (1px)
color
Valid CSS colour reference (#F2F2F2)
border_radius
Valid CSS measurement (1px)
background_color
Valid CSS colour reference (#F2F2F2)
hover_effect
default, zoom, tint

Gap

class
string
height
numerical value with units e.g. 20px (10px)

Grid

id
string
class
string
linearise
yes, no
width
one_third, two_tenth, seven_eighth, four_fifth, etc
offset
one_third, two_tenth, seven_eighth, four_fifth, etc

Google Map

id
string
class
string
important height
Valid CSS measurement (1px)
important width
Valid CSS measurement (1px)
important long
longitude value
important lat
latitude value

Horizontal Rule

id
string
class
string
style
solid, dotted, dashed, shadow
height
Valid CSS measurement (1px)
color
Valid CSS colour reference (#F2F2F2)

Icon

id
string
class
string
icon
FontAwesome icon class name reference (fa-star)
link
URL or Object ID
width
Valid CSS measurement (1px)
height
Valid CSS measurement (1px)
color
Valid CSS colour reference (#F2F2F2)
border_radius
Valid CSS measurement (1px)
background_color
Valid CSS colour reference (#F2F2F2)

Lead

id
string
class
string

Notice

id
string
class
string
type
error, success, warning, default
removable
yes, no

Pricing Table

id
string
class
string
important title
string
important price
string
frequency
string
important button_text
string
button_size
xsmall, small, default, large
button_swatch
black, red, orange, yellow, green, blue, pink, purple, default
important button_link
URL or Object ID (#)
button_target
_blank, _self, _parent, _top

Profile

id
string
class
string
link
URL or Object ID
target
_blank, _self, _parent, _top
boxed
yes, no
important image
URL to image resource
important name
string
note
string
email
email address
vcard
URL to resource
googleplus
full URL to GooglePlus profile
twitter
full URL to Twitter profile
facebook
full URL to Facebook profile
linkedin
full URL to LinkedIn profile

Pullquote

id
string
class
string
align
left, right

Tabs

id
string
class
string
active
integer
required title
string

Teaser

id
string
class
string
link
URL or Object ID
important image
URL to resource
image_position
right, left, top
important title
string
boxed
yes, no
target
_blank, _self, _parent, _top

Testimonial

id
string
class
string
image
URL to resource
important author
string
note
string