Shortcodes are a WordPress exclusive. Introduced in WordPress 2.5, shortcode is a set of functions that instruct WordPress to output specific code. Think of shortcode as a macro where simple keystrokes make something complex and beautiful happen. It is that simple. Square brackets [ ] are used to trigger the code. Examples:

Drocap
[ dropcap ]S[ /dropcap ]hortcodes will then display as:

Shortcodes


Shadowbox
[ box type=”shadow” ] Box content [ /box ] creates a shadow box. (See more examples below) When your post is saved, WordPress will parse the content and automatically transform the shortcodes to perform its specific functions.

Notes:

For the purpose of illustration, a space has been added between the square bracket and its content to the demo string that illustrates the shortcode usage. This effectively deactivates the shortcode. The code you use will not have a space between the square brackets.

All WordPress themes developed by Websites by Robyn supports an extensive list of shortcodes, including but not limited to the following examples.

Most themes will have a shortcode generator or shortcode insertion tools.

Shordcodes Insert Tools in Page Post Editor

1. Button Varieties

Small Buttons

Button Text

Shortcode Example [ button link=”http://somedomain.com” ]Button Text[ /button ]

Button Text

Button Text

Button Text

Button Text

Button Text

Button Text

Button Text

Button Text

Button Text

Available Colors: Blue | Light Blue | Silver | Black | Pink | Purple | Orange | Green | Red

Icon Buttons

Download

Shortcode Example [ button link=”#” type=”icon” ]Button Text [ /button ]

Search

Refresh

Question

People

Warning

Mail

Heart

Notice

Stats

RSS

Available Icons: search | refresh | question | people | warning | mail | heart | notice | stats | rss

Add link: link=”http://somedomain.com”

Big Buttons

2. Tool Tips

Easily add tooltips to your blog using the [ tooltip ] shortcode. These beautiful jQuery tooltips can be added to any element, making it a great way to add additional info to your post without adding clutter.

Hover your mouse over the trigger text to view the tool tip in action.

DEMO: Hover me for a quick demoHere is your extended information. How cool is this? and extended information!

3. Column Layouts

Sometimes it can get frustrating trying to organize content via the WordPress text editor. With the column layout shortocdes, however, you can now break down your content into any number of advanced layouts giving variety and hierarchy to your post. Columns can be created in halves, thirds, fourths and two-thirds.

One Half

Morbi egestas pharetra lacus, ut condimentum justo convallis vitae. Nam gravida porttitor auctor. Vivamus velit turpis, molestie id porttitor eget, mollis a justo. Vivamus vel diam at eros faucibus porttitor. Vestibulum dignissim accumsan tincidunt. Ut velit dolor, dignissim eu hendrerit ac, pretium tempus neque. Vestibulum dapibus, nisi fermentum tempus convallis, sapien tellus ultricies felis, sit amet commodo nisl leo quis ligula. Vestibulum ut est vel felis rhoncus fermentum vel quis turpis. Sed nec augue non lorem facilisis eleifend eu sit amet mauris. Vestibulum in tellus et diam porttitor hendrerit sit amet quis mauris. Cras bibendum augue dolor, sed iaculis velit. Maecenas purus nulla, pulvinar semper scelerisque nec, tincidunt ac est. Duis pellentesque lacinia est vestibulum laoreet. In turpis tortor, tincidunt sit amet feugiat ac, tincidunt at lacus. Ut aliquet purus et justo tincidunt at viverra ligula cursus.

Other Half

Morbi egestas pharetra lacus, ut condimentum justo convallis vitae. Nam gravida porttitor auctor. Vivamus velit turpis, molestie id porttitor eget, mollis a justo. Vivamus vel diam at eros faucibus porttitor. Vestibulum dignissim accumsan tincidunt. Ut velit dolor, dignissim eu hendrerit ac, pretium tempus neque. Vestibulum dapibus, nisi fermentum tempus convallis, sapien tellus ultricies felis, sit amet commodo nisl leo quis ligula. Vestibulum ut est vel felis rhoncus fermentum vel quis turpis. Sed nec augue non lorem facilisis eleifend eu sit amet mauris. Vestibulum in tellus et diam porttitor hendrerit sit amet quis mauris. Cras bibendum augue dolor, sed iaculis velit. Maecenas purus nulla, pulvinar semper scelerisque nec, tincidunt ac est. Duis pellentesque lacinia est vestibulum laoreet. In turpis tortor, tincidunt sit amet feugiat ac, tincidunt at lacus. Ut aliquet purus et justo tincidunt at viverra ligula cursus.

Shortcode Example
[ one_half ] First half [ /one_half ] [ one_half_last ] Second Half [ /one_half_last ]

One Third

Suspendisse accumsan semper aliquam. Praesent sed consequat nibh. Suspendisse vel velit in dolor convallis tincidunt. Fusce ultrices imperdiet nunc in elementum. Maecenas ac convallis lorem. Quisque sagittis nisi id nisi dignissim et pellentesque tortor condimentum. Quisque lobortis eros a quam laoreet ultrices eu ac erat. Vestibulum convallis porttitor odio sit amet accumsan. Morbi tempor dapibus lorem, et sagittis mi vulputate non. Proin id metus quis sem tempor aliquet. Sed sed nisl non metus molestie suscipit. Etiam laoreet interdum facilisis. Sed posuere quam ac ipsum dignissim vulputate.

One Third

Suspendisse accumsan semper aliquam. Praesent sed consequat nibh. Suspendisse vel velit in dolor convallis tincidunt. Fusce ultrices imperdiet nunc in elementum. Maecenas ac convallis lorem. Quisque sagittis nisi id nisi dignissim et pellentesque tortor condimentum. Quisque lobortis eros a quam laoreet ultrices eu ac erat. Vestibulum convallis porttitor odio sit amet accumsan. Morbi tempor dapibus lorem, et sagittis mi vulputate non. Proin id metus quis sem tempor aliquet. Sed sed nisl non metus molestie suscipit. Etiam laoreet interdum facilisis. Sed posuere quam ac ipsum dignissim vulputate.

One Third

Suspendisse accumsan semper aliquam. Praesent sed consequat nibh. Suspendisse vel velit in dolor convallis tincidunt. Fusce ultrices imperdiet nunc in elementum. Maecenas ac convallis lorem. Quisque sagittis nisi id nisi dignissim et pellentesque tortor condimentum. Quisque lobortis eros a quam laoreet ultrices eu ac erat. Vestibulum convallis porttitor odio sit amet accumsan. Morbi tempor dapibus lorem, et sagittis mi vulputate non. Proin id metus quis sem tempor aliquet. Sed sed nisl non metus molestie suscipit. Etiam laoreet interdum facilisis. Sed posuere quam ac ipsum dignissim vulputate.

Shortcode Example
[ one_third ] 1st third content [ /one_third ] [ one_third ] 2nd third content [ /one_third ] [ one_third_last ] 3rd column content [ /one_third_last ]

One Fourth

Sed fringilla eleifend sapien. Pellentesque venenatis tortor velit, ac porttitor risus. Curabitur egestas risus in dui elementum aliquam. Morbi aliquam ipsum nec lectus auctor dictum vel eu purus. Ut ut aliquet ante. Suspendisse nisi neque, luctus quis fringilla ac, lacinia eu tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae quam diam, ac blandit lectus.

One Fourth

Sed fringilla eleifend sapien. Pellentesque venenatis tortor velit, ac porttitor risus. Curabitur egestas risus in dui elementum aliquam. Morbi aliquam ipsum nec lectus auctor dictum vel eu purus. Ut ut aliquet ante. Suspendisse nisi neque, luctus quis fringilla ac, lacinia eu tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae quam diam, ac blandit lectus.

One Fourth

Sed fringilla eleifend sapien. Pellentesque venenatis tortor velit, ac porttitor risus. Curabitur egestas risus in dui elementum aliquam. Morbi aliquam ipsum nec lectus auctor dictum vel eu purus. Ut ut aliquet ante. Suspendisse nisi neque, luctus quis fringilla ac, lacinia eu tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae quam diam, ac blandit lectus.

One Fourth

Sed fringilla eleifend sapien. Pellentesque venenatis tortor velit, ac porttitor risus. Curabitur egestas risus in dui elementum aliquam. Morbi aliquam ipsum nec lectus auctor dictum vel eu purus. Ut ut aliquet ante. Suspendisse nisi neque, luctus quis fringilla ac, lacinia eu tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae quam diam, ac blandit lectus.

Shortcode Example
[ one_fourth ]Content[ /one_fourth ][ one_fourth ]Content[ /one_fourth ][ one_fourth ]Content[ /one_fourth ][ one_fourth_last ]Content[ /one_fourth_last ]

One Third

Sed fringilla eleifend sapien. Pellentesque venenatis tortor velit, ac porttitor risus. Curabitur egestas risus in dui elementum aliquam. Morbi aliquam ipsum nec lectus auctor dictum vel eu purus. Ut ut aliquet ante. Suspendisse nisi neque, luctus quis fringilla ac, lacinia eu tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae quam diam, ac blandit lectus.

Two Thirds

Vestibulum iaculis accumsan rhoncus. Sed a adipiscing magna. Morbi a urna purus. Aenean quis tellus nisl. Aliquam eu ante eget magna vulputate egestas a et elit. Ut nec purus vel sapien laoreet facilisis sed quis nisl. Integer eget tortor nec nisi faucibus pulvinar ac at mi. Nullam vitae neque justo. Fusce sed volutpat risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla auctor porta dui, nec bibendum est vehicula et. Praesent velit velit, pulvinar posuere tincidunt a, dapibus et turpis. Aenean lacus leo, ultrices ac convallis in, tincidunt in massa. Duis volutpat pretium leo, lobortis malesuada felis volutpat in. Aliquam eu ante eget magna vulputate egestas a et elit. Ut nec purus vel sapien laoreet facilisis sed quis nisl. Integer eget tortor nec nisi faucibus pulvinar ac at mi.

Shortcode Example
[ one_third ] content [ /one_third ] [ two_third_last ] content [ /two_third_last ]

One Fourth

Duis ut nisl porta nulla tincidunt ullamcorper at vel erat. Curabitur malesuada, libero vitae tempor volutpat, sapien leo lacinia magna, varius blandit ante justo sed nibh. Maecenas quis lectus lorem.

One Fourth

Duis ut nisl porta nulla tincidunt ullamcorper at vel erat. Curabitur malesuada, libero vitae tempor volutpat, sapien leo lacinia magna, varius blandit ante justo sed nibh. Maecenas quis lectus lorem.

One Half

Duis ut nisl porta nulla tincidunt ullamcorper at vel erat. Curabitur malesuada, libero vitae tempor volutpat, sapien leo lacinia magna, varius blandit ante justo sed nibh. Maecenas quis lectus lorem. Nulla facilisi. Proin pharetra aliquet sapien eu rhoncus. Aliquam placerat blandit blandit. Suspendisse sit amet est metus. Donec ultrices malesuada congue. Proin aliquet, lorem non vehicula semper, enim lorem aliquam tortor, sed blandit augue erat a risus.

Shortcode Example
[ one_fourth ]Lorem[ /one_fourth ][ one_fourth ]Lorem[ /one_fourth ][ one_half_last ]Lorem[ /one_half_last ]

4. Content Boxes

Shadow Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ultricies dolor. Ut posuere mollis consectetur. Suspendisse venenatis, odio a lacinia facilisis, tellus urna dignissim urna, quis tristique lorem mauris et libero. Pellentesque urna purus, condimentum a interdum at, vehicula nec sem! Morbi ornare laoreet augue, sit amet pulvinar magna ullamcorper non. Vivamus vehicula purus non mauris.

[ box ] Shadow Box Content [ /box ]

Warning Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ultricies dolor. Ut posuere mollis consectetur. Suspendisse venenatis, odio a lacinia facilisis, tellus urna dignissim urna, quis tristique lorem mauris et libero. Pellentesque urna purus, condimentum a interdum at.

[ box type=”warning” ] Box Content [ /box ]

Info Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ultricies dolor. Ut posuere mollis consectetur. Suspendisse venenatis, odio a lacinia facilisis, tellus urna dignissim urna, quis tristique lorem mauris et libero. Pellentesque urna purus, condimentum a interdum at.

[ box type=”info” ] Info Box Content [ /box ]

Download Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ultricies dolor. Ut posuere mollis consectetur. Suspendisse venenatis, odio a lacinia facilisis, tellus urna dignissim urna, quis tristique lorem mauris et libero. Pellentesque urna purus, condimentum a interdum at.

[ box type=”download” ] Download Box Content [ /box ]

Bio Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ultricies dolor. Ut posuere mollis consectetur. Suspendisse venenatis, odio a lacinia facilisis, tellus urna dignissim urna, quis tristique lorem mauris et libero. Pellentesque urna purus, condimentum a interdum at.

[ box type=”bio” ] Box Content [ /box ]

Bitchen Slider

Graphically engage your visitors with image slide shows.

View Image Slider Shortcode

[ tabs slidertype=”images” fx=”slide” auto=”yes” autospeed=”4500″ ] [ imagetab width=”760″ height=”450″ ]http://hqsecure.com/wp-content/uploads/2010/12/Big-Wave-Surfing1.jpg[ /imagetab ] [ imagetab width=”760″ height=”450″ ]http://hqsecure.com/wp-content/uploads/2012/03/Surf-City-Wall-Art.jpg[ /imagetab ] [ imagetab width=”760″ height=”450″ ]http://hqsecure.com/wp-content/uploads/2010/12/Surfing-Safari.jpg[ /imagetab ] [ imagetab width=”760″ height=”450″ ]http://hqsecure.com/wp-content/uploads/2010/12/Toes-on-the-Nose.jpg[ /imagetab ] [ /tabs ]

Tabbed Content

Make the most of your screen real estate with tabbed content.

A soft, shiny, yellow element that is the most malleable of all the metals. It occurs in veins and in alluvial deposits. Because it is very durable, resistant to corrosion, and a good conductor of heat and electricity, gold is used as a plated coating on electrical and mechanical components. It is also an international monetary standard and is used in jewelry and for decoration.
Silver is a white ductile very malleable metallic element that is capable of a high degree of polish, is chiefly monovalent in compounds, and has the highest thermal and electric conductivity of any substance.

3 Year Bronze

Bronze encompasses any of various alloys consisting essentially of copper and tin, the tin content not exceeding 11 percent, and or any of various other alloys having a large copper content.

View Tabbed Content Shortcode Example

[ tabs slidertype=”top tabs” ] [ tabcontainer ] [ tabtext ]Gold[ /tabtext ] [ tabtext ]Silver[ /tabtext ] [ tabtext ]Bronze[ /tabtext ] [ /tabcontainer ] [ tabcontent ] [ tab ]Tab 1 content.[ /tab ] [ tab ]Tab 2 Content[ /tab ] [ tab ]Tab 3 content[ /tab ] [/tabcontent] [/tabs]

Author

Display groovy author information with your content.

Author: Robyn Millheimm  –  Please note that the shortcode displays here are representative of one particular collection of shortcodes. Other collections may differ graphically, but still look bitchen.

Shortcode Example
Shordcodes Author Example

Socials

Share

Link to Facebook: Share

Share at Twitter: 

Shortcode Example
[ facebook ] | [ retweet ]

Lists

  • Item One
  • Item Two
  • Item Three
  • Item Four
[ custom_list type=”check” ] List Content [ /custom_list ]
  • Item One
  • Item Two
  • Item Three
  • Item Four
[ custom_list type=”x” ] List Content [ /custom_list ]
  • Item One
  • Item Two
  • Item Three
  • Item Four
[ custom_list type=”dot” ] List Content [ /custom_list ]