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.
Rapid Shortcodes
Create buttons in a flash with several designs to choose from. Buttons can be bound to javascript functions or hyperlinks by using an additional attribute in the shortcode.
The accordion opens and closes when clicked to show or hide chunks of content. Great for reducing page clutter while still keeping that information available.
Grid does away with numerous column shortcodes and handles responsive columnized layouts from a single shortcode.
Callouts add flare around a chunk of content. Easily create Quotes or other bold calls to action.
The Select Bar acts like a group of radio buttons; one button can be depressed at a time. Useful for building tabbed/paged content.
Caption Boxes make it easy to insert a captioned image which links to a URL or Javascript function.
Perhaps the most advanced shortcode, the Paged Menu converts any WordPress 3.0+ Menu into a fully responsive paged menu similar to the iPhone screen.
Button
Basic usage:
[rp_button]
Features:
- Buttons can be linked to other pages or shortcode actions.
- Icons are provided through CSS sprites or Fontello icon packs.
- Pure CSS animations.
- Included designs: cassette (default), modern, 3d, perforated, pillar
- Content attributes: caption
- Style attributes: design, color, icon_class, style
- Behavioral attributes: link, target
Example 1: [rp_button] yields:
This button uses the default design (cassette) and doesn’t actually do anything since no other attributes have been specified.
Example 2: [rp_button caption="Google" icon="icon-gplus" link="http://www.google.com"] yields:
This button navigates to Google when clicked because the link attribute has been specified.
Example 3: [rp_button caption="Button" design="modern"][rp_button caption="Button" design="3d"][rp_button caption="Button" design="perforated"][rp_button caption="Button" design="pillar"] yields:
These buttons use a non-default design.
Horizontal Bar
Basic usage:
[rp_hbar]
Features:
- The horizontal bar is by far the easiest way to visually divide vertically stacked content.
- Style attributes: design
Example 1: [rp_hbar]
Example 2: [rp_hbar design="crease"]
Example 3: [rp_hbar design="float"]
Example 4: [rp_hbar design="stitch"]
Example 5: [rp_hbar design="crease2"]
Callout
Basic usage:
[rp_callout]
Features:
- Callouts add flare to plain text or HTML, demanding more attention from the reader.
- Choose from included designs or craft your own with CSS.
- Included designs: balloon, float, quote, wave
- Content attributes: caption
- Style attributes: width, padding, design, style, icon_class
Example 1: [rp_callout][/rp_callout] yields:
Example 2: [rp_callout design="wave"][/rp_callout] yields:
Example 3: [rp_callout design="quote"][/rp_callout] yields:
Accordion / Toggled Content
Basic usage:
[rp_accordion]
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.
- Content attributes: title
- Style attributes: width, title_float, title_color, icon_float, icon_class, style, design
Example 1: [rp_accordion /][rp_accordion title_float="right" icon_float="left" /] yields:
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_accordion title="This is my custom title" title_float="center" icon_float="none" title_color="blue" design="perforated"]This is my custom text.[/rp_accordion] yields:
The inner text is set by wrapping plain text or HTML inside opening and closing shortcodes.
Likert Scale
Basic usage:
[rp_likert]
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.
- Content attributes: labels, start_text, end_text, reverse
Example 1: [rp_likert] yields:
Image List
Basic usage:
[rp_list]Custom content.[/rp_list]
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.
- Content attributes: count, span
- Style attributes: iconset, icon_pos, icon, design
Example 1: [rp_list]List item 1.[/rp_list][rp_list]List item 2.[/rp_list][rp_list]List item 3.[/rp_list] yields:
List item 1.
List item 2.
List item 3.
Caption Box
Basic usage:
[rp_caption_box]
Features:
- Useful for displaying a captioned image.
- Content attributes: title, count
- Style attributes: title_opacity, title_color, width, height, img_abs, img_rel, img_pos, design
- Behavioral attributes: link
Select Bar
Basic usage:
[rp_select_bar][/rp_select_bar]
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.
- Content attributes: options
- Style attributes: bgcolor, bgimage, class
Example 1: [rp_select_bar] yields:
Example 2: [rp_select_bar bgcolor="darkblue"] yields:
Example 3: [rp_select_bar bgcolor="indianred"] yields:
Grid
Basic usage:
[rp_grid][/rp_grid]
Description:
Creates a grid of responsive columns, similar to a traditional HTML table.
We’ve created six aliases for this shortcode to allow nesting grids up to six levels deep, since WordPress by default does not allow nesting shortcodes with the same 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.
- Content attributes: count, span
Example 1: [rp_grid count="2" span="1"][rp_callout][/rp_grid][rp_grid count="2" span="1"][rp_callout][/rp_grid] yields:
Example 2: [rp_grid count="3" span="1"][rp_callout][/rp_grid][rp_grid count="3" span="1"][rp_callout][/rp_grid][rp_grid count="3" span="1"][rp_callout][/rp_grid] yields:
Example 3: Nested Columns
A) Left
B) Left
C) Left
C) Right
B) Right
A) Right
Paged Menu
Basic usage:
[rp_paged_menu]
Description:
Converts a WordPress 3.0+ menu into a responsive, paginated menu similar to the iPhone menus.
Features:
- Included designs: basic (default), dark
- Content attributes: menu
- Style attributes: design
Example 1: [rp_paged_menu] yields: