How to Enhance WordPress Content with Shortcodes

By Lisa Sabin-Wilson

Just as widgets allow code to generate content for use inside a WordPress sidebar, shortcodes allow code to generate additional content inside a post, page, or other content type.

Widgets can add functionality, navigational aids, and other useful bits of information to your sidebars. What if you want to add dynamic elements (such as automatically generated lists of related content or embed videos) without having to switch to the HTML editor and dealing with complex embed codes? Such situations are where shortcodes come to the rescue.

Gallery shortcode for WordPress

One of the shortcodes built into WordPress is the gallery shortcode.

The most basic gallery shortcode is . In this form, all the default arguments are used. (Shortcodes can also support optional arguments that allow for customization.) By default, a gallery is arranged into three columns and uses thumbnail-sized images. The following shortcode would display the gallery in two columns and use medium-sized images:


In many ways, shortcodes look similar to HTML tags. The gallery shortcode looks like an opening HTML tag that swapped the < and > characters for [ and ].

Embed shortcode for WordPress

Shortcodes also have the capability to surround text by using an opening and closing shortcode. The embed shortcode, another shortcode provided by WordPress, is one.

WordPress can automatically change links to videos on a specific set of sites to an embedded video player. Although this happens when supported video links are left on a line on their own, supported video links can be surrounded by the embed shortcode to explicitly indicate that the link is to be changed into an embedded video. For example:

http://wordpress.tv/2012/08/06/<br/>matt-mullenweg-state-of-the-word-2012/

By adding this to your post or page content, Matt Mullenweg’s 2012 State of the Word video displays in place of the shortcode.

image0.jpg

You may wonder why you would want to use the embed shortcode instead of simply putting the link on its own line. The reason is that, like the gallery shortcode, the embed shortcode supports arguments that allow you to customize the display of the video. The supported arguments are width and height. The following shortcode modifies the embedded video to have a width of 400 pixels:

http://wordpress.tv/2012/08/06/<br/>matt-mullenweg-state-of-the-word-2012/

Notice how the entire video is smaller. This is because reducing the width to 400 pixels automatically scaled down the height as well.

image1.jpg

If both the width and height arguments are used, the video is scaled down to fit inside a box of those dimensions, so you won’t be able to distort the aspect ratio of the video if you don’t get the dimensions exactly right. In practice, it’s often easiest to simply supply the width argument and not the height argument.

Twitter Widget Pro

The Twitter Widget Pro plugin provides more than just a widget; it also adds support for the twitter-widget shortcode. This shortcode provides the same functionality as the widget except that it can be added to content and uses the shortcode method of controlling arguments rather than a widget editor.

At its most basic, the twitter-widget shortcode looks like the following:

[twitter-widget username="lisasabinwilson"]

Note the username argument is set to my Twitter username, lisasabinwilson. When using this shortcode, replace the lisasabinwilson username with the Twitter username that you want to use.

The FAQ page in the Plugin Directory for Twitter Widgets Pro includes a listing of the arguments that are available for the shortcode. Using the same settings for the shortcode results in the following shortcode:

[twitter-widget username="lisasabinwilson" title=
"Twitter Feed" hidereplies="true"]

The title is modified and replies are hidden. This means that you can easily produce the same results whether you decide to use Twitter Widget Pro’s widget or the shortcode feature.

Comprehensive Google Map Plugin

The Comprehensive Google Map Plugin offers both a widget and a shortcode that allow for easily adding a Google map to your site.

The feature of the Comprehensive Google Map Plugin that makes it noteworthy is that shortcodes for it can quickly become very complex and long. For example, consider the following shortcode that displays a map of the White House in the United States:

[google-map-v3 width="350" height="350" zoom="12" maptype="roadmap" mapalign="center" directionhint="false" language="default" poweredby="false" maptypecontrol="true" pancontrol="true" zoomcontrol="true" scalecontrol="true" streetviewcontrol="true" scrollwheelcontrol="false" draggable="true" tiltfourtyfive="false" addmarkermashupbubble="false" addmarkermashupbubble="false" addmarkerlist="1600 Pennsylvania Avenue Northwest Washington, DC 20500{}1-default.png{}The White House" bubbleautopan="true" showbike="false" showtraffic="false" showpanoramio="false"]

That would be quite difficult to manually type without any errors. Fortunately, the Comprehensive Google Map Plugin provides a shortcode-generator tool that makes it easy to have the code generate such complex shortcodes.

After activating the plugin, follow these steps to use shortcode.

  1. Click the Shortcode Builder link under the Google Map Dashboard menu to load the tool to generate new map shortcodes.

    image2.jpg

  2. In the Location setting in the Map Markers section, fill in your location details and then click the Add button for the Location setting.

  3. Click the Generate Shortcode button at the bottom of the page to get the generated shortcode.

  4. Copy the supplied shortcode and paste it into a post or page.

  5. Click the Save Changes button and then view the updated content.

    The shortcode produces an interactive map that visitors can easily navigate through. By clicking the marker, visitors can access options to get directions to or from the location. Although you should always give an address, the map gives visitors a much better understanding of where a location is, which means they won’t have to leave the site to look up the address elsewhere.

    image3.jpg