GUEST POST: WordPress Custom Shortcode Tutorial

While Aimee is the brains behind this whole AYMB operation, and the queen of all things content, there is one aspect in which she does not much dabble: site customization and maintenance. That’s all me. It’s why I went to law school. Code Monkey, Esq.

Aimee asked if I would provide an occasional tutorial on some of the technical aspects of AYMB, the Thesis theme/framework on which it runs, and WordPress generally. Of course, I’m happy to oblige. How many turorials will follow, and how advanced/comprehensive/technical in nature they will be, depends in large part on how they are received. So, if you dig these kinds of posts or have any suggestions, please let us know in the comments.

This tutorial focuses on a time-saving shortcut used on virtually every post on this blog. You may have noticed that all Aimee-written posts contain a signature like the one to the right. The source for the signature is a .png image file that we created by scanning Aimee’s handwriting and then sizing/colorizing it in Photoshop. In order to place and align the image, we wrap it in a <div> with the class “signature.” While she used to have to hand code this into every post, she now needs to add only this simple phrase: {signature}. This tutorial explains how.

By way of background, here is the CSS for the signature:

.signature img {margin: -7px 0 10px 25px;}

And here is the html:

<div class="signature">
<img src="/images/aimee-sig.png" alt="signature" />
</div>

Lacking my rather bizarre ability to memorize extensive bits of code, Aimee used to have to open a prior post, copy the code, return to her draft post, and then paste in the code. That’s a lot of clicking around for a rather simple chore that she now accomplishes with the shortcode {signature}. This custom shortcode functions just like the core WordPress shortcodes (such as {gallery} used to load a photo gallery).

If you’re comfortable with FTP and accessing WordPress core files, you can create your own custom shortcode in just a few simple steps:

1. Using an FTP program, locate your functions.php file within your theme’s directory.
2. Save a backup of the functions.php file, just in case things go awry.
3. Open a separate copy of the functions.php file and add your personalized code to the end.  (The code I added is below, with explanations on how to personalize it.)
4. Upload the new copy of functions.php.
5. Voila — Test with a draft post that calls your shortcode within square brackets.

(Note: You can also accomplish the above with the WordPress native editor, but without the benefit of a creating a backup.)

Here is the custom shortcode that we use for Aimee’s signature:

function aimeeSig() {
return '<div class="signature"><img src="/images/aimee-sig.png" alt="signature" /></div>';
}

add_shortcode('signature', 'aimeeSig');

To customize the code:

• replace aimeeSig in the function line with a short name that appropriately describes your function
• replace aimeeSig in the add_shortcode line with the same function name
• replace signature in the function line with the shortcode you intend on using in your posts (i.e., the word that will go within the square brackets)
• replace the html between the single quotes on the return line with whatever text/code you want inserted via shortcode

That’s it. Happy shortcoding!