Making Your First WordPress Shortcode

This video and text Quick Guide covers how to create a WordPress shortcode. If you want to learn the basics of WordPress shortcode creation, or if you want a refresher on shortcodes, you’re in the right place.

How WordPress Shortcodes Work

Shortcodes let you run any kind of PHP code, and then print the result into your post content wherever you want.

For example, I could have a shortcode called [smart_sounding_quote] that would shuffle randomly through a database of smart-sounding quotes, and then print one into the post content wherever I place the [smart_sounding_quote] shortcode itself.

We don’t recommend shortcodes as the interface you give your users to control things on their sites, as they’re often hard for untrained users to figure out. However, shortcodes have a lot of power for a WordPress developer, because they let you get any PHP code onto the page in a way you can play with, use, and change. For more information on the proper uses of shortcodes, see our in-depth article on the otpic.

How to Create a WordPress Shortcode

Here’s a video tutorial to WordPress shortcode creation:

Below is a text guide to shortcode creation, with simple code examples.

Steps to take to Create Your First WordPress Shortcode

And of course, if you prefer, here are the step-by-step things you need to do to make your first shortcode.

1. Write your shortcode into the content of a post or page on your WordPress site, like this: [wpshout_shortcode_example]. (You can do this later, but I like to do it first because it makes me think about what I want to call the shortcode before I write any code.)
2. Either create a WordPress plugin to register your shortcode (this is preferred), or do it within your theme’s functions.php file.
3. Open the plugin or theme you want to work in, and add a line of PHP that says add_shortcode( 'name_of_shortcode', 'name_of_function' ). It’s usually a good idea to name the shortcode and function the same thing, as in add_shortcode( 'wpshout_shortcode_example', 'wpshout_shortcode_example' ).
4. Declare your function. (If you copied and pasted the above, you’d end up with a function called wpshout_shortcode_example(). You probably want a better name though.) Your function should follow the forms laid out in the code examples below, depending on what it should be able to do.
5. No matter how your function works, remember to return the content you want to replace the shortcode in the post body. This bit is important! If you echo what you want to appear, it’ll appear in the wrong part of the post’s body.

How to Create a WordPress Shortcode: Code Examples

The shortcode below will print out hi! wherever you write [wpshout_shortcode_example] into your posts’ content.

add_shortcode( 'wpshout_shortcode_example', 'wpshout_shortcode_example' );
function wpshout_shortcode_example() {
	return 'hi!';
}

The shortcode below will print out I like turtles if you write [wpshout_shortcode_example favorite="turtles"] into your posts’ content:

add_shortcode( 'wpshout_shortcode_example', 'wpshout_shortcode_example' );
function wpshout_shortcode_example( $atts ) {
	extract(
		shortcode_atts( array( 'favorite' => '' ), $atts )
	);
	return 'I like ' . $favorite;
}

The shortcode below will print out <span style="color: red;">This is red</span> if you write [wpshout_shortcode_example]This is red[/wpshout_shortcode_example] into your posts’ content:

add_shortcode( 'wpshout_shortcode_example', 'wpshout_shortcode_example' );
function wpshout_shortcode_example( $atts, $content ) {
	return '<span style="color: red;">' . $content . '</span>';
}

More Information on WordPress Shortcodes

Here’s a more in-depth tutorial on how WordPress shortcodes work. It has more detailed code examples, as well as more detail on what shortcodes are useful for:

How to Create WordPress Shortcodes, and Why I Love Them

Here’s a tutorial on a system in PHP called output buffering, which is super-useful for shortcodes:

The Many Uses of PHP Output Buffering in WordPress

If you want to learn all of WordPress’s core systems in depth, shortcodes included, see our premium course Up and Running:

Serious About Learning WordPress Development?

Get Up and Running Today

Up and Running is our complete “learn WordPress development” course. Now in its updated and expanded Third Edition, it’s helped hundreds of happy buyers learn WordPress development the fast, smart, and thorough way.

 

“I think anyone interested in learning WordPress development NEEDS this course.

Before I purchased Up and Running, I had taught myself some WordPress code, but lacked direction. Watching the course’s videos was like a bunch of lights being turned on.

I went from being vaguely familiar with how themes, functions and WordPress itself worked to mastering these. Everything became much clearer.

I very happily recommend this course to anyone willing to listen.”

–Jason Robie, WordPress developer

Take the next step in your WordPress development journey!

Get Up and Running Now

Happy hacking!