DT Shortcodes WordPress Plugin

NOTICE: This plugin hasn’t been updated for a while (2015) and is no longer supported. We’re keeping it here for historical purposes, I guess. There’s just so many great page builders and shortcode plugins out there that this one became a bit redundant.

The DT Shortcodes WordPress plugin is a free, straight-forward shortcodes plugin that allows you to quickly and easily add buttons, tabs, accordians, toggles, pricing tables, progress bars, tooltips, columns, icons from Font Awesome and more to your posts via a handy button that’s added to your TinyMCE editor.

Just download the plugin below, upload to your site using the dashboard or FTP, activate it, and you’re all ready to go.   See below for detailed look at the included shortcodes and their options.

1. DT Buttons
2. DT Alerts
3. DT Highlights
4. DT Tooltips
5. DT Tabs
6. DT Accordians
7. DT Toggles
8. DT Progress Bars
9. DT Pricing Tables
10. DT Columns

DT Buttons

DT Shortcodes includes three different button sizes in seven different colors.  Additionally, users can specify an icon for buttons selected from the Font Awesome Icons Set.

Attributes: url, color (grey, green, blue, purple, red, orange, black), size (small, medium, large), display (inline, block), icon (Font Awesome class)

Example usage:

[dt_button color="green" size="small" display="inline" icon="fa-camera"] Button Text [/dt_button]

Small Buttons

Medium Buttons

Large Buttons with icons

DT Alerts

DT Alerts come in seven different colors, and include an optional border.  Additionally enable a closing option so that visitors can hide the alert once they’ve read it.

Attributes: close (yes, no), color (grey, green, blue, purple, red, orange, black), border(true, false)

Example usage:

[dt_alert color="green" close="yes" border="false"] Alert Content [/dt_alert]

DT Highlights

Simple and straight to the point: highlight your text with one of seven colors.

Attributes: color (grey, green, blue, purple, red, orange, black)

Example usage:

[dt_highlight color="blue"] Highlight Text [/dt_highlight]

DT Tooltips

Add qTips2 Tooltips to post elements using the DT Tooltips shortcode.

Attributes for tabgroup: style (horizontal, vertical)

Example usage:

[dt_tooltip title="Tooltip Title" tooltip="Tooltip content" arrow="top center" pos="bottom center" style="qtip-tipsy"] Element with attached tooltip [/dt_tooltip]

DT Tabs

DT Tabs uses jQuery UI’s built in Tabs.   You have two layout options – horizontal for traditional along-the-top tabs, and vertical for tabs the run vertically along the left of your tabbed content.  The tabs require two shortcodes: one container for the tab group, and one for each tab.

Attributes for tabgroup: style (horizontal, vertical)

Attributes for individual tabs: title (the desired title of the tab)

Example usage:

[dt_tabgroup style="horizontal"][dt_tab title="Tab Title"] Tab Content [/dt_tab][/dt_tabgroup]

Horizontal Tabs

Vertical Tabs

DT Accordian

No shortcode module would be complete with out an accordian shortcode.  Like tabs, the accordian requires two shortcodes: a container for the group, and shortcodes for the individual sections.

Attributes for accordian: none

Attributes for individual sections: title (the desired title of the tab), icon (Font Awesome icon class)

Example usage:

[dt_accordian][dt_accordian_section title="Accordian Title"] Accordian Content [/dt_accordian_section][/dt_accordian]

DT Toggles

Like the accordian – but you know, different.  DT Toggles are a simple implementation that calls up a no-nonsense jQuery script.

Attribues: title (the desired title of the tab), icon (Font Awesome icon class)

Example usage:

[dt_toggle title="Toggle Title" icon="fa-asterisk"] Toggle Content [/dt_toggle]

DT Progress Bars

DT Shortcodes also includes some fancy looking progress bars, in seven different colors, optimized for themes with both light and dark backgrounds. Stripes and animation can be enabled and disabled.

Attribues: color (grey, green, blue, purple, red, orange, black ), label ( the title, or what this progress bar is measuring), progress (actual percentage), style (light, dark), active (true, false), striped (true, false)

Example usage:

[dt_progressbar color="green" label="HTML5" progress="90%" style="light" striped="true" active="true"]

DT Pricing Tables

The pricing table shortcodes allow you to quickly showcase your available subscriptions or plans.  As with the Accordians and Tabs, the pricing tables use two shortcodes: a wrapping container, and a shortcode for each individual pricing table.

Attribues for grouping shortcode: style (spaces, no-spaces ), columns ( two, three, four, five)

Attribues for individual tables: color (grey, green, blue, purple, red, orange, black ), plan ( the name of the advertised plan or service), term  (per month/per year/lifetime, etc.), buttonurl (the button url)

Example usage:

[dt_pricing_group style="no-spaces" columns="three"][dt_pricing plan="Basic" price="$29" term="per year" button="Order Now" url="#" color="green"] Pricing Content [/dt_pricing][/dt_pricing_group]

DT Columns

The DT Columns shortcodes allow you to implement a basic responsive grid with ease.  Choose from one half, one third, one fourth or one sixth.

Attribues: pos (first, last )

Example usage:

[dt_one_third pos="first"] First Column Content [/dt_one_third]
[dt_one_third] Second Column Content [/dt_one_third]
[dt_one_third pos="last"] Third Column Content [/dt_one_third]