GT Shortcodes (Interface Components)

Follow Gautam Thapar on EnvatoFollow Gautam Thapar on Twitter

Even Better Than Before! – Version 1.3 – Updated on 7th November, 2013

GT Shortcodes is a premium WordPress plugin that boosts your WordPress site/theme with simple, clean, flat & awesome looking user interface elements in the form of simple shortcodes. Creating short codes is so easy with the help of short code editor dialog boxes or the so called shortcodes generator.

Talking about numbers, there are unlimited UI element possibilities if taking into consideration all the variations, styles, types, etc.

NEW! in Version 1.3

  • Animating / Shuffling Numbers
  • Responsive Banner Ads
  • Enhanced Progress Bars

ENHANCEMENTS! in Version 1.2.1

  • Full Control Over Accordion!
  • Font Awesome Icons Updated to Latest Version 4.
  • See change log below for full details

NEW! in Version 1.2

  • 60+ Animations
  • Lazy Load Images
  • QR Codes

NEW! in Version 1.1

  • 360+ Font Awesome Icons
  • Awesome Pricing Tables
  • Super Columns

Silent Features

  • Supports WordPress 3.3+
  • Based on Twitter Bootstrap
  • Supports Bootstrap 2.3.2 & 3
  • Simple,Clean,Flat Designed Elements
  • Responsive Elements
  • Elements Adapt To Bootstrap Theme Style
  • Light Weight Plugin
  • No Load On Database
  • Automatically Clears It’s Data From Database On De-activaton
  • Shortcode Dialog Boxes / Shortcode Generator To Easily Print Shortcodes
  • Works With Bootstrap Based Themes & Even With Non-Bootstrap Based Themes
  • Control Over CSS & JS Files. Enable or Disable As Required
  • Shortcodes Works in Posts, Pages and Widgets.
  • You can also add shortcodes in php template files by placing the shortcode inside do_shortcode function, like shown below -
                <?php echo do_shortcode('[gtglyph]'); ?>
  • Documentation
  • Vast Browser Support
  • Awesome Support


  • Animating / Shuffling Numbers [NEW]: Animated numbers or shuffling numbers are much in fashion these days. They are good for grabbing attention of users to show off vital stats. DEMO
  • Responsive Banner Ads [NEW]: Banner ads come with all the standard web banner sizes but you can also define custom sizes. If no image source is defined then a placeholder image is displayed. Short codes work in widgets too! DEMO
  • Animations: 60+ Animations! An animation is an effect that lets an element gradually change from one style to another. You have the option to rotate, fade, flip, bounce, slide and more. There are four ways to trigger an animation such as on page load, on page scroll, on click and on hover. Not only this, for every animation you can set the duration, iteration, direction, timing, mode and delay options. DEMO
  • Lazy Load Images: Save your website bandwidth + Load your pages faster using Lazy Load Images! Optimize browser rendering and reduce number of HTTP round-trips by deferring the loading of images which are not in the viewport. Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. DEMO
  • QR Codes: 6 Type of QR Codes with the option to set different image sizes! A QR code consists of black modules (square dots) arranged in a square grid on a white background, which can be read by an imaging device (such as a camera) and processed using Reed–Solomon error correction until the image can be appropriately interpreted; data is then extracted from patterns present in both horizontal and vertical components of the image. DEMO
  • Accordions [Enhanced]: Accordions are used to display content in collapsible content panels. Style the accordions your own way by choosing among unlimited colors, 14 toggle icon types & 10 border styles. Change the head background color, head text color, border size-color-style-radius & content background and text color. The accordions are responsive thereby they fit well on every screen. DEMO
  • Alerts: Alerts are used to provide important information to users. Adds an alert box to the page. DEMO
  • Buttons: A button is a user interface element which once clicked triggers an event. Adds a clickable button to the page. DEMO
  • Carousel: Carousel is an image rotator. It is also known as slider. Adds a carousel to the page. DEMO
  • Columns: Column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window. Adds a column to the page. DEMO
  • Font Awesome Icons: Font Awesome gives you scalable vector icons that can instantly be customized. Adds a font awesome icon to the page. DEMO
  • Glyphicons: Glyphicons are precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation. Adds a glyphicon to the page.
  • Labels: Labels are used to identify or designate, describe or classify something. Adds a label to the page. DEMO
  • Popovers: A popover is an overlay which covers the material in a web browser without the need to create a new window. Adds a popover to the page. DEMO
  • Pricing Tables: Pricing tables play an important role for every company that offers products or services. They clearly differentiate between features and prices of different products and services. Adds a pricing table to the page. DEMO
  • Progress Bars [Enhanced]: A progress bar is a component in a graphical user interface used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Adds a progress bar to the page. DEMO
  • Switches: Switches are used toggle between two possibilities such as on or off. Adds a switch to the page. DEMO
  • Tabs: Tabs are used to organize content. Adds a tab to the page. DEMO
  • Tables: Tables are useful for presenting data in an organized manner. Tables are very useful for data comparisons, etc. Adds a table to the page. DEMO
  • Tooltips: A tooltip is a small, boxed text message that pops up when a mouse cursor hovers over an element. Adds a tooltip to the page. DEMO
  • Video Player: Video player is useful for playing videos and movies. Adds a video player to the page. DEMO
  • and more soon..

Quick Demo Videos

Plugin installation and shortcodes usage videos.

Benefits in Bootstrap 3 Version of GT Shortcodes

  • Labels inherit size from parent element.
  • Responsive Tables.

Plugin Support

I will do my 200% to solve problems, if any. I will do my best to respond within 24 hours, generally quickly.

If you are looking for some particular UI element which is not included in this plugin then you can let me know about it using the contact form from here or through the comment section. If possible I will include that element in this plugin.

Let us together make this plugin BETTER!





v1.3.1 [10th November 2013] --

Bug Fixes
1. Fixed version issue.
2. Fixed blank screen issue when selecting 'delete data on plugin deletion'.


v1.3 [7th November 2013] --------

1. Added Animated / Shuffling Numbers.
2. Added Responsive Banner Ads.

3. Enhanced Progress Bars.
4. Now Accordions Support All Kind of Content like images, other short codes, links, etc.
5. Now Tabs Support All Kind of Content like images, other short codes, links, etc.
6. Now Tables Support All Kind of Content like images, other short codes, links, etc.

7. Fixed a little bug with ‘on hover animations’ in bootstrap 3 version.
8. Other minor improvements and fixes.


v1.2.1 Bug Fix [30th October 2013] ---

1. Fixed a bug in button short code where multiple quotes were getting added to the href attribute.
2. Added an option to choose button link target.
3. Added settings link page under plugin name on plugins page.


v1.2.1 [28th October 2013] -----------

1. Added settings link directly under plugin name on plugins list page.

Major Accordion Enhancement - Now Get Full Control Over Accordion.
2. Added 14 Toggle Icons for Accordion.
3. Comma Separator is Now Replaced with a Pipe (vertical bar) Character.
4. Added Option to Choose Default Open Tab.
5. Added Control Over Accordion Border Size, Border Style, Border Radius & Border Color.
6. Added Option to Change Accordion Content Background.
7. Added Option to Change Accordion Content Text Color.

Button Enhancement
8. Added Option to Select Button HTML Tag. It makes it easy to use button within other 3rd party short codes. For example, you can use button within Ninja Popups short code to make popup appear on button click.

Font Awesome Icons Enhancement
9. Updated Font Awesome to Version 4.
10. Font Awesome 4 does not support IE7 so removed that option from options panel.
11. Added option to select minified version of font awesome stylesheet.


v1.2 [23rd October 2013] -----------

1. Added Animations.
2. Added QR Codes.
3. Added Lazy Load Images.

4. Options Page Visual Improvements.
5. Now user has the choice/control over data deletion from database, on plugin deactivation or on plugin deletion.
6. Added more control over scripts and styles.
7. Fixed Pricing Table padding issue.
8. Fixed Pricing Table responsiveness for 5 columns.

For Bootstrap version 3:
10. Added left and right tabs in bootstrap 3 version.

For Bootstrap version 2.3.2
11. Removed alignment option from tabs short code. Now only one option to select default, left or right tab style. Tabs short code need to be updated!


v1.1 [9th October, 2013] -----

1. Added 360+ Font Awesome Icons.
2. Added Pricing Tables.
3. Added Columns.
4. Improved Buttons Shortcode. Now in place of [gtbutton] uses [gtbutton][/gtbutton] shortcode. Button text and icons can be added between shortcode tag.
5. Other Code Improvements.


v1 [3rd October, 2013] -

1. Initial Release