Shortcode is your next shortcut
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut. – Taken from WordPress.com
This shortcut is a single descriptive word surrounded by brackets that cuts down on repetitive strings of HTML. So, if you want to create a call to action button, all you need to use is the site’s [button] shortcode with the appropriate link. A shortcode saves you time because it’s shorter and easier to remember than HTML. This less complicated view allows you to focus on writing content and not spend time figuring out what the code means. Saving our clients’ time is part of our design process.
Shortcodes are used in the content area of WordPress posts or pages, and they are perfect for our clients who want to take control of their site, but don’t know html code — they essentially take care of the html behind the scenes.
This is an example for demonstration purposes, but your editing window could change from 20 lines of code to 1:
[photo-frame]
[/photo-frame]
With shortcodes, you can create a contact form, insert a gallery, or do any number of usually complicated functions with ease.
Using Shortcodes
Shortcodes can be used by themselves, eg:
[gallery]
or with parameters eg:
[gallery ids="8666,8664"]
Some shortcodes are self-closing which means they are used once to insert content such as the gallery shortcode above. Others are required twice – at the beginning and end of certain content.
We include the following shortcodes with our WordPress sites:
[intro]
The intro shortcode is an example of the a wraparound shortcode, meaning it’s required at the beginning and end of the content. It is meant to be used on an introductory sentence or paragraph. GraceInside is using the intro shortcode on their get involved page:
[photo-frame]
[/photo-frame]
If you took a peek at the post in edit mode, it would look like this:
[intro] “I was naked and you clothed me, I was sick and you visited me, I was in prison and you came to me.” —Matthew 25:36 [/intro]
[button]
Buttons are used for creating call to action links.
[button href="http://openbox9.com"]Button text[/button]
Here’s what a button looks like on our site:
[caption]
[row]
[col span=6]
Caption shortcodes are used on photos. If you edit the caption on an image in the media library section of your WordPress site, and insert that image, the caption shortcode is created automatically for you. Or you can manually add or edit the caption.
Here is the code for the image and caption used on the right:
[caption id="attachment_8733" align="alignright" width="300"]<img src="http://openbox9.com/site/wp-content/uploads/2015/07/deer-300x300.jpg" alt="A wild buck I encountered in WV." width="300" height="300" class="" /> A wild buck I encountered in WV.[/caption]
[/col][col span=6]
[/col][/row]
[gallery]
The gallery shortcode is used when you want to group photos together from your media library.
[gallery ids="8666,8664"]
Here’s what a gallery looks like on our website:
[column] and [row]
The column and row shortcodes create multiple columns within your content. Every row is set up on a 12 column grid (unless otherwise specified). So, as long as the columns are divisible by 12, you can create any number of column combinations.
Basic 2 column grid split evenly:
[row]
[col span=6] ... Column 1 Content ...[/col]
[col span=6] ... Column 2 Content ...[/col]
[/row]
Basic 3 column grid split evenly:
[row]
[col span=4] ... Column 1 Content ...[/col]
[col span=4] ... Column 2 Content ...[/col]
[col span=4] ... Column 3 Content ...[/col]
[/row]
Here’s an example of a evenly split 3 column layout from our clients page:
[photo-frame]
[/photo-frame]
2 Column grid with main column and sidebar:
[row]
[col span=8] ... Main Column ...[/col]
[col span=4] ... Sidebar Column ...[/col]
[/row]
Short codes are great right?
Even though the shortcodes used are the same throughout our sites, they can be styled completely differently. In addition some WordPress plugins may also create/support additional shortcodes – be on the lookout.
While short code are great, like all short cuts, thoughtful planning and execution are needed. If you setup short codes on your website, use care! If we built your website, check your maintenance manual for a complete list of shortcodes available on your site.
Further Reading:
Interested in creating your own shortcodes? Check out the WordPress Shortcode API or follow along with this how-to blog post.
