How to Make a Custom Shortcode in WordPress

How to Make a Custom Shortcode in WordPress Overview.

In this tutorial I will cover 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 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.

What File Should I Put My Shortcodes In?

There are many places you could put your shortcodes. The easiest way is to write them in your functions.php file. If you use this method, be sure you are using a child theme so they don’t get overwritten when you run updates. You could start a new file called something like my-shortcodes.php and include it in your functions.php file. This would keep things a little more organized if you have a lot of code. If you’re feeling really special, you could make your own custom plugin to hold all of your shortcodes. If you are going to be writing a lot of shortcodes, I would consider this method but if you just have a couple of shortcodes its easiest to put them in your functions.php file.

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.

Shortcode Example With no Parameters.

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

Shortcode: [gimp]

Shortcode Example With One Parameter.

function vengeance_shortcode( $atts ){
	$var = shortcode_atts( array(
		'verse' => 'Seven'
	), $atts );

	return "{$var['verse']}";
}
add_shortcode('vengeance', 'vengeance_shortcode');

Shortcode: [vengeance verse=”Ezekiel 25:17″]

Shortcode Example With Two Parameters.

function chopper_shortcode( $atts, $content = null ){
	$var = shortcode_atts( array(
		'zed' => 'dead'
	), $atts );

	$output = $content . " ";
	$output .= "{$var['zed']}";
	return $output;
}
add_shortcode('its_a_chopper', 'chopper_shortcode');

Shortcode: [its_a_chopper zed=”Zed’s dead, baby. Zed’s dead.”]Who’s Zed?[/its_a_chopper]

Shortcode Example With Three Parameters.

function marvin_shortcode( $atts, $content = null, $tag = '' ){
	$var = shortcode_atts( array(
		'marvin' => 'Is Happy'
	), $atts );

	$output = $content . " ";
	$output .= "{$var['marvin']}" . " ";
	$output .= "Shortcode Name: " . $tag;
	return $output;
}
add_shortcode('i_shot_marvin', 'marvin_shortcode');

Shortcode: [i_shot_marvin marvin=”I shot Marvin in the face!”]Oh Man…[/i_shot_marvin]

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

1. Login to the admin area of the website.
2. Go to the page, post or widget you want to add the shortcode to.
3. Enter the shortcode.
4. Save.

How to Add a Shortcode to a Theme File.

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

<?php echo do_shortcode("[your_shortcode]"); ?>

Related Posts.

The Best WordPress Hosting in 2019.

How to Make a WordPress Child Theme.

How to Use Google Tag Manager.