Shortcodes

Type a simple [shortcode] into one of your Posts or Pages and WordPress will insert a fancy object, such as an accordion or push-button, fully styled and ready to use without you having to write any HTML or CSS!

For example, to insert a button all you need to do is type out the shortcode [[rp_button]] in your Page or Post, and when published, a fully styled button appears on your website. We’ve kept our examples very short and simple, but you can, of course, customize these shortcodes further by specifying attributes inside the shortcode brackets [ ].

Featured Tip: Rapid shortcodes are responsive! Resize your browser while viewing this page to see how the Rapid Platform seamlessly adapts it’s layout for smaller screen sizes – all the way down to an iPhone 3GS viewed in portrait orientation.

[rp_hbar]

Button

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_button][/rp_echo_shortcode]

Features:

  • Buttons can be linked to other pages or shortcode actions.
  • Icons are provided through CSS sprites or Fontello icon packs.
  • Pure CSS animations.
Attributes:
  • caption, link, width, class

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [[rp_button]] yields:

[rp_button]

This button doesn’t actually do anything since none of the attributes have been specified.

Example 2: [rp_echo_shortcode][rp_button caption="Google" link="http://www.google.com" class="icon-gplus"][/rp_echo_shortcode] yields:

[rp_button caption="Google" link="http://www.google.com" icon_class="icon-gplus"]

This button navigates to Google when clicked because the link attribute has been specified.

[/rp_grid]

[rp_hbar]

Horizontal Bar

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_hbar][/rp_echo_shortcode]

Features:

  • The horizontal bar is by far the easiest way to visually divide vertically stacked content.
Attributes:
  • class

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [rp_echo_shortcode][rp_hbar][/rp_echo_shortcode]

[rp_hbar]

Example 2: [rp_echo_shortcode][rp_hbar class="rp-hbar-style-crease"][/rp_echo_shortcode]

[rp_hbar class="rp-hbar-style-crease"]

Example 3: [rp_echo_shortcode][rp_hbar class="rp-hbar-style-float"][/rp_echo_shortcode]

[rp_hbar class="rp-hbar-style-float"]

Example 4: [rp_echo_shortcode][rp_hbar class="rp-hbar-style-stitch"][/rp_echo_shortcode]

[rp_hbar class="rp-hbar-style-stitch"]

Example 5: [rp_echo_shortcode][rp_hbar class="rp-hbar-style-crease2"][/rp_echo_shortcode]

[rp_hbar class="rp-hbar-style-crease2"]

[/rp_grid]

[rp_hbar]

Callout

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_callout][/rp_echo_shortcode]

Features:

  • Callouts add flare to plain text or HTML, demanding more attention from the reader.
Attributes:

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [rp_echo_shortcode][rp_callout][/rp_callout][/rp_echo_shortcode]

[rp_callout][/rp_callout]

Example 2: [rp_echo_shortcode][rp_callout class="rp-callout-style-wave"][/rp_callout][/rp_echo_shortcode]

[rp_callout class="rp-callout-style-wave"][/rp_callout]

[/rp_grid]

[rp_hbar]

Accordion / Toggled Content

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_accordion][/rp_echo_shortcode]

Features:

  • Accordions are useful for condensing information that would normally clutter the page, while still allowing that information to be accessed.
  • Use text, HTML or even shortcodes inside the Accordion.
Attributes:
  • title, width, title_float, icon_float, title_color

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [[rp_accordion /]][[rp_accordion /]] yields:

[rp_accordion /]

[rp_accordion title_float="right" icon_float="left" /]

Two calls to the accordion shortcode create an accordion-like expanding effect. Note the use of a trailing backslash /, required for self-enclosing shortcodes such as this one.

Example 2: [rp_echo_shortcode][rp_accordion title="This is my custom title" title_float="center" icon_float="none" title_color="blue" class="accordion-button-style-perforated"]This is my custom text.[/rp_accordion][/rp_echo_shortcode] yields:

[rp_accordion title="Lazy Dog" title_float="center" icon_class="icon-feather" icon_float="none" title_color="blue" class="rp-accordion-style-perforated"]The quick brown fox jumps over the lazy dog.[/rp_accordion]

The inner text is set by wrapping plain text or HTML inside opening and closing shortcodes.

[/rp_grid]

[rp_hbar]

Likert Scale

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_likert][/rp_echo_shortcode]

Features:

  • Customizable start/end labels via attributes.
  • Reverse or Randomize the Start/End points via attributes.
  • Utilizes a hidden <select> element for storing and submitting likert value to the server.
Attributes:
  • labels, start_text, end_text, reverse

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [[rp_likert]] yields:

[rp_likert]

[/rp_grid]

[rp_hbar]

Image List

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_list]Custom content.[/rp_list][/rp_echo_shortcode]

Description:

Display a list of items with an image floated to the left.

Features:

  • Useful for making fancy bullet lists.
  • Uses a single image or a CSS image sprite with coordinates or an image map with coordinates or a Fontello icon pack.
Attributes:
  • count, span

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [rp_echo_shortcode][rp_list]List content.[/rp_list][rp_list]List content.[/rp_list][rp_list]List content.[/rp_list][/rp_echo_shortcode] yields:

[rp_list count="3" span="1"]List content.[/rp_list]

[rp_list count="3" span="1"]List content.[/rp_list]

[rp_list count="3" span="1"]List content.[/rp_list]

[/rp_grid]

[rp_hbar]

Caption Box

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_caption_box][/rp_echo_shortcode]

Features:

  • Useful for displaying a captioned image.
Attributes:
  • title, count, link

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [rp_echo_shortcode][rp_caption_box][/rp_echo_shortcode] yields:

[rp_caption_box]

Example 2: [rp_echo_shortcode][rp_caption_box title="GlassOcean.net" count="3" link="http://glassocean.net"][/rp_echo_shortcode] yields:

[rp_caption_box title="GlassOcean.net" count="3" link="http://glassocean.net"]

[/rp_grid]

[rp_hbar]

Select Bar

[rp_grid count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_select_bar][/rp_select_bar][/rp_echo_shortcode]

Description:

This shortcode uses CSS3 transparency to create a one-step colorization technique. All that’s required is a single color value.

Features:

  • Start/End labels are customizable via shortcode attributes
  • Reverse or Randomize the Start/End points via shortcode attribute
  • Colors can be specified as HTML Color Names (indianred) or HTML Hex Values (#23fc12).
  • Utilizes a hidden <select> element for storing and submitting likert value to the server.
Attributes:
  • bgcolor

[/rp_grid]

[rp_grid count="2" span="1"]

Example 1: [[rp_select_bar]] yields:

[rp_select_bar]

Example 2: [[rp_select_bar bgcolor="darkblue"]] yields:

[rp_select_bar bgcolor="darkblue"]

Example 3: [[rp_select_bar bgcolor="indianred"]] yields:

[rp_select_bar bgcolor="indianred"]

[/rp_grid]

[rp_hbar]

Grid (Responsive Columns)

[rp_grid_nest0 count="2" span="1"]

Basic usage:

[rp_echo_shortcode][rp_grid][/rp_grid][/rp_echo_shortcode]

Description:

WordPress doesn’t allow nesting shortcodes of the same type. To work around this, Rapid Platform creates several aliases for the shortcode so the same shortcode can be called using a different shortcode name.

Features:

  • Nest columns inside other columns using the included shortcode aliases (rp_grid_nest0, rp_grid_nest1, etc).
  • No need to use separate _first or _last shortcodes like some other frameworks out there.
  • No need to use separate _half or _third shortcodes like some other frameworks out there. One shortcode handles all column layouts.
Attributes:
  • count, span

[/rp_grid_nest0]

[rp_grid_nest0 count="2" span="1"]

Example 1: [rp_echo_shortcode][rp_grid count="2" span="1"][rp_button][/rp_grid][rp_grid count="2" span="1"][rp_button][/rp_grid][/rp_echo_shortcode] yields:

[rp_grid_nest2 count="2" span="1"][rp_callout][/rp_grid_nest2]

[rp_grid_nest2 count="2" span="1"][rp_callout][/rp_grid_nest2]

Example 2: [rp_echo_shortcode][rp_grid_nest2 count="3" span="1"][rp_button][/rp_grid_nest2][/rp_echo_shortcode] yields:

[rp_grid_nest2 count="3" span="1"][rp_callout][/rp_grid_nest2]

[rp_grid_nest2 count="3" span="1"][rp_callout][/rp_grid_nest2]

[rp_grid_nest2 count="3" span="1"][rp_callout][/rp_grid_nest2]

Example 3: Nested Columns

[rp_grid_nest2 count="2" span="1" class="rp-column-group-dashed"]

A) Left

[rp_grid_nest3 count="2" span="1"]

B) Left

[rp_grid_nest4 count="2" span="1"]

C) Left

[/rp_grid_nest4]

[rp_grid_nest4 count="2" span="1"]

C) Right

[/rp_grid_nest4]

[/rp_grid_nest3]

[rp_grid_nest3 count="2" span="1"]

B) Right

[/rp_grid_nest3]

[/rp_grid_nest2]

[rp_grid_nest2 count="2" span="1"]

A) Right

[/rp_grid_nest2]

[/rp_grid_nest0]

[rp_hbar]