Creating a Basic WordPress Shortcode

Creating a basic shortcode is very simple. I will walk through each step and explain what is going on.

First off, all code will go in your current theme’s function.php file; optionally you could create a plugin just for this with the modifications minimal to the existing code. I will be using Notepad++ (Mac: Smultron) as my editor and Cyberduck to upload the files.
 
Today I will be creating a shortcode called Lucy that is used on TheGreatestSummer.

For the shortcode this is all you need:

function lucy_sc( $atts, $content = null ) {
	return ''.$content.'';
}
add_shortcode("lucy", "lucy_sc");

Lets break it down.

function lucy_sc( $atts, $content = null ) {

function lucy_sc functions telling WordPress the following code is one and can be called by its name “lucy_sc”.

---

function lucy_sc( $atts, $content = null ) {
	return ''.$content.'';

return All return means is that when this function is called '.$content.'. This first section '' before .$content. is what the opening tag, [lucy] in my case, is replacing. My code is to set a custom text color. In the first and last part of.$content. is the . the dot is used to group multiple things together in the return, which could also be a variable or the like. So having 'opening code'.$content.'closing code' would mean your opening tag says “opening code” then your content you’re wrapping and finally is “closing code” which is activated by [/lucy] Since the and isn’t PHP code it’s enclosed in quotes so PHP won’t try to interpret it and it sends it straight to the browser.

---

function lucy_sc( $atts, $content = null ) {
	return ''.$content.'';
}
add_shortcode("lucy", "lucy_sc");

Now the hook(function). Here is what you want your shortcode to be. add_shortcode(“lucy”, the first item is what you will write for the code, mine is [lucy]. Remember what we named our function: function lucy_sc( ? Well, the second part of the hook “lucy_sc”); is simply what you wrote as the name of the function. You can name them the same thing: add_shortcode(“lucy”, “lucy”); ==>function lucy(. Honestly, it doesn’t make any difference, it may even make it easier when you want to go back and change or add to it so it is up to you.

Thank you for taking the time to read this, I understand this may be confusing so here are some great articles that explain it much better than I and shows more features.
Wptuts+ I highly recommend this article.
Smashing Magizine
Shortcode API « WordPress Codex

And if you want to skip the shortcode and just add a button to your TinyMCE post and page editor:
BrettTerpstra
TinyMCE « WordPress Codex

You can also find a plugin that will do everything for you:
Shortcodes
TinyMCE Button

post scriptum

This post was going to be called “Creating a Basic WordPress Shortcode and TinyMCE Button” but I finished the first part and just never got started on the second, so that will come as a later post, but I just wanted to get this up in case it might help somebody.