How to create custom shortcode

3 demo-shortcodes will be created at the first activation of add-on. It is recommended to open each shortcode and to see how it works.

Take the following steps to create custom shortcode:

  1. Open Dashboard;
  2. Go to Dashboard - Shortcodes - Custom shortcodes;
  3. Press Create shortcode at the top of the screen.

All settings available on shortcode creation page are described below.

Shortcode title

Full name of the shortcode. This name will be shown in shortcode generator (in "Insert shortcode" window). You can use any text in this field. It is not recommended to use long names; one-two words will be enough. 

Shortcode tag name

Short name of the shortcode. This name will be used at insertion of shortcode into post editor. You can use only Latin letters in lower case [a..z], digits [0..9], and underscores "_" in this field. Example: use my_shortcode as shortcode tag name and you will create the following shortcode:


Shortcode description

Short description of shortcode. This description will be used as a pop-up tip at selection of shortcode in "Insert shortcode" window and in shortcode settings window.

Default content

This text will be used as default content of the shortcode. Shortcode content is a text placed between opening and closing tags of the shortcode. Leave this field empty if your shortcode does not imply use of any content and closing tag. Example of shortcode with content:

[my_shortcode] Default content [/my_shortcode]


Shortcode's icon. This icon will be shown in shortcode list in "Insert shortcode" window.


In this section you can add shortcode attributes. Attributes are shortcode settings allowing to make shortcodes more flexible. Example of shortcode with attribute:

[my_shortcode color="red"]

You can find more information on addition of attributes in  Attributes of custom shortcodes article.

Code editor

The code used for operation of shortcode on the site is placed in this editor. Basically, this is the shortcode itself. You can write the shortcode in two different modes.

HTML mode

This simplified mode allows to use HTML code and other shortcodes.

You can use variables in your code. Variables will be replaced by attribute values. To show the value of an attribute, you should write its name (Attribute name) in double curly brackets. For example, if attribute name is color, then you should use {{color}} variable.

You can also use {{content}} variable, which will be replaced by shortcode content (text between opening and closing tags of the shortcode).

You can use other shortcodes in this mode. Just paste your shortcodes into editor. No extra action required.

Example of code written in HTML mode:

<span style="background-color: {{color}};"> {{content}} </span>

Example of code inserted into post editor:

[my_shortcode color="#ff0000"] Hello world! [/my_shortcode]

This code will be generated on the site:

<span style="background-color: #ff0000"> Hello world! </span>
PHP mode

This mode is intended for advanced users and has much more powerful capabilities compared to HTML mode. In this mode, you can use PHP code for shortcode creation.

The code contained in editor is a body of function invoked at execution of shortcode. This means you cannot define new functions or classes in your code. This also means that you should not use opening and closing PHP tags (<?php and ?>) in the beginning and in the end of your code.

You can use variables to get a value of shortcode attribute. Attribute names should be written in a standard for PHP language way, with a dollar sign at the start. For example, if name of the attribute is color, then the variable should be written like: $color.

Similar to HTML mode you can use $content variable which will contain shortcode content (text between opening and closing tags of the shortcode).

Besides, you can use standard WordPress functions, as well as the other shortcodes. You can find more information on use of other shortcode with the help of do_shortcode function in Use of shortcodes in template files article.

In this mode, you can use the keyword echo to display shortcode output.

Example of code written in PHP mode:

// Display opening tag
echo '<span>';

// Display shortcode content
echo $content;

// Display closing tag
echo '</span>';