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.
- DT Buttons
- DT Alerts
- DT Highlights
- DT Tooltips
- DT Tabs
- DT Accordians
- DT Toggles
- DT Progress Bars
- DT Pricing Tables
- 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
Button Text Button Text Button Text Button Text Button Text Button Text Button TextMedium Buttons
Button Text Button Text Button Text Button Text Button Text Button Text Button TextLarge Buttons with icons
Button Text Button Text Button Text Button Text Button Text Button Text Button TextDT 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]This is an example of text with grey highlighting.
This is an example of text with green highlighting.
This is an example of text with blue highlighting.
This is an example of text with purple highlighting.
This is an example of text with red highlighting.
This is an example of text with yellow highlighting.
This is an example of text with black highlighting.
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]Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
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]
Accordian Title Example One
Accordian Title Example Two
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]
Toggle Title Example One
Toggle Title Example Two
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]
One Half
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word “and” and the Little Blind Text should turn around and return to its own, safe country.
One Half
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word “and” and the Little Blind Text should turn around and return to its own, safe country.
One Third
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
One Third
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
One Third
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
One Fourth
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
One Fourth
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
One Fourth
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
One Fourth
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
This is an extremely helpful review, I would love to give a try to this plugin.