How to Make a Custom Shortcode in WordPress.

How to Make a Custom Shortcode in WordPress Overview.

In this tutorial I will explain what a shortcode is, the anatomy of a shortcode, types of shortcodes, how to write shortcodes, where to put your shortcodes and give you some code examples of WordPress shortcodes.

Quickies.

• What is a WordPress Shortcode?
• The Anatomy of a WordPress Shortcode.
• Types of WordPress Shortcodes.
• Best Practices for Writing WordPress Shortcodes.
• What File Should I Put My Shortcodes In?
• Shortcode Examples.
• How to Add a Shortcode to a Theme File.

What is a WordPress Shortcode?

A shortcode is a bit of text between two square brackets that when added to a post, page or widget will execute a piece of PHP code. WordPress and many themes and plugins come with shortcodes but you can also write your own shortcodes. This is a very simple way to get PHP code onto your webpage when you need it.

This is what a basic shortcode looks like: [shortcode_name]

The Anatomy of a WordPress Shortcode.

There are basically three pieces that make up a WordPress shortcode, a handler function, the add_shortcode function and the shortcode itself.

The Handler Function.

The handler function is the function that is executed when WordPress finds a shortcode. It accepts anywhere from 0 to 3 parameters:

• $atts: An array of attributes or an empty string.
• $content: The enclosed content if it is an enclosed shortcode.
• $tag: The shortcode name.

function custom_shortcode( $atts, $content, $tag ){}

The add_shortcode Function.

The add_shortcode function registers the handler function and recieves 2 required parameters, $tag and $callback. $tag is the name of the shortcode and $callback is the name of the function that will be called on execution.

add_shortcode('shortcode_name', 'function_name');

The Shortcode.

This is the piece of code that you put in a page, post or widget to be displayed on the front-end of the website.

[shortcode_name]

Types of WordPress Shortcodes.

• Self-Closing: [shortcode_name]
• Enclosed: [shortcode_name]Content to enclose[/shortcode_name]

Best Practices for Writing WordPress Shortcodes.

• Shortcode names should be all lowercase.
• Do not use hyphens in shortcode names.
• Use ‘return’ rather than ‘echo’ in your shortcode functions.

Where do I Put the Shortcode Code?

We will be writing this code in PHP. There are a number of ways to add shortcode code to your website:

• Add the code to the functions.php file. Instructions: How to Edit the functions.php File in WordPress.
• Use a pre-built plugin like Code Snippets.
• If you’re feeling really special and making a lot of shortcodes you can create a custom plugin.

How to Make a Custom Shortcode in WordPress.

As stated above, there are two types of shortcodes in WordPress, self-closing and enclosed. Here are some examples of shortcodes.

Example: Shortcode With no Parameters.

function xxx_shortcode(){
	return "Bring out the gimp.";
}
add_shortcode('gimp_shortcode', 'xxx_shortcode');

Shortcode: [gimp_shortcode]
Returns: Bring out the gimp.

Example: Shortcode With One Parameter.

function xxx_shortcode($atts){
    $var = shortcode_atts(array(
        'text' => 'x'
    ), $atts);
    return $var['text'];
}
add_shortcode('zed_shortcode', 'xxx_shortcode');

Shortcode: [zed_shortcode text=”Zed’s dead, baby. Zed’s dead.”]
Returns: Zed’s dead, baby. Zed’s dead.

Example: Enclosed Shortcode With Two Parameters.

function xxx_shortcode($atts, $content = null){
    $var = shortcode_atts(array(
        'text' => 'x'
    ), $atts);
    $output = $content . " " . $var['text'];
    return $output;
}
add_shortcode('marvin_shortcode', 'xxx_shortcode');

Shortcode:[marvin_shortcode text=”Aw man, I shot Marvin in the face.”]Vincent:[/marvin_shortcode]
Returns: Vincent: Aw man, I shot Marvin in the face.

Example: Enclosed Shortcode With Three Parameters.

function xxx_shortcode( $atts, $content = null, $tag = '' ){
	$var = shortcode_atts( array(
		'text' => 'x'
	), $atts );
	$output = $content . " " . $var['text'] . "Shortcode Name: " . $tag;
	return $output;
}
add_shortcode('burger_shortcode', 'xxx_shortcode');

Shortcode: [burger_shortcode text=”That is a tasty burger.”]Jules:[/burger_shortcode]
Returns: Jules: That is a tasty burger. Shortcode Name: burger_shortcode

How to Add a Shortcode to a Post, Page or Widget.

1. Login to the WordPress Dashboard.
2. Go to the page, post or widget you want to add the shortcode to.
3. Enter the shortcode.
4. Update or Save.

How to Add a Shortcode to a Theme File.

You can add a shortcode directly to your PHP code with this syntax:

echo do_shortcode("[your_shortcode]");

Additional Posts.

SEO

---

The Ultimate Guide to WordPress SEO for Beginners.

Read More

Web Development

---

CSS Media Queries for all Devices.

Read More

Web Development

---

How to Exclude an IP Address in Google Analytics.

Read More