How to Use WordPress Custom Shortcode [Quick Tutorial] 2021
Autumn Offer up to 45% off
Days :
Hours :
Mins :
Seconds
Logo
Back To Blog

How to Use WordPress Custom Shortcode [Quick Tutorial]

Wordpress-Custom-Shortcode

Introduction 

It’s going to be a quick one! 

We wanted to show our users how to use WordPress Custom Shortcode on WordPress sites. The methods are pretty straightforward. So, you don’t have to worry about too much implementing them. 

This quick tutorial will deal with using WordPress shortcodes inside WordPress Gutenberg blocks, Elementor, and TinyMCE. 

But before that, here’s a quick note on what shortcodes are in WordPress. 

WordPress ShortCodes: What Are They? 

In the WordPress CMS, it’s easy to use HTML coding to write and format your content. But you cannot do so by using PHP coding, simply because the creators of WordPress do not want you or others to add something harmful in its database.   

So, you cannot custom content to your WordPress website. What now? 

That’s where the WordPress shortcodes come in. It’s basically a set of pre-built rules (functions) that let you add special content to your WordPress site. Shortcodes have square brackets around them. For instance, WordPress has the following shortcode: 

[gallery] 

This adds an image gallery to your WordPress content. 

Apart from having pre-built shortcodes, users can build their own custom shortcodes and make them WordPress-ready. You can easily create your own shortcode and make it ready for WordPress by following the rules of the WordPress Codex.  

Simple Shortcode 

But before we do that, here are some quick pieces of code we need to talk about. For instance, the following is an example of a simple shortcode: 

function prefix_hello_function( $atts ){
	return "Hello World!";
}
add_shortcode( 'hello', 'prefix_hello_function' );

We use the [hello] shortcode to see the effect of the above-mentioned code.

In this example, the add_shortcode is the function that registers the custom shortcode handler. It has 2-parameters as you can see from the example. 

add_shortcode( 'myshortcode', 'my_shortcode_handler' );

Shortcode with Given Parameters 

In the next example, we’ll see the use of the three parameters you can use, with self-closing and enclosing shortcodes using the WordPress shortcode API: 

function prefix_hello_pram_function( $atts ) {
	$a = shortcode_atts( array(
		'name' => 'John Doe',
	), $atts );

	return 'Hello, '. $atts['name'] . '!';
}
add_shortcode( 'hello', 'prefix_hello_pram_function' );

This is an example of an enclosing shortcode in WordPress. We use the following shortcode to see the effect:

[hello name="Albert Einstein"]

Shortcode with Parameter and Content 

The following shortcode features accepted WordPress parameters along with content. It’s also an example of a self-enclosing shortcode:

function prefix_hello_with_content_function(  $atts, $content = null ) {
	$a = shortcode_atts( array(
		'name' => 'John Doe',
	), $atts );
	$html = 'Hello, '. $atts['name'] . '!';
	$html .= '<div>'.$content.'</div>';
	return $html;
}
add_shortcode( 'hello', 'prefix_hello_with_content_function' );

In order to see the outcome, we use the following shortcode:

[hello name="Albert Einstein"]Albert Einstein was a German-born theoretical physicist[/hello]

Quick Shoutout to the WordPress Shortcodes Plugin by Shortcodes Ultimate 

To make the lives of our users easier, we’ll be using the Shortcodes Ultimate Plugin. This plugin comes with a lot of pre-built options and the usability of this plugin is excellent. We’ll be showing the implementation using this plugin. 

While we’re on the subject, here are the things we love about this plugin: 

WordPress Shortcodes Ultimate Plugin library
WordPress Shortcodes Ultimate Plugin library

Also, there are other shortcode plugin options you can use as well.

We will now show you how to do it as we’re talking about adding custom WordPress shortcode in different settings. 

Adding Shortcode in Gutenberg WordPress Blocks

WordPress Gutenberg Blocks allow the user to add dynamic content to their websites. In many ways, they are better in contrast to using shortcodes in your WordPress content. 

But what if you wanted to add some newly designed form or something that’s exclusive to your own website. 

In that case, you can add the custom shortcode to your content directly. In order to do that: 

Adding a Shortcode
Adding a Shortcode
Options to insert the shortcode
Options to insert the shortcode

If you go to the preview of the page/content, you’ll now see the custom piece of content you added using shortcodes. 

Shortcode output changes
Shortcode output changes

How to Add WordPress Custom Shortcode in Elementor 

Using shortcodes with Elementor is super easy. All you have to do is: 

Copy the Shortcode Text from the Plugin
Copy the Shortcode Text from the Plugin
Apply Shortcode
Apply Shortcode
Final Change to the Content
Final Change to the Content

How to Use Custom WordPress Shortcode with TinyMCE (Advanced Editor Tools) 

The Advanced Editor Tools Plugin was formerly known as TinyMCE. To put it in simple terms, it helps you add extra options to your WordPress Editor. 

TinyMCE Editor Tools
TinyMCE Editor Tools

For those of you who are using the classic editor, this option will come in handy. Because with the Advanced Editor tools, you can add specific features to your classic post editor. 

Adding a shortcode is super simple. All you have to do is: 

WordPress Classic Editor
WordPress Classic Editor
Shortcode Options
Shortcode Options

You’ll see that the shortcode has been added to your post/page.

Shortcode added
Shortcode added

Finally, if you preview the page/post, you’ll see the generated dummy text.

Adding your Own Custom Shortcode

We’ll be showing you how you can add your own custom code using the functions.php in WordPress. We’ll be using the [hello name=”Albert Einstein“] WordPress shortcode example:  

Here’s the code:

function prefix_hello_pram_function( $atts ) {
	$a = shortcode_atts( array(
		'name' => 'John Doe',
	), $atts );

	return 'Hello, '. $atts['name'] . '!';
}
add_shortcode( 'hello', 'prefix_hello_pram_function' );
Adding WordPress Custom Shortcode
Adding WordPress Custom Shortcode

Then all you have to do is add the shortcode to the content. For that: 

Custom Shortcode Added
Custom Shortcode Added

You should now see the following output: 

How to Use WordPress Custom Shortcode [Quick Tutorial] 1
Custom Shortcode Output

Finally, 

We’d like to add that this was pretty much a short overview as to how WordPress Custom Shortcode works and how you can use them. 

If you have any questions, please leave a comment down below. Again, you’re not just trying to learn from us

We want to learn from you as well! 

Written bySadik Ahmed

Hey there, I'm Sadik Ahmed, a WordPress enthusiast who loves to try out and review new themes and services.

Leave a Reply

Get Discount