How to create a shortcode in WordPress

by PassGuy | WordPress Tutorials

Do you want to learn how to create a shortcode in WordPress?

Learning how to create a shortcode in WordPress can be an effective way to customize your posts and pages. However, if you are new to the process, you might find it difficult to figure out how to use such a feature on your website.

That's why we've put together a guide to help you get started. By looking at how shortcodes work and how to apply them effectively, you can start customizing your content to your liking without the need for additional plugins.

In this article, we will discuss what WordPress shortcodes are and why you might consider using them. Then we'll show you how to create your own.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

What are WordPress shortcodes?

WordPress shortcodes act as shortcuts that allow you to quickly embed elements into a post or page. These are usually a single line of code enclosed in square brackets. For example :

[exemplecodehortcode]

This code will display a pre-determined feature on the front-end of your website.

WordPress first introduced shortcodes with the release of Shortcode API. This made it easy for users to add attractive elements to their posts and pages, such as Google Maps or the Facebook "Like" button.

It exists in WordPress defaultt six shortcodes  :

  • caption: Wrap captions around content
  • Gallery : displays image galleries
  • Audio: embeds and plays audio files
  • video : embeds and plays video files
  • playlist : displays a collection of audio or video files
  • embed : wraps inline elements

You will also come across two basic types of shortcode formatting: self-closing et enclosing.

Shortcodes self-closing can stand on their own and don't need a closing tag.

Meanwhile, enclosing surround the content you want to edit and force you to close the tag manually. For example, you can embed a YouTube video by wrapping the URL between the tags embed et /embed :

create a shortcode in wordpress

For example, this would create the following result:

create a shortcode in wordpress

Some of best WordPress plugins come with their own shortcodes. For instance, WPForms et Contact Form 7 have shortcodes that allow you to quickly embed a Contact form in a post or page. You can also use a plugin like MaxButtons to add a button shortcode wherever you want on your website.

Why Should You Consider Using WordPress Shortcodes?

There are many reasons why you can use WordPress shortcodes. For example, it's easier and faster than learning and writing a long piece of code in HTML. Plus, they help you keep your content clean and accessible.

Shortcodes can be used to automate certain features that you use repeatedly. For example, if you use a button call to action (CTA) on each of your articles, having a dedicated shortcode ready can be a quick and convenient solution.

It should be mentioned that Gutenberg editor works the same way, relying on the use of shortcodes. It allows WordPress users to add several interactive features through the use of blocks.

create a shortcode in wordpress

Such a method is much more beginner-friendly because you can add content right on the UI. However, the WordPress block editor is still limited in what it offers. Fortunately, it comes with a block Shortcode, which lets you add custom content to your pages.

How to create a shortcode in WordPress

If you already have coding knowledge, you can create your own custom shortcodes. This gives you full control over the look and functionality of your website.

Let's see how to create a custom WordPress shortcode. In this tutorial, we'll add social media links to an article as an example.

Step 1 – Create a new theme file

Before you begin, it's a good idea to completely backup your WordPress website. You will also need to create a separate file for your custom shortcode outside of the file  functions.php of your WordPress theme. This will provide a fallback solution in case something goes wrong.

You can use a client FTP (File Transfer Protocol) such as fileZilla to access your website's theme files. Once logged in to your website, go to wp-content > themes and locate your current theme folder. In our example, this will be owl press:

create a shortcode in wordpress

Open your folder WordPress theme, right-click on it and press Create new file.

Name your new file custom-shortcodes.php then click OK. You can then edit it by right-clicking on it and selecting the option View/Edit :

create a shortcode in wordpress

This will open the file in your default text editor. Then you just need to add the following block of code:

<?php ?>

This ensures that your new file will be interpreted as PHP, which is the scripting language WordPress is built on.

You can then save your changes and close the file. Be sure to check the following box to ensure it will be updated on the server and applied to your website:

Then open the file functions.php in the same theme folder and add the following line of code at the bottom of the document:

include('shortcodes-personnalises.php');

This will tell the system to include any changes you make to the file custom-shortcodes.php about functions.php while allowing you to separate them. When you're ready, save your changes and close the file.

Step 2 - Create the Shortcode Function

Next, you'll need to create the shortcode function, instructing it what to do. Select the option again View/Edit of your file custom-shortcodes.php. Use the following code snippet to add an action to hook your function to:

function subscribe_link(){
    return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
    }

Next, you will need to add a callback function, which will run when the hook action is activated. Adding the following line of code directly after the one mentioned above will tell WordPress that your function is a shortcode:

add_shortcode('sabonner', 'subscribe_link');

When you create a shortcode using the function add_shortcode, you assign a shortcode tag “ ($tag) " and a corresponding function hook " ($func) which will run each time the shortcut is used.

In other words, if the shortcode tag is [subscribe], then the hook 'subscribe_link' redirects the visitor to the provided URL.

Therefore the whole code you use in your file shortcodes-personnalises.php will look like this:

create a shortcode in wordpress

It should be noted that when naming tags, you should only use lowercase letters, although underscores can be used. It is also crucial avoid using hyphens, as it may interfere with other shortcodes.

Step 3 – Add the Self-Close Shortcode to the Website

You can now test your initial code as a self-closing shortcode on your WordPress site. Using the WordPress block editor, you can insert the [subscribe] tag directly into the post:

create a shortcode in wordpress

This will display the following content to your website visitors:

If you're happy with this shortcode, you don't have to do anything else. However, if you want to customize it, you can skip to the next step.

Step 4 - Add Parameters to the Shortcode

You can adapt the shortcode "subscribe" for additional functionality to display other social media links. You can do this by adding a parameter to modify the URL.

For add management attributes, you need to open the file custom-shortcodes.php and add the following code:

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');

This will allow you to customize the links in your shortcode tag to add them to the Gutenberg editor. You can paste it over the previous code in the file custom-shortcodes.php. It should look something like this:

create a shortcode in wordpress

Adding the shortcode_atts() function will combine user attributes with all known attributes, and any missing data will be replaced with their default values. When you're ready, save your changes and close the file.

Step 5 - Test the settings

You can now test the updated shortcode in the WordPress Block Editor. In our example, we are testing our Twitter and Facebook links with the following shortcodes:

[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]

[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]

create a shortcode in wordpress

This will produce the following result on the front-end:

This self-closing shortcode displays the direct URLs of your social profiles to visitors. However, you might want this feature to look a bit polished.

For example, you will be able to create an attached version that allows you to fully customize the anchor text displayed to users when they are about to click on it. We'll show you how to do it in the next step.

Step 6 – Create Enclosing Shortcode

The enclosing shortcode will be formatted the same as the previous autoclose example. However, it will include an additional parameter for the function.

First, you will need to add $content = null, which identifies this function as an enclosing shortcode. You can then add the do_shortcode from WordPress, which will search the content for shortcodes.

In the file custom-shortcodes.php, add the new enclosing shortcode:

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);
    return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');

When you are ready, your file custom-shortcodes.php should look like this:

create a shortcode in wordpress

The previous code has an attribute " style " additional, which will change the anchor text to a blue color. Don't forget to save your changes when you're done.

Step 7 – Add Enclosing Shortcode to Website

You can now insert your shortcode in the WordPress block editor to see the final result:

As you noticed, you can easily change your social media page URLs and the anchor text displayed to the visitor using this wrapper shortcode. In this case, we have chosen " Facebook " et "Twitter" :

create a shortcode in wordpress

There ! You have now created a custom shortcode for the subscription links in your pages and posts. Note that all the steps mentioned above can be modified to create all sorts of different elements using the WordPress feature Shortcodes.

Adding additional functionality to your WordPress website is much easier with shortcodes. You can use them to personalize your existing content and add interactive features, such as contact forms, image galleries or subscription links.

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

In this article, we learned how to create your own shortcode in WordPress. If you have any concerns or suggestions, please let us know within Comments.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

Waiting, share this article on your different social networks.   

...  

Submit comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.