Write Review

WordPress Shortcodes: How to Create Your Own?

What do WordPress shortcodes mean? Have you ever seen a text in brackets? If you have, then you have seen a WordPress shortcode. They add unique features to your content and help ease your working process. Better yet, they are an excellent way to show different content without the need to write a code.

Important: WordPress shortcodes allow its users to add images, videos, pre-defined scripts, functions, and more into their WordPress websites, and they don’t require typing HTML or CSS every time.

Article opening banner

The shortcodes will make your job easier, so if you want to help yourselves, and create the perfect website as it can be, let’s learn how to create them! In this blog, you’ll read about creating your own WordPress shortcodes so you can have overall control over your website. Let’s dive in!

What are Shortcodes and Shortcodes API?

Shortcodes are code pieces that help you add some feature, image, video, function, or something else to your website. The shortcodes are pretty helpful tools that save developers time when they want to add something to their page or post. Instead of typing long HTML every time you want to add something, you can easily use a shortcode whenever and wherever you want.

Warning: You can’t just put your own shortcode and wait for it to work. Shortcodes need to be added to the theme you’re using as an option.

However, themes usually come with various pre-built shortcodes that you can see by reading the theme instructions. Overall, these tools are very helpful tools that let you add different content without writing any code, and they help developers finish their job more quickly.

For example, if you want to put a social icon at the end of your blog, instead of adding a hyperlink, changing the icon’s size, etc., you can just put the following shortcode:

[social icon=”twitter”]

The shortcodes are mainly used when you want to add a specific feature, function, video, or image to more posts or pages. If you want to add a feature to only one post or page, shortcodes may not be needed.

Shortcode API is part of the most useful WordPress aspects, and it was introduced in WordPress 2.5. This shortcode consists of a few main functions that ease your website building process.

  • add_shortcode() – main method for registering a new shortcode
  • shortcode_atts() – setting up the attributes supplied to a shortcode
  • shortcode_exists() – determines if a given shortcode has been registered
  • has_shortcode() – allows you to see if the content you’ve supplied has a specific shortcode
  • remove_shortcode() – unregisters a shortcode
  • remove_all_shortcodes() – deregister all registered shortcodes
  • do_shortcode() – parse a text string for all shortcodes
  • strip_shortcodes() – eliminates all shortcodes from a text string
  • get_shortcode_regex() – returns the regular expression for detecting shortcodes within post text

Types of Custom Shortcodes (Compared)

Creating complex content more easily is enabled by two main types of shortcodes in WordPress. The two main types of WordPress shortcodes are Self-closing Shortcodes and Enclosing Shortcodes.

The main difference between these two types of shortcodes is that Self-closing Shortcodes don’t need a closing tag. The content is put in square brackets, and it looks something like this:

[image gallery]

By using this shortcode, only the content from the square brackets will be shown once your website is done. We can compare this to the img /> tag, which is blank in the HTML, but when the src property to give an URL is used, the tag shows the image. What’s more about the Self-closing Shortcode is that it receives characteristics even though there is no need for a closing tag.

In contrast to the Self-closing ones, the Enclosing Shortcodes require closing tags. If you want to change the content of the shortcode, you must put closing tags. These shortcodes have a following look:

[shortcode]your content here[ /shortcode]

Note: The most important thing to remember about both the Self-closing and the Enclosing Shortcodes is that they can be valid with or without attributes.

How to Create a Custom Shortcode in WordPress?

We’re aware that maybe creating a shortcode may sound scary to you, but this blog will help you learn how to do it, and you’ll see that it’s not that scary. Through the following explained steps, you’ll be ready to create a shortcode in WordPress in no time!

Step #1: Understand the Basics

To start creating a shortcode, you must know that the most important thing is to know the basics. By opening a page in WordPress, the first thing that happens is looking for registered shortcodes. To register a shortcode, you should use the add_shortcode() function in the following way:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

As you see, while adding this function, there are two segments – shortcode_name and shortcode_handler_function. Shortcode_name is the tag that WordPress looks for, and you should use lowercase letters, numbers, and underscores. On the other hand, the shortcode_handler_function is the function WordPress confirms if there is a registered shortcode.

The handler function is written as:

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

This function comes with three additional segments. The $atts represent a collection of qualities or attributes, and if you don’t point one out, this will be treated as an empty string. As the name implies, $content stands for the content contained when using an Enclosing Shortcode. Lastly, the $tag is the shortcode tag’s value that determines which shortcode triggers the handler function if there are two or more shortcodes.

Step #2: Where to Add Your Custom Shortcode Scripts?

We’ve come to the second step, which will help you learn where you can locate your shortcode scripts. The custom shortcode scripts can be added to functions.php, a theme file, or a plugin. If you want it to add to a theme file, you can use the add_shortcode function, but if you decide to add it to a plugin, you should include it once WordPress loads completely. To do this, you need to use the so-called wrapper function:

function shortcodes_init(){

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

}

add_action('init', 'shortcodes_init');

The add_action() makes sure the shortcodes_init() starts working after WordPress finishes loading.

These two steps are the main point you should keep in mind while creating a custom shortcode in WordPress. Let’s provide an example to see how that looks.

Example for a Shortcode Using [current_year]

This shortcode will output the current year on your website, and at the same time, it is helpful if your website updates every year. We’ll start off by creating a plugin.

Step #1: Create a new folder in your wp-content/plugins/ directory

screenshot of plugins folder

Step #2: Then, you should create a PHP file with the same name as the plugin. In this case, that is salcodes.php, and once you’re done, add this header to the plugins file:

<?php

/*

Plugin Name:  Salcodes

Version: 1.0

Description: Output the current year in your WordPress site.

Author: Salman Ravoof

Author URI: https://www.salmanravoof.com/

License: GPLv2 or later

License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: salcodes

*/

After doing this, save the file and go to your WordPress dashboard to activate the plugin.

Step #3: The third essential step is to register the shortcode. That’s why you add the following code to your plugin file:

/**

 * [current_year] returns the Current Year as a 4-digit string.

 * @return string Current Year

*/
add_shortcode( 'current_year', 'salcodes_year' );

function salcodes_init(){

 function salcodes_year() {

 return getdate()['year'];

 }

}

add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>
  • current_year – the shortcode’s name
  • salcodes_year – the name of the handler function
  • salcodes_init – the wrapper function
  • getdate() – PHP function that holds the current year’s value

After writing this, you should save your plugin file.

Step #4: Now, it’s time to test whether the shortcode works as it needs. First, you need to put the shortcode anywhere you like. In this example, the shortcode is put in the website’s sidebar Text widget.

screenshot of Text widget

Of course, if you did everything right, the shortcode should work perfectly well.

screenshot of test results

What are the Pros and Cons of Shortcodes for WordPress?

Although there are many benefits from these shortcodes, there are also some drawbacks that might not appeal to you. Keep the following list of pros and cons in mind before you start creating your own shortcodes.

Pros:

  • Simplify the adding of complex features to your WordPress website
  • You don’t need to copy and paste the same lines of codes
  • More user-friendly than HTML codes
  • Accept attributes and can be modified
  • They can be bundled inside plugins
  • Allowing you to include a wide range of items to your page

Cons:

  • Hard to tell what a shortcode does by just looking at it
  • Shortcodes connected to themes won’t work if you change the theme
  • Add extra load to your server
  • Can break HTML
  • May slow down your page

However, once you learn how shortcodes work, your work will be drastically more manageable than without them. At the end of the day, it’s up to you to choose whether you’ll use them or not.

Final Thought – Custom Shortcodes Aren’t As Complex As They Seem!

The process of adding complex functionalities and features to your WordPress website can be really dull and exhausting. That’s why the shortcodes are here to help you with this! They provide easy-to-type tags that the users can easily use and improve their workflow.

Keep in mind; if you go for a reputable managed WordPress hosting provider, you can further facilitate this process. The company’s team can guide you through the process, ensuring you do the right things to achieve your desired results.

screenshot of Managed WordPress hosting category on HostAdvice

Save your time and effort by implementing all of the provided information above and create your own custom shortcodes in WordPress today!