code

Shortcodes makes your pages unique!

This page provides instructions for setting up shortcodes and using them to give pages and posts a special look and feel. Shortcodes are plugin domain so we provide the shortcodes as a free plugin called TW Shortcodes.

1. Flat Buttons


Button sizes
Small ButtonMedium
Large

Button styles
Inline Inline
Block

Basic usage

Inserting this shortcode into a post or page will generate this button:
[tw_button url="http://www.tripwiremagazine.com"]Button Text[/tw_button]

Advanced usage

The shortcode also offers more features as shown below.
[tw_button color="blue" url="http://www.tripwiremagazine.com" title="themes" icon_left="twitter" target="_blank" size="large" display="block"]Button Text[/tw_button]
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

Alert Box Text
Alert Box Text
Alert Box Text
Alert Box Text
Alert Box Text
Alert Box Text
Alert Box Text

Basic Usage:

Inserting this shortcode into a post or page will generate this alert box.

[tw_box]Alert Box Text[/tw_box]

Alert Box Text

Advanced Usage:

[tw_box color="green" width="50%" text_align="left" margin_bottom="5px" margin_top="5px"]Lorem ipsum dolor sit amet…[/tw_box]

Lorem ipsum dolor sit amet, illud tritani maiestatis ex nec, nihil epicurei no eos. Sea appetere petentium et, habemus platonem inciderint his ei. Modus vivendum intellegat per cu, ad vivendo petentium aliquando ius, an verterem volutpat nec. Id dicit prompta vis, euismod voluptatum vim at, mel blandit albucius ponderum ut. Ne dolorum offendit necessitatibus eos, no sed eirmod impedit delectus. Per ne tale apeirian, at sea utinam molestie reformidans.

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:

[tw_icon type="checkmark"]

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, illud tritani maiestatis ex nec, nihil epicurei no eos. Sea appetere petentium et, habemus platonem inciderint his ei. Modus vivendum intellegat per cu, ad vivendo petentium aliquando ius, an verterem volutpat nec. Id dicit prompta vis, euismod voluptatum vim at, mel blandit albucius ponderum ut. Ne dolorum offendit necessitatibus eos, no sed eirmod impedit delectus. Per ne tale apeirian, at sea utinam molestie reformidans.

Usage:

[tw_highlight]text to highlight[/tw_highlight]

Generates

text to highlight
Attributes:

color

Available colors:

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

Advanced Usage:

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

text to highlight

5. Dividers

divider

Usage:

[tw_divider]
Generates:


Attributes:

type, color

Available types:

solid, dashed, dotted, double

Available colors:

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

Advanced Usage:

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


6. Grids
Basic Usage:

With grids it is simple to set up pages with special layouts. There is one important point to remember however to make it work… When you are adding your grid shortcodes in the WordPress editor, WordPress will transform all RETURNS into linebreaks and add a
br-tag. This means that if you are not careful all your grids may display in a stair like layout. 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]]? Simply make sure that your ending and beginning grid shortcodes but directly up against each other, like this:
[/one_half_first][one_half_last]….[/one_half_last]

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:


This is the first column

This is the second column

This is the third column

This is the fourth column

This is the fifth column

This is the sixth and last column

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]

Generates:


This is the first column

This is the second column

This is the third column

This is the fourth and last column

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:


This is the first column. Lorem ipsum dolor sit amet, illud tritani maiestatis ex nec, nihil epicurei no eos. Sea appetere petentium et, habemus platonem inciderint his ei.Id dicit prompta vis, euismod voluptatum vim at, mel blandit albucius ponderum ut.

This is the second column. Ne dolorum offendit necessitatibus eos, no sed eirmod impedit delectus. Per ne tale apeirian, at sea utinam molestie reformidans.

This is the third and last column. Sea appetere petentium et, habemus platonem inciderint his ei. Modus vivendum intellegat per cu, ad vivendo petentium aliquando ius, an verterem volutpat nec.

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:


This is the first column. Lorem ipsum dolor sit amet, illud tritani maiestatis ex nec, nihil epicurei no eos. Sea appetere petentium et, habemus platonem inciderint his ei. Modus vivendum intellegat per cu, ad vivendo petentium aliquando ius, an verterem volutpat nec. Id dicit prompta vis, euismod voluptatum vim at, mel blandit albucius ponderum ut. Ne dolorum offendit necessitatibus eos, no sed eirmod impedit delectus. Per ne tale apeirian, at sea utinam molestie reformidans.

This is the second and last column. Lorem ipsum dolor sit amet, illud tritani maiestatis ex nec, nihil epicurei no eos. Sea appetere petentium et, habemus platonem inciderint his ei. Modus vivendum intellegat per cu, ad vivendo petentium aliquando ius, an verterem volutpat nec. Id dicit prompta vis, euismod voluptatum vim at, mel blandit albucius ponderum ut. Ne dolorum offendit necessitatibus eos, no sed eirmod impedit delectus. Per ne tale apeirian, at sea utinam molestie reformidans.

Leave a Reply

Your email address will not be published. Required fields are marked *