Codeable info

Creating Your First WordPress Shortcode

Posted on by in WordPress Tutorials

WordPress shortcodes are very useful tools that allow developers to provide extra functionality to their theme / plugin users.

Shortcodes are often used for:

  • Creating nicely-styled lists
  • Embedding contact forms
  • Displaying content in columns
  • Including google maps in post content
  • Applying extra styles to text and images
  • Creating download buttons
  • And anything else you can think of . . .

So let’s learn the very basics of how to create shortcodes for your plugin or theme.

First, a simple shortcode to display text (such as an author bio). Paste the code below into your functions.php or main plugin file:

1
2
3
4
function bioText() {
    return 'The author is an experienced WordPres developer, blogger, and more. ';
}
add_shortcode('biotext', 'bioText');

You can now use [biotext] in your post content and it will be replaced with:

The author is an experienced WordPres developer, blogger, and more.

That’s a really, really, simple example, so let’s get a little more advanced now. This shortcode is almost exactly the same as the one above, except it let’s us define the text we want to be displayed.

1
2
3
4
function bioText( $atts, $content = null ) {
	return '<div class="biotext">"'.$content.'"</div>';
}
add_shortcode('biotext', 'bioText');

Now you’d use the shortcode like this:

[biotext]This is the text I want to display.[/biotext]

which will render as:

1
<div class="biotext">This is the text I want to display.</div>

Because our text gets wrapped in a DIV tag, we can style it any way that we want.

These are both simple examples, and we can get a lot more advanced. In follow up posts, I will demonstrate how to begin adding variables to your short codes.

For now, you might be interested in checking out some of these resources:

Comments Closed

Codeable info