LIMITED TIME DEAL

NOV 27TH – DEC 3RD

🔥 BLACK FRIDAY SALE 🔥

GET ADD-ONS BUNDLE WITH 34% OFF

GET ADD-ONS BUNDLE – FROM ONLY $39

DISCOUNT CODE APPLIED AUTOMATICALLY

Shortcode Creator User Guide

Shortcode Creator allows you to create custom shortcodes using HTML or PHP code. This guide contains complete information on how to install the plugin, activate your license, and start creating custom shortcodes.

Table of contents

  1. Installing the plugin
    1. Installation from within the Dashboard
    2. Installation through FTP
  2. Activating the license
    1. Activation process
    2. License activation errors
    3. Multisite installations
    4. Localhost / Staging
    5. Manual activation
  3. Demo shortcodes
  4. Creating a shortcode
    1. Step 1: Create a new shortcode and give it a name
    2. Step 2: Create an attribute
    3. Step 3: The code
    4. Step 4: Time to use the shortcode
  5. Shortcode Editor
    1. Shortcode title
    2. Shortcode tag name
    3. Shortcode description
    4. Default content
    5. Icon
    6. Attributes
    7. Code editor
  6. Attribute field types
    1. Text
    2. Number
    3. Color
    4. Dropdown
    5. Switch
    6. Icon
    7. Media Library
    8. Image Source

Installing the plugin

Premium add-ons are distributed as separate plugins in the zip format. To install the add-on, you should download it first. Use the download link from the email you’ve received after purchase to download zip-archive with the add-on. Then follow the simple steps below.

Installation from within the Dashboard

  1. Navigate to Dashboard → Plugins → Add new;
  2. Press the Upload Plugin link at the top of the screen;
  3. In the opened dialog choose the downloaded zip-archive and press the Install Now button;
  4. Wait until the installation is completed and press the Activate Plugin link.

Installation through FTP

  1. Unzip the downloaded archive using an archiver app;
  2. Copy unpacked folder with add-on to FTP server, to /wp-content/plugins/ folder; As a result, the path to add-on folder should look like: /wp-content/plugins/shortcodes-ultimate-maker/;
  3. Go to Dashboard → Plugins page;
  4. If you made everything correctly in step 2, a new plugin will appear in the plugin list;
  5. Press the Activate link near the add-on to activate it.

Activating the license

Your license key must be activated in order to enable automatic updates for the add-on.

Activation process

An email with a license key will be sent to you right after the purchase of a premium add-on. If you’ve lost the email, please visit the Restore Purchase page to recover that information.

Follow the steps below to activate your license key.

  1. Log in to the dashboard of your site (wp-admin);
  2. Navigate to Dashboard → Shortcodes → Settings and scroll page down;
  3. Paste the received license key into the License Key field;
  4. Press the Save Changes button to activate the license key.

You can clear the License key field and click Save Changes to deactivate license key later.

License activation errors

The following errors may occur upon activation of a license key.

Invalid license key

This error may occur if you’re trying to activate invalid license key. Please make sure that you’ve copied the license key correctly. License key should have the following format: XXXX-XXXX-XXXX-XXXX (four groups of four digits/letters, separated by hyphens).

This error may also occur in local development environments. If you’re trying to activate a license key on local site, for example, WordPress.wp or mywp.develop, you’ll get this error.

However, you can activate license key on the following local domains: *.dev, *.local, localhost. If you’re using other domain name for local site, you can still activate license key manually. Follow this guide to do that.

License key reached its activation limit. Deactivate this license key on other sites

If you’ve purchased a license key with a limit on the number of websites (Single Site or 2-5 Sites options), you could only activate it on the specified number of websites. This error indicates that your license key has reached its activation limit. You should deactivate this license key on other websites to be able to use it again. Just clear License key field on any previous site to deactivate license key on that site. If you do not remember at which site(s) you have activated license key, please contact support.

This license key is intended to use with another add-on

Each license key is intended for use with a specific add-on. It means you can not activate Extra Shortcodes add-on (example) using license key of Shortcode Creator add-on (example). If you are feeling confused about purchased license keys, please contact support.

Unable to connect to the activation server

If you’ve faced this error, it’s most probably that your site unable to connect to the activation server. In this case, you’ll need to activate your license key manually. This article will guide you through manual license key activation.

Unknown error

This error should never happen. If you’ve faced it, please contact support immediately.

Multisite installations

On multisite installations, license key could be added only on the main site. A plugin should be updated only on the main site too.

Localhost / Staging

You can activate a license key on the following local domains:

Activations made on a local domain won’t be counted. If you’re using another domain name for a local site or for a staging site, you can still activate the license key manually. Follow this guide to do that.

Manual activation

Step 1

Open up functions.php file of your active theme and paste the following code:

// Use this code to activate Extra Shortcodes add-on
update_option( 'su_option_extra-shortcodes_license', 'ENTER-YOUR-LICENSE-KEY-HERE' );

// Use this code to activate Additional Skins add-on
update_option( 'su_option_additional-skins_license', 'ENTER-YOUR-LICENSE-KEY-HERE' );

// Use this code to activate Shortcode Creator (Maker) add-on
update_option( 'su_option_shortcode-creator_license', 'ENTER-YOUR-LICENSE-KEY-HERE' );

Step 2

Replace ENTER-YOUR-LICENSE-KEY-HERE with your license key.

Step 3

Open any page of your site (no matter front page or any admin page). This will run the code in functions.php file.

Step 4

Now your license key successfully added to the database and you can remove the code from the functions.php file.

Step 5

Check your license key status by navigating to Dashboard → Shortcodes → Settings page.

Demo shortcodes

Before reading, navigate to Dashboard → Shortcodes → Custom shortcodes. There you’ll find 2 demo shortcodes that are created at the first activation of the add-on. You can edit them to see how they work.

Creating a shortcode

To help you to understand how does this feature work, let’s create a simple shortcode with an attribute. Follow the steps below.

Step 1: Create a new shortcode and give it a name

Navigate to Dashboard – Shortcodes – Custom shortcodes and click the Create shortcode button in the upper part of the screen.

Look for the Shortcode title field and give our new shortcode a name, for example, My Awesome Shortcode.

The Shortcode tag name field should be filled automatically.

Step 2: Create an attribute

Scroll the page down and look for the Attributes section. Click on the Add attribute button to create a new attribute for our shortcode.

Set the Field label to Text Color and Attribute name to color.

Now let’s change the field type. This option defines how our new attribute will look in the shortcode generator (the Insert shortcode window). Set the Field type to Color and Default value to #ffcc00.

Click the Close attribute button and go to Step 3.

Step 3: The code

Now, when our shortcode is defined, let’s write some code. The code, that will be used to display the shortcode in posts or pages.

Scroll the page down and look for the Editor mode field. This mode defines what type of code we can use. We’ll leave the editor in HTML mode.

Add the following snippet to the Shortcode code field:

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

Click the Create shortcode button.

Step 4: Time to use the shortcode

Now, we’re all set and can use the freshly created shortcode.

Navigate to Dashboard – Pages – Add New and click the Insert shortcode button. Depending on the editor you use, the Insert shortcode button may look different.

Look for the new shortcode in the list. Our shortcode should be appended at the very end.

That’s it, you can insert the shortcode anywhere you need it.

Shortcode Editor

Navigate to Dashboard → Shortcodes → Custom shortcodes and click the Create shortcode button at the top of the screen. Below you’ll find the description of each field.

Shortcode title

Full name of the shortcode. This name will be shown in the shortcode generator (in the 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 value will be used at the insertion of the shortcode into the 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:

[su_my_shortcode]

Shortcode description

A brief description of the shortcode. This value will be used as a pop-up tip at the selection of shortcode in the Insert shortcode window and in the 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]

Icon

Shortcode icon. This icon will be displayed near your shortcode in the Insert shortcode window.

Attributes

In this section, you can add attributes (options) to your shortcode. Attributes are shortcode settings allowing you to create more flexible shortcodes. Example of a shortcode with an attribute:

[my_shortcode color="red"]

Read the Creating a shortcode section of this article to understand how you can use attributes in your shortcode.

Field label

This is the label that will be displayed in the Insert shortcode window near the attribute field.

Attribute name

This is a short name that will be used in the generated shortcode and in the Shortcode code field of the shortcode editor.

Field type

This is the type of field. Read the Attribute field types section to learn what types of fields you can create.

Default value

This value will be used in the Insert shortcode window. It will also be used if you don’t specify a custom value in the shortcode.

Field description

A brief description of the field.

Code editor

This is the code that will be used (executed) to display your shortcode on the front part of your site. You can write the code in two different modes – HTML and PHP.

HTML mode

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

What you can use in this mode:

Variables will be replaced by attribute values. To display a value of an attribute, you should write its name (Attribute name) in double curly brackets. For example, if the attribute name is color, then your variable will look like {{color}}. Also, you can use the {{content}} variable, which will be replaced with shortcode content (the text between the opening and closing tags of the shortcode).

Read the Creating a shortcode section of this article to better understand what variables are and how you can utilize them.

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.

The code contained in the editor is a body of function invoked at the execution of a 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 the value of a shortcode attribute. Attribute names should be written in a standard for PHP language way, with a dollar sign at the start. For example, if the name of the attribute is color, then the variable should be written as $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 the use of other shortcodes 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.

Attribute field types

You can change the way your attributes work and look in the Insert shortcode window by changing their type and settings. The following part will describe available field types and how you can use them.

Text

Simple text field.

Number

This field allows a user to choose a number.

You can define the minimum and the maximum number as well as the step size.

Color

The color picker field.

Allows a user to pick a HEX color in the following format:

#AABBCC

Dropdown field. You can define multiple options with labels in the following format:

option1|Option 1 Label
option2|Option 2 Label

This field returns only selected value, without a label.

Switch

Toggle field. This field allows a user to set the attribute value to yes or to no.

Mostly useful in PHP mode.

Icon

Icon picker field. This field allows a user to pick an icon from the ForkAwesome icon set or pick an image from the Media Library.

As a result, the resulting value may be different: icon: icon-name or image URL.

The value can be parsed with the su_html_icon() function.

Media Library

Image picker field.

This field allows a user to pick an image from the Media Library.

Selected image URL will be used as the attribute value.

Image Source

A complex field for picking a source of images. Works similar to the Image Source field in the Image Carousel shortcode.

The value can be parsed with the su_get_gallery_slides() function.

Helpful?
🤝 Thank you!