Add Shortcode – WordPress Snippet Generator

This tool is intended assist with the production of shortcodes for use in plugins and themes. Please scroll past the tool to learn more about how to correctly fill out the forms and implement the code.

  • General
  • Shortcode
  • Attributes
  • Output
  • Code

General

Item
Input

Shortcode Settings

Item
Input

Attribute #1

Item
Input

Attribute #2

Item
Input

Attribute #3

Item
Input

Attribute #4

Item
Input

Attribute #5

Item
Input

Output Code

Item
Input

Get Code Snippets

Your customized code snippet is below. Be sure to fully read the instructions that follow before adding this code to your WordPress theme.

Generate Your New Shortcode - Functions.php

Add this code to your functions.php file. Scroll down to learn more.

                
add_shortcode( '{{shortcodeName || 'name'}}', '{{themeSlug || 'your_theme_slug'}}_{{shortcodeName || 'name'}}_shortcode' );

function {{themeSlug || 'your_theme_slug'}}_{{shortcodeName || 'name'}}_shortcode($atts, $content = null) {
	// Attributes
	$a = shortcode_atts( 
	        array(
		        '{{att1name || 'att1name'}}' => '{{att1value || 'att1value'}}',
		        '{{att2name || 'att2name'}}' => '{{att2value || 'att2value'}}',
		        '{{att3name || 'att3name'}}' => '{{att3value || 'att3value'}}',
		        '{{att4name || 'att4name'}}' => '{{att4value || 'att4value'}}',
		        '{{att5name || 'att5name'}}' => '{{att5value || 'att5value'}}'
	        ), 
	        $atts,
	        '{{shortcodeName || 'name'}}' 
	);
	
	// Output Code
        {{outputCode}}

}
        

Shortcodes are a powerful tool bundled with the core WordPress application. They allow writers to type out a small string of text into the Text or Visual Editor to act as a placeholder for a larger text block or user interface feature. These small strings are then programmatically converted into the shortcode output when the page, post, or other public-facing content block is generated for display to the public-facing webpage.

Wow, that was a tongue-twister. The snippet generator tool we’ve put together helps you create shortcodes for plugins or WordPress themes. If you’re still not sure what a shortcode is, don’t worry. I’ll first explain it in more detail below, then I’ll introduce the tool and how to use it.

What is a Shortcode, and Why Should I Use One?

A simple example might be useful for clarity, so let’s look at one very common shortcode I’ve run into many times. That shortcode is the [year] shortcode and it’s typically used to output the four digit year.

If you’re wondering why this might be useful, consider the following use case:

You purchase a theme that provides a field in the Customizer that allows you enter your website’s copyright line. When you type in the copyright text, it will be a string of static text that typically includes one or more four letter year strings. These describe the span of time during which the content of the website has been created.

We use a typical format for a copyright here at Nimbus Themes, so let’s look at ours as an example: Copyright 2013-2017 Nimbus Themes – All Rights Reserved. You can see that we’ve declared that the scope of our copyright covers the period of 2013 through our current content creation efforts which are posting in 2017. But what happens when 2018 rolls around? It’s really easy to forget to change something small like your copyright line, especially if you run many websites.

Here’s where the magic of shortcodes kicks in. By simply replacing the “2017” with our [year] shortcode, if your theme or plugins offer it, you can then sit back and forget about those annual copyright extensions. When your server is generating the post on the first of January in 2018, instead of outputting the string “2017” like it did all the prior year, it will output “2018.”

You can see that while this is just a simple example, it’s also a powerful illustration of the way shortcodes can automate difficult or time-consuming tasks that would otherwise be burdensome for webmasters, bloggers, and anyone else using a WordPress website.

Breaking Down Shortcodes

If we dig a little deeper into the world of shortcodes, we’ll run into a few additional topics that need to be understood. These are more advanced topics, but they are common even for simple use cases, so I strongly recommend that everyone take the time to become familiar with them.

Shortcode Format

Shortcodes in WordPress are always represented by a string of letters or numbers wrapped in both an opening and closing square bracket. We can look at our “year” example from the previous sections: [year] and see that both square brackets are included.

Shortcode Names (Tags)

The shortcode name is the string included in the square brackets. These names are also sometimes referred to as tags.

Shortcode names should always be lowercase and without any punctuation.

Additionally, it’s important to make your shortcode names descriptive. If you’re creating a shortcode to output a Google Adsense ad, your name should be a descriptive representation of this ad so you can quickly identify what the shortcode is intended to do. Maybe something like: [my_adsense_ad].

Enclosing vs. Self-Enclosing

Shortcodes come in two flavors. Ones that output something totally unrelated to the surrounding content, and ones that enclose a block of content.

Our [year] shortcode is a great example of the first type. This type is called self-closing, and it consists of a single instance of the “name/tag” string enclosed by the opening and closing square brackets.

The second type is called enclosing. This type consists of both an opening shortcode and a closing shortcode in the following pattern: [name]...content...[/name] where the enclosed content is wrapped by the shortcode and therefore is passed to the shortcode function and can be used in the output code.

Shortcode Attributes

Attributes allow you to extend and customize your shortcodes by adding additional data to the output function. Attributes are added within the shortcode, following the name, if it is a self-enclosing shortcode, and added within the opening shortcode, following the name, if it is an enclosing shortcode. Here’s an example of each

[name attribute="input"]
[name attribute="input"]...content...[/name]

The input added within the quotation marks is passed to the shortcode output function. See below.

Shortcode Output

Continuing the example above, the $attribute variable will be available to call on when building the output function. You could, for instance, use it to add a class to an html container. It might look something like this:

return '<div class="'.$attribute.'">'.$content.'</div>';

Or you could use it to fork your output logic:

if ($attribute == 'input') {
    return 'something';
} else {
    return 'something else';
}

How to Use This Tool to Create Shortcode Snippets

This tool has minimal required fields to output a fully functional shortcode code snippet. At the minimum, be sure to fill out all the fields on the “General” and “Shortcode” tabs. Here’s a full breakdown of all the fields.

  • General Tab

    • Theme Slug: The theme slug needs to be all lowercase letters/numbers and/or underscores. It is used to prefix any functions and variables that could conflict with WordPress core or plugins that may be installed. Typically, this is the same string as your text-domain but with hyphens replaced with underscores.
    • Text Domain: The text domain is a unique key used to identify translatable strings included in your theme or plugin. It should be a lowercase version of your theme name with spaces replaced by hyphens. It should also match your theme or plugins directory.
  • Shortcode Tab

    • Shortcode Name: The shortcode name or tag is the string you will be typing within square brackets when adding your new shortcode to a content area.
    • Attributes: Indicate here whether or not to support attributes in your shortcode.
    • Enclosure Type: Indicate here whether your shortcode should be self-closing or enclosing.
    • Attributes Filter: If you’re supporting attributes, you can also choose to support a filtering key for this shortcodes attribute.
  • Attributes Tab:

    • Attribute #x Support: If you’re supporting attributes, you can populate any of the Attribute #x sections on this tab. Start by indicating that you would like to support this particular attribute by checking the checkbox labeled Add.
    • Attribute #x Name: Choose a name for this attribute. In your shortcode, this will be used like the following: [name <attribute>="default"]
    • Attribute #x Default Value: The default for each attribute will be what’s loaded into the variable if nothing is passed to the output function via the shortcode. Often these are left blank, but there are times you’ll want a default.
  • Output Tab

    • Output Code: This text area is where you can build your PHP code to return some output. Be sure to return and not echo your output.
  • Code Tab

    • Flip to the code tab when you’re all done. You’ll find a text area populated with your customized code snippet.

Adding The Snippet to Your Website

There are a couple of options for adding this snippet to your website.

Adding to Your WordPress Theme

The quickest way to add this shortcode to your WordPress website is by pasting it directly into your theme’s functions.php file. Simply download your functions.php file via FTP to your desktop and open it in your favorite text editor. Scroll to the bottom and paste the code. Save the file and reupload to your theme root. Now your new shortcode will be available.

Unfortunately, if you ever change themes your shortcode will be lost. To work around this issue use the plugin option that follows.

Adding via a Plugin

The ideal way to add a shortcode to your WordPress website is to build a custom plugin where you house all your shortcodes. Here’s a template you can copy directly into a file called mysite_shortcodes.php, which you can drop directly into your /wp-content/plugins directory:


<?php
/*
Plugin Name:Mysite Custom Shortcodes
*/

// Add your shortcode snippets below.

Wrapping Up

Please leave your shortcode snippets in the comments so we can all learn from each other’s successes. I’ll add the best examples to this post and hopefully we can build a great resource for all of us to call upon.

Current Year

Since we talked about the [Year] shortcode in the post, I wanted to offer a full version as an example here.

add_shortcode( 'year', 'my_slug_year_shortcode' );

function my_slug_year_shortcode() {
	// Output Code
        $y = date('Y');
        return $y
}

Written exclusively for

Nimbus Themes Publishing Logo

About the Author

Evan Scoboria is the co-founder, and developer at Shea Media LLC, the team behind Nimbus Themes, this magazine, and a bunch of very happy clients. He co-founded Shea Media with his wife Kendall in 2009. Evan enjoys hunting, fishing, code, cycling, and most of all WordPress!

Read all posts

Post a Comment

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