WordPress Plugin GPP Shortcodes

Download Demo Version: 1.1

GPP Shortcodes is a free WordPress plugin that allows you to easily add “flat design” buttons, boxes, icons, pricing tables, tabs, toggles and column layouts in your posts and pages without modifying CSS, HTML or PHP.


Use the navigation below to jump to specific instructions:

  1. Flat Buttons
  2. Boxes
  3. Icons
  4. Highlights
  5. Dividers
  6. Accordions
  7. Toggles
  8. Tabs
  9. Google Maps
  10. Pricing Table
  11. Grids


1. Flat Buttons


Buttons with Icons

Basic Usage:

[gpp_button url="http://graphpaperpress.com"]Button Text[/gpp_button]

Generates:

Button Text

Advanced Usage:

[gpp_button color="blue" url="http://graphpaperpress.com" title="themes" icon_left="twitter" target="_blank" size="large" display="block"]Button Text[/gpp_button]

Generates:

Button Text

Attributes:

color, url, title, target, rel, class, icon_left, icon_right, size, display

Available colors:

black, green, blue, red, yellow, pink, purple

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

Available rel:

self, blank, target


2. Boxes


Duis aute irure dolor in reprehenderit.

Duis aute irure dolor in reprehenderit.

Duis aute irure dolor in reprehenderit.

Duis aute irure dolor in reprehenderit.

Duis aute irure dolor in reprehenderit.

Duis aute irure dolor in reprehenderit.

Left aligned text

Right aligned text

Basic Usage:

[gpp_box]Alert Box Text[/gpp_box]

Generates:

Alert Box Text

Advanced Usage:

[gpp_box color="green" width="50%" text_align="left" margin_bottom="50px" margin_top="50px"]Alert Box Text[/gpp_box]

Alert Box Text

Attributes:

color, width, text_align, margin_bottom, margin_top, class

Available colors:

black, green, blue, red, yellow, pink, purple

Text align:

left, right, center


3. Icons


shortcode-flat-icons-genericons

Icons courtesy of Genericons.

Usage:

[gpp_icon type="image"]

Generates:

Availabe Icon 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


4. Highlights


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage:

[gpp_highlight]text to highlight[/gpp_highlight]

Generates

text to highlight

Attributes:

color

Available colors:

grey, black, green, blue, red, yellow, pink, purple

Advanced Usage:

[gpp_highlight color="green"]text to highlight[/gpp_highlight]


5. Dividers











Usage:

[gpp_divider]

Generates:


Attributes:

type, color

Available types:

solid, dashed, dotted, double

Available colors:

grey, black, green, blue, red, yellow, pink, purple

Advanced Usage:

[gpp_divider type="dashed" color="green"]


6. Accordions


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Advanced 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


7. Toggles


Toggle #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another Toggle

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage:

[gpp_toggle title="Toggle Title"]Toggle text[/gpp_toggle]

Attributes:

title, class


8. Tabs


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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


9. Google Maps


Usage:

[gpp_googlemap location="new york,usa"]

Advanced Usage:

[gpp_googlemap location="new york,usa" zoom="5" title="New York" height="500"]

Attributes:

location, height, title, zoom, class


10. Pricing Tables


Gold
$200
per month
  • 100GB Storage
  • 4GB Ram
  • 10 databases
  • 1,000 Emails
  • 500GB Bandwidth
Silver
$100
per month
  • 30GB Storage
  • 1GB Ram
  • 10 databases
  • 1,000 Emails
  • 50GB Bandwidth
Bronze
$40
per month
  • 10GB Storage
  • 512MB Ram
  • 10 databases
  • 1,000 Emails
  • 25GB Bandwidth

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


11. Grids


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 linebreaks and add a
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…

Six Columns

Usage:

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

Generates:

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
ColumnDonec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
onec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc
onec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Four Columns

Usage:

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

Generates:

First Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Second Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Third Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Fourth Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Three Columns

Usage:

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

Generates:

First Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Second Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Third Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Two Columns

Usage:

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

Generates:

First Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.

Last Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.

One-Sixth & Five-Sixth Columns

Usage:

[one_sixth_first]
This is the first column
[/one_sixth_first][five_sixth_last]
This is the second and last column
[/five_sixth_last]

First Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante.

Last Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

One-Third & Two-Third Columns

Usage:

[one_third_first]
This is the first column
[/one_third_first][two_thirds_last]
This is the second and last column
[/two_thirds_last]

First Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Last Column

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.