Shortcodes

Below are a list of all the shortcodes and how to use them.

BOXES

Usage: [gpp_box]Alert Box Text[/gpp_box]
Attributes: color, width, text_align, margin_bottom, margin_top, class
Available colors: grey, yellow, green, red, blue, purple, black
Attributes usage: [gpp_box color="green" width="50%" text_align="left" margin_bottom="50px" margin_top="50px"]Alert Box Text[/gpp_box]
Result:

Alert Box Text


ICONS

Usage: [gpp_icon type="image"]
Attributes: type
Availabe types: standard, aside, image, gallery, video, status, quote, link, chat, audio, github, dribble, twitter, facebook, facebook-alt, wordpress, googleplus, linkedin, linkedin-alt, pinterest, pinterest-alt, flickr, vimeo, youtube, tumblr, instagram, codepen, polldaddy, comment, category, tag, time, user, day, week, month, pinned, search, unzoom, zoom, show, hide, close, close-alt, trash, star, home, mail, edit, reply, feed, warning, share, attachment, location, checkmark, menu, top, minimize, maximize, 404, spam, summary, cloud, key, dot, next, previous, expand, collapse, dropdown, dropdown-left, top, draggable, phone, send-to-phone, plugin, cloud-download, cloud-upload, external, document, book, cog, unapprove, cart, pause, stop, skip-back, skip-ahead, play, tablet, send-to-tablet, info, notice, help, fastforward, rewind, portfolio, uparrow, rightarrow, downarrow, leftarrow
Result:

BUTTONS

Usage: [gpp_button]Button Text[/gpp_button]
Attributes: color, url, title, target, rel, class, icon_left, icon_right, size, display
Available colors: grey, yellow, green, red, blue, purple, black
Available sizes: small, medium, large
Available displays: inline, block

Available icon_left and icon_right: standard, aside, image, gallery, video, status, quote, link, chat, audio, github, dribble, twitter, facebook, facebook-alt, wordpress, googleplus, linkedin, linkedin-alt, pinterest, pinterest-alt, flickr, vimeo, youtube, tumblr, instagram, codepen, polldaddy, comment, category, tag, time, user, day, week, month, pinned, search, unzoom, zoom, show, hide, close, close-alt, trash, star, home, mail, edit, reply, feed, warning, share, attachment, location, checkmark, menu, top, minimize, maximize, 404, spam, summary, cloud, key, dot, next, previous, expand, collapse, dropdown, dropdown-left, top, draggable, phone, send-to-phone, plugin, cloud-download, cloud-upload, external, document, book, cog, unapprove, cart, pause, stop, skip-back, skip-ahead, play, tablet, send-to-tablet, info, notice, help, fastforward, rewind, portfolio, uparrow, rightarrow, downarrow, leftarrow
Attributes usage: [gpp_button color="blue" url="http://graphpaperpress.com" title="themes" icon_left="twitter" target="_blank" size="large" display="block"]Button Text[/gpp_button]
Result: Button Text

TEXT HIGHLIGHT

Usage: [gpp_highlight]text to highlight[/gpp_highlight]
Attributes: color
Available colors: grey, yellow, green, red, blue, purple, black
Attributes usage: [gpp_highlight color="green"]text to highlight[/gpp_highlight]
Result: text to highlight

DIVIDERS

Usage: [gpp_divider]
Attributes: type, color
Available types: solid, dashed, dotted, double
Available colors: grey, yellow, green, red, blue, purple, black
Attributes Usage: [gpp_divider type="dashed" color="green"]
Result:


ACCORDIONS

Usage: [gpp_accordion][gpp_accordion_section title="Section #1"]Section 1 text[/gpp_accordion_section][gpp_accordion_section title="Section #2"]Section 2 text[/gpp_accordion_section][gpp_accordion_section title="Section #3"]Section 3 text[/gpp_accordion_section][/gpp_accordion]
Attributes: title, class
Attributes usage: [gpp_accordion][gpp_accordion_section title="Section #1"]Section 1 text[/gpp_accordion_section][gpp_accordion_section title="Section #2"]Section 2 text[/gpp_accordion_section][gpp_accordion_section title="Section #3"]Section 3 text[/gpp_accordion_section][/gpp_accordion]
Result:

Section #1

Section 1 text

Section #2

Section 2 text

Section #3

Section 3 text

TOGGLES

Usage: [gpp_toggle title="Toggle Title"]Toggle text[/gpp_toggle]
Attributes: title, class
Result:

Toggle Title

Toggle text

TABS

Usage: [gpp_tabgroup][gpp_tab title="Tab #1"]Tab 1 text [/gpp_tab][gpp_tab title="Tab #2"]Tab 2 text[/gpp_tab][/gpp_tabgroup]
Attributes: title, class
Result:

Tab 1 text
Tab 2 text

GOOGLE MAPS

Usage: [gpp_googlemap location="new york,usa"]
Attributes: location, height, title, zoom, class
Attributes Usage: [gpp_googlemap location="new york,usa" zoom="5" title="New York" height="200"]
Result:

PRICING TABLE

Usage: [gpp_pricing plan="Premium" cost="$200" per="per month" button_url="http://graphpaperpress.com" button_text="Sign Up" button_color="green" button_target="self" button_rel="nofollow"] plan feature plan feature plan feature plan feature [/gpp_pricing]
Attributes: plan, cost, per, button_url, button_text, button_color, button_target, button_rel, position, class

Here is an example code for a pricing table with three columns:

[one_third_first][gpp_pricing plan="Gold" cost="$99" per="per month" button_url="http://graphpaperpress.com" button_text="Sign Up" button_color="green" button_target="self" button_rel="nofollow"] plan feature plan feature plan feature plan feature [/gpp_pricing][/one_third_first][one_third][gpp_pricing plan="Silver" cost="$69" per="per month" button_url="http://graphpaperpress.com" button_text="Sign Up" button_color="green" button_target="self" button_rel="nofollow"] plan feature plan feature plan feature plan feature [/gpp_pricing][/one_third][one_third_last][gpp_pricing plan="Bronze" cost="$39" per="per month" button_url="http://graphpaperpress.com" button_text="Sign Up" button_color="green" button_target="self" button_rel="nofollow"] plan feature plan feature plan feature plan feature [/gpp_pricing][/one_third_last]

Result:

Gold
$99
per month
plan feature plan feature plan feature plan feature
Silver
$69
per month
plan feature plan feature plan feature plan feature
Bronze
$39
per month
plan feature plan feature plan feature plan feature

GRIDS

You can use the following shortcodes [one_sixth][/one_sixth], [one_fourth][/one_fourth], [one_third][/one_third], [one_half][/one_half] in any combination as long as they total 1 in then end. The start of each column begins with a shortcode that ends in _first. Each row ends with a shortcode that ends in _last.
You can combine grid with many of the shortcodes above to create complex page layouts. One important point to remember is this: When you are adding your grid shortcodes in the WordPress editor, WordPress will transform all RETURNS as line breaks and add a <br /> tag. This can cause your grids to display in a stair step layout, which isn’t good. To fix this, do not RETURN when adding your grid shortcodes to the WordPress editor.

For example, this is correct:

[one_half_first] This is the first column [/one_half_first][one_half_last] This is the first column [one_half_last]

This is incorrect:

[one_half_first] This is the first column [/one_half_first]
[one_half_last] This is the first column [one_half_last]

Notice that there is a RETURN after the [/one_half_first]? This will cause layout problems (the stair step effect, which we don’t want). Simply make sure that your ending and beginning grid shortcodes but directly up against each other, like this:

[/one_half_first][one_half_last]

Now, onto the full grid shortcodes. Below are some usage examples:

Six Columns
[one_sixth_first]This is the first column[/one_sixth_first][one_sixth]This is the second column[/one_sixth][one_sixth]This is the third column[/one_sixth][one_sixth]This is the fourth column[/one_sixth][one_sixth]This is the fifth column[/one_sixth][one_sixth_last]This is the sixth and last column[/one_sixth_last]

Four Columns

[one_fourth_first]This is the first column[/one_fourth_first] [one_fourth]This is the second column[/one_fourth] [one_fourth]This is the third column[/one_fourth] [one_fourth_last]This is the fourth and last column[/one_fourth_last][

Three Columns
[one_third_first]This is the first column[/one_third_first][one_third]This is the second column[/one_third][one_third_last]This is the third and last column[/one_third_last]

Two Columns
[one_half_first]This is the first column[/one_half_first][one_half_last]This is the second and last column[/one_half_last]

One-Sixth & Five-Sixth Columns
[one_sixth_first]This is the first column[/one_sixth_first][five_sixth_last]This is the second and last column[/five_sixth_last]

One-Third & Two-Third Columns
[one_third_first]This is the first column[/one_third_first][two_thirds_last]This is the second and last column[/two_thirds_last]