Shortcode Builder

The Shortcode Builder has undergone extensive changes.

To use these tools, activate the “Williams Shortcode Builder”
plugin, which adds the “Shortcodes” menu (outlined in red below) to your
visual editor. If you only see one row of icons, click on the kitchen sink (green arrow below) to reveal more tools.

What’s a shortcode?

A shortcode is a special set of instructions for WordPress that appears in your editor as text with square brackets around it. Then bracketed code is replaced with different content when looking at the site in non-editing mode.

For example, the shortcode “fruit” it might look like this in your editor:
[fruit]
Some shortcodes have attributes, which appear as name=”value” pairs inside the brackets:
[fruit type="banana" color="yellow"]
Some shortcodes wrap around content with begin and end tags:
[fruit type="banana"]I like bananas[/fruit]


Shortcodes can be typed directly into the page/post editor… if you can remember the shortcode name, which attributes it has, and what their legal values are. The Shortcode Builder provides a user-friendly interface to help you insert shortcodes, so you don’t have to worry about fussy syntax or typos.

Shortcode tools

All the shortcodes in the pulldown menu are listed below. For more detailed instructions on using a specific shortcode, click on its name.

Embed External Content

• Web Page (iframe)

• YouTube

• Google Docs/Cal/Maps

• Course Catalog

• Reuse Post *

Format Content

• Expando *

• Single Tab *

• Tab/Expando Group *

Galleries

• Image Blocks *

• Gallery Grid *

• Gallery Slideshow *

• Gallery Filmstrip *

Creating the shortcode

To insert a shortcode, position your cursor where you’d like the content to appear in your page/post, and select one of the pulldown menu items- this will give you a popup window asking for more details. Hovering over the input boxes will reveal hints, helping you fill out the form.

After filling out the form, which will look something like the screenshot below, click the OK button, and the shortcode will be inserted into your editor.

Editing the shortcode

In the editor (in both visual and text modes), the shortcode will look something like this:
[wms_youtube url="http://youtu.be/kr8nokDlpJY" width="100%" height="600" ]
You can edit the shortcode attributes (the values inside the quotes above) directly, or you can delete the shortcode, and create a new one using the Shortcode Builder tool again.