wordpress shortcodes kick ass (or: shortcodes, an affiliate marketer’s best friend)

this one will make the internet marketing peeps smile…

let’s say you have some kind of text or phrase that you use a lot.  it could be anything, but let’s — for the sake of argument, and for showing the full power of this code — assume that the text or phrase includes a link.  let’s go one step further (for the aforementioned affiliate/internet marketers) and say the link is big, long, ugly, and not something that you have memorized like you might a regular url like www.arcanepalette.com.  no, this link is something like http://paybymailandstuff.com/123468752/?id=sooperdooperaffiliate.  that’s not so easy to remember unless you have it saved somewhere and can copy and paste.  which requires you to find it, copy it, and paste it in.  this is where the announcer guy overdubs the flabbergasted and frustrated housewife saying “there has to be a better way!”

THERE IS!

WordPress shortcodes take one block of text and replace it with another.  Possibly you’ve used a plugin that relies on shortcodes…some examples i can think of off the top of my head — because i use them on jazzsequence.com — are the flash audio player plugin and download counter. in both cases i need to put some kind of predefined text in brackets along with something that makes it unique to what i’m trying to embed.  so as i’m writing the post it looks something like [functionname(uniqueidentifier)] or [functionname:uniqueidentifier] — in the case of the audio plugin, for example, the specific usage is [au.dio:audiofile.mp3] and for download counter it’s [downlo.adcounter('downloadname')].  those are shortcodes — it takes one thing that you type into your post, and turns it into something else behind the scenes.  now, let’s go back to our ugly example…

i’ve got the ugly link and i want to link it to the phrase “my fancy product”.  every time.  sure, i could type “my fancy product” as i’m writing the post, highlight the phrase, click the link icon in the visual editor, flip back to my notepad document (or whatever) where i saved the link, copy it, paste it into the link box in WordPress, and then select “open in a new window” (or not, depending on if i want to lure them away from my site…) and hit OK.  i could even save the full link in a notepad document, so i’d have [co]<a href=”http://paybymailandstuff.com/123468752/?id=sooperdooperaffiliate” target=”_blank”>my fancy product</a>[de], and then i would switch over to the HTML editor in WordPress, paste in the full link code, and then switch back to the visual editor and finish my post.  i could do that…but all those extra clicks and switching apps and windows are time consuming, especially if i need to do this multiple times in a post or a page.

that’s where shortcodes come in.  for the same link, i could add this to my [co]functions.php[de] file:

[co]function fancyproduct() {
return ‘<a href=”http://paybymailandstuff.com/123468752/?id=sooperdooperaffiliate” target=”_blank”>my fancy product</a>’;
}
add_shortcode(‘link’, ‘fancyproduct’);[de]

now i can just type [link] while i’m posting, and when the post is published, it replaces that with a link to “my fancy product”.  i’m using this right now to be able to type [a.p] to insert a link back to my business’ website, [ap].  and i’m using it in this post to open and close [co]<code>[de] tags, rather than doing it manually in the HTML editor.  really, the number of uses for this are only limited by the number of things you do.  you can use shortcodes to insert images, text, more code, whatever.  the important thing to remember when you’re doing this on your own is how to set it up right.  so:

[co]1 function fancyproduct(){[de] — that’s the name of your function.  it can be anything but something identifiable makes it easier to recognize later.
[co]2 return ‘[de]this is where you put whatever you want the output to be[co]’;
3 }[de] — this closes the bracket that was opened on line 1 that tells WordPress what to output for the [co]fancyproduct[de] function.
[co]4 add_shortcode(‘[de]this is what you want your shortcode text to be. just remember you don’t need the [ ] brackets here, only when you are actually writing the post[co]’,'[de]this is the name of the function from line 1.  this is important because it sort of makes the whole thing work[co]’);[de]

but how do i edit my [co]functions.php[de] file?

glad you asked.  if you aren’t a hacker like me and already savvy with DreamWeaver or some other HTML editor, Automattic conveniently gave you a text editor right in your WordPress backend.  (if you are a geek, just open the functions.php file in your theme files in your favorite text or HTML editor.)  to get to the built-in theme editor, expand the Appearance tab and click Editor (there’s also a Plugin Editor, too, so make sure you click the Editor link under Appearance).  from the list at the right, click on Theme Functions (functions.php).  now you’re in.

php code can be scary even to someone who’s familiar with HTML.  the [co]<?php /*some code here */ ?>[de] tags are intimidating, and make everything look a lot more like programming.  it’s not.  you just want to add in your shortcode block before the end of a [co]?>[de] bracket, or wrap the whole function in php tags like this:

[co]<?php
function fancyproduct() {
return ‘<a href=”http://paybymailandstuff.com/123468752/?id=sooperdooperaffiliate” target=”_blank”>my fancy product</a>’;
}
add_shortcode(‘link’, ‘fancyproduct’);
?>[de]

and i like to put comments in there so i know what i’m doing.  there’s two ways to comment things in php, you can either use [co]//[de] which you would do if your comment ends at the end of the line or [co]/* some stuff here */[de] for longer comments that can span more than one line.  my final [ap] shortcode function looks like this:

[co]// arcane palette shortcode
function apalette() {
return ‘<a href=”http://www.arcanepalette.com” target=”_blank”>Arcane Palette</a>’;
}
add_shortcode(‘ap’, ‘apalette’);[de]

this trick came from WPShout, where its author, Alex Denning, always posts awesome tips, tricks, and hacks for WordPress.  you can take a look at his post Write Faster with WordPress Shortcodes for another explanation of how they work.