Drupal 7.x. How to use shortcodes

This tutorial is going to explain you how to use shortcodes in Drupal 7.x templates.

Drupal 7.x. How to use shortcodes

Shortcodes are actually macros used in the text of contents. These macros change the text of the content and format the given part through the theme engine. Shortcodes are used instead of writing dozens of code lines to perform some functions.

To use shortcodes, make sure that the Shortcode and TM Shortcodes modules are enabled.

You can check the full list of all available shortcodes in the Text format (Full HTML) section while creating a node:

Let’s take a closer look at the shortcodes:

1. [clear][/clear] inserts a float-clearing html item (div or span) around the given text and this way clears floated blocks. The shortcode contains the following attributes:

   • class – an additional class;

   • id – an element indicator (id);

   • type – an element type: block (div, d) or in-line (span, s).

   You can use the simple [clear /] to add a space in text. It works as the HTML <br /> tag that inserts a single line break.

2. [col][/col] displays content in columns. The shortcode contains the following attributes:

   • align – columns alignment: right – a column will appear on the right side of the external block, center – a column will appear in the center of the external block;

   • class – an additional element class;

   • clear – clears floated blocks: clear-both – on both sides, clear-left – on the left side only, clear-right – on the left right only;

   • last – should have “1” value for the last column;

   • width – column width: 1-2 – a half, 1-3 – a third, 2-3 – two thirds, 1-4 – a fourth, 3-4 – three fourths, 1-5 – a fifth, 2-5 – two fifths, 3-5 – three fifths, 4-5 – four fifths, 1-6 – a sixth or 5-6 – five sixths external blocks.

   It is recommended that you use this shortcode inside [clear][/clear] shortcode.

   For example:

   [clear type="div"]
   	[col width="1-2"]column content[/col]
   	[col width="1-2"]column content[/col]
   	[col width="1-3"]column content[/col]
   	[col width="2-3"]column content[/col]
   	[col width="1-4"]column content[/col]
   	[col width="3-4"]column content[/col]
   	[col width="1-5"]column content[/col]
   	[col width="4-5"]column content[/col]
   	[col width="2-5"]column content[/col]
   	[col width="3-5"]column content[/col]
   	[col width="1-6"]column content[/col]
   	[col width="5-6" last="1"]column content[/col]
   [/clear]
   

   

3. [counter][/counter] displays animated counters. The shortcode contains the following attributes:

   • class – an additional class;

   • number – any integer number;

   • timer – count speed from 0 to the specified date in milliseconds.

   The shortcode content serves as a title.

   For example:

   [counter number="300" timer="30" class="custom-class1"]Counter1[/counter]
   [counter number="600" timer="30" class="custom-class2"]Counter2[/counter]
   [counter number="900" timer="30" class="custom-class3"]Counter3[/counter]
   

   In this shortcode we changed the colors of counter numbers by adding css rules with “color” attributes for “custom-class” additional classes. See the screenshot below:

   

4. [icon][/icon] displays FontAwesome icons. The framework uses FontAwesome 4.1.0 version. The shortcode contains the following attributes:

   • class – FontAwesome icon class;

   • number – URL-address, if you want to add a link to the icon.

   For example:

   [icon class="fa-smile-o"]Smile everyday[/icon]
   [icon class="fa-star"]Reach for the Stars[/icon]
   [icon class="fa-coffee"]Coffee Break[/icon]
   

   

   The full list of available icons you can find on this page.

5. [piegraph][/piegraph] displays a cycle progress indicator. The shortcode contains the following attributes:

   • barcolor – a color of the bar line;

   • class – an additional element class;

   • linewidth – the line width, any integer number;

   • percent – a progress in percents (0-100);

   • trackcolor – a color of the track line (progress line);

   • width – diameter of the progress bar, any integer number.

   The shortcode content serves as a title.

   For example:

   [piegraph percent="30" width="200" barcolor="#D864D8" trackcolor="#cccccc" linewidth="3"]Piegraph1[/piegraph]
   [piegraph percent="60" width="200" barcolor="#95E495" trackcolor="#cccccc" linewidth="3"]Piegraph2[/piegraph]
   [piegraph percent="90" width="200" barcolor="#33CCCC" trackcolor="#cccccc" linewidth="3"]Piegraph3[/piegraph]
   

   

6. [progressbar][/progressbar] displays a progress bar. The shortcode contains the following attributes:

   • class – an additional element class;

   • percent – a progress in percents (0-100).

   For example:

   [progressbar percent="30"]Progress1[/progressbar]
   [progressbar percent="60"]Progress2[/progressbar]
   [progressbar percent="90"]Progress3[/progressbar]
   

   

7. [gmap][/gmap] inserts a Google map. The shortcode contains the following attributes:

   • class – additional class;

   • lat_coord – latitude coordinate;

   • lng_coord – longitude coordinate;

   • zoom_value – initial zoom level of the map. Use values from 1 to 20;

   • zoom_wheel – adds a scroll wheel to the map. Use “yes” or “no” value.

   For example:

   [gmap lat_coord="55.861263" lng_coord="-4.251604" zoom_value="15" zoom_wheel="no"][/gmap]
   

   

   You can follow this tutorial to find proper coordinates for your Google map shortcode: Drupal 7.x. Google Map configuration.

Most shortcodes (except [gmap] and [icon]) contain “class” attribute that allows to add custom styles to the used shortcodes via CSS code. You can also combine these shortcodes to create the required page layout.

This is the end of the tutorial. Now you know how to manage shortcodes in Drupal 7.x templates.

Feel free to check the detailed video tutorial below:

Drupal 7.x. How to use shortcodes