What's a Shortcode?
Typically, when you place content in WordPress posts, what you see is what you get—or WYSIWYG. If you type, "The quick brown fox jumped over the white fence," that's what you'll see. But WordPress also provides the capability for there to be shorthand references that expand. In programming lingo, these are called macros; essentially short computer programs. In WordPress, these are called shortcodes.
For example, if you were to type [quickfox], a WordPress shortcode could expand this to "The quick brown fox jumped over the white fence." Similarly, if you were to type [quickphrase animal="rabbit" animal_color="yellow" object="fence" object_color="red"], that could expand to "The quick yellow rabbit jumped over the red fence." While this may not seem very useful at the moment, the capability actually is very useful.
Here are four different ways you may have encountered WordPress shortcodes previously: 
WordPress.com offers its own shortcodes for blogs hosted with its service. One of the drawbacks of using these shortcodes is that it makes it very difficult to migrate to a different host or self-host in the future—this is what I call "host lock-in".
Many themes offer shortcodes. For example, my website theme's creatorMySiteMyWay has a huge list of shortcodes. I use the [tabs] shortcodes to allowdynamic sorting of my writing clips by year and by topic (no page refresh necessary):
Dynamic tabs generated by theme shortcodes
Here's the code that does this:
I also use columns on this page:
Page columns generated by shortcodes
Here's the code that accomplishes that:
One of the drawbacks of using your theme's shortcodes is that it makes it very difficult to migrate to a new theme in the future, "theme lock-in". 
Shortcode plugins are plugins that provide a plethora of shortcodes to enhance the look and feel of your blog. Here's a review of many by WPMU, and Shortcodes Ultimate is a good example. These plugins can help you avoid theme and host lock-in, but then you get "plugin lock-in". And plugin shortcodes won't always interact well with your theme.
Many plugins implement their functionality as a shortcode. For example, the Social Locker plugin, which I wrote about recently for Tuts+, is implemented as a shortcode. My post on securing your Mac from potential theft locks the content of the final suggestions to encourage people to share the post on social media.
Social Locker locks content with shortcodes
The code that implements this is a shortcode:
As you can see, using shortcodes offers many benefits but can also increase the complexity of migrating your site or upgrading your theme in the future.
In this tutorial, I want to introduce a fifth kind of shortcode: one that you create yourself, not by writing a plugin (which is an option for developers), but by using a free plugin called Shortcoder. And you don't have to be a programmer to do this.
Shortcoder provides an internal database allowing you to create and store your own shortcode code snippets (HTML, JavaScript, etc.) You can then use your custom shortcodes on posts or pages, and Shortcoder expands them in place.
This is especially useful for content or code snippets you might reuse or repeat on many pages, and it's even more useful if you might want to change content or code and have it reflected everywhere at once.
Here are a few examples of how I use Shortcoder:
On my multi-page tutorials (like this one), I code the table of contents statically as a Shortcoder shortcode and place it on every page. 
The Shortcoder editor - editing my Table of Contents shortcode
Instead of manually pasting the table of contents on all the pages of the tutorial, I use shortcoder and place the [sc:MainTutorial] shortcode on each page. Whenever I need to update my Table of Contents, I do so in the Shortcoder settings area and it will be automatically updated on all my pages. I never have to manually edit the table of contents on every page.
Read about this on Tuts+: Add a Beautiful Table of Contents to Your WordPress Posts (in the second half of the tutorial).
If you don't have any programming experience, writing these shortcode macros may seem a bit unusual; however, most WordPress bloggers have probably come across them by now—or can benefit by learning them.
I also use Shortcoder for ad placements such as AdSmallBanner. I can place the ad on many pages of my site and if I ever want to replace the advertiser (and a new banner and link), I can change it in Shortcoder one time, and it will be reflected on all the pages of my site using the AdSmallBanner shortcode.
Here's an example of an ad in a post on my website:
Example of advertising shortcode
I can easily change the ads everywhere on my site by just editing the shortcode:
Editing my small banner ad shortcode in shortcoder
On my tutorial footers, I like to give people a friendly blurb to follow up with me. And, sometimes I like to change this. Without Shortcoder, a plethora of pages on my site would need to be changed or be out of date. With Shortcoder, I change the tutorial footer one time and it's reflected everywhere:
Editing my tutorial page footer in shortcoder
Shortcoder also supports parameters so you can build a shortcode to display a specific video or map. You can see this illustrated in this video, at 50 seconds in.
If I want to change hosts or themes, my Shortcoder shortcodes will likely still work, or will just need small adjustments.

0 comments:

Post a Comment

 
Top
Blogger Template