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
Updated May 26th, 2014 for WordPress 3.9+ and TinyMCE 4 Support

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 Text

Medium Buttons

Button Text Button Text Button Text Button Text Button Text Button Text Button Text

Large Buttons with icons

Button Text Button Text Button Text Button Text Button Text Button Text Button Text

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]
  Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

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

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. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.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. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

Vertical Tabs

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. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
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. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

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

She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. 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. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk

Accordian Title Example Two

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. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

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

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. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

Toggle Title Example Two

She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. 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. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk

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"]
HTML520%
CSS340%
PHP80%
WORDPRESS60%
DRUPAL90%

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]
Basic
$29
per month
  • Full Access
  • Cutting-edge features
  • 24/7 Support
  • More!
Developer
$299
Lifetime
  • Full Access
  • Cutting-edge features
  • 24/7 Support
  • More!
Basic
$29
per month
  • Full Access
  • Cutting-edge features
  • 24/7 Support
  • More!
Advanced
$49
per month
  • Full Access
  • Cutting-edge features
  • 24/7 Support
  • More!
Developer
$299
Lifetime
  • Full Access
  • Cutting-edge features
  • 24/7 Support
  • More!
Deity
$667
Eternity
  • Omnipotent Access
  • Cosmic features
  • Timeless Support
  • Infinitely more!

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.

Angrily Comment

1 angry comment

Copyright Siteturner 2023