Custom Shortcodes

This theme has a bunch of custom Shortcode tags that makes adding multiple text columns, toggle boxes, text button, etc. a breeze. This page explains all the included Shortcode tags with examples.

Note: adding Shortcodes requires you to be in HTML mode. Also, if your text appears too small, that is because your next is not wrapped in HTML paragraph tags. You will need to be in HTML mode and manually put in paragraph tags. (the WordPress editor often adds its own paragraph tags, or doesn’t, and one has little control over this. So if your text is too small, go into HTML mode and wrap your text in paragraph tags.)

Multiple Text Columns

Adding multiple columns of text is a snap with the “columns” shortcodes. As an example, to add 4 equal width text columns that span the width of the site, add this to your page (in HTML mode):

[one_quarter]<p>first colum text</p>[/one_quarter]
[one_quarter]<p>2nd colum text</p>[/one_quarter]
[one_quarter]<p>3rd colum text</p>[/one_quarter]
[one_quarter_last]<p>4th column text</p>[/one_quarter_last]

The Multiple Columns sample page has visual samples plus sample code. A couple important things to note here is that you need to surround your text with HTML paragraph tags. And I don’t know why, but you actually do need that extra line break between columns.

Toggle boxes

Click me to see a toggle box in action

It’s so simple to add one of these to you posts or pages.

[toggle title="Clickable text for the toggle box"]Text that appears when you click the title[/toggle]

Link Button

You can make a link into a button that matches your color scheme.

The shortcode tag for this is:

[button URL="http://www.sample.com"]Button Text[/button]

The result would look like this:

Button Text

Drop Cap

You can make the first letter of any paragraph a dropcap with the following code:

[dropcap]O[/dropcap]nce upon a time in a land far far away...

The result would look like this:

O

nce upon a time, in a land far far away… Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Highlight

You can highlight text by changing the background and foreground color of text. You can define up to 2 highlight colors in Theme Options (Miscellaneous section). The colors are designated by the Shortcodes “highlight1″ and “highlight2″.

This is some [highlight1]text to highlight[/highlight1] This is some [highlight2]more text to highlight[/highlight2]

The result would look like this:

This is some text to highlight This is some more text to highlight

Pull Quote

You can make any text become a pull quote which makes it a box, aligned to the left or right, with surrounding text flowing around it.

The shortcode tag for this is:

[pullquote_left]Sample text[/pullquote_left]
[pullquote_right]Sample text[/pullquote_right]

Horizontal Divider Line

This code adds a subtle divider line on the page:

[line]

Which results in a line like this:

Back to Top Link

This one is simple also. It adds a “go to top” link which animates smoothly to the top of the page.

[top]

Which results in a line like this:

Clear

This is one of the most helpful Shortcodes, and is not even visible. Sometimes your content wraps around a floated object (like an image), but you just want the content to start after the image because it’s a new paragraph not related to the image. Simply add this shortcode before your new content:

[clear]

We are taking suggestions

Have an idea for a shortcode tag that would have mass appeal? Just contact me and maybe it’ll be included in an update.