Register a Shortcode to Run Editor Scripts

Article Table of Contents

What is a Shortcode?

WordPress.com defines a shortcode as a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create data objects on your site using just one line that would normally require lots of complicated, ugly code. Another way to think about this: Shortcode = shortcut.

[ Back to top ]

Register Your Shortcode with WordPress

To use a shortcode in any post, page, or popup editor, it must first be registered to WordPress.  WordPress Core provides a function ‘add_shortcode’ to register a shortcode ( see: ‘/wp-includes/shortcodes.php' ). The function accepts 2 input parameters; 
  • $tag - the name of the shortcode to be used in the WordPress content editor, and 
  • $callback - the name of a custom, shortcode processing function to run when the shortcode is found by WordPress. 
The function $callback accepts 3 parameters and returns the following: 
a) an array of default attributes (which can be changed by the user), 
b) the contents of the shortcode, and 
c) the shortcode ‘tag’ ( the shortcode name registered to WordPress). 

If you need assistance with creating a shortcode, we recommend using the  Shortcodes Generator at ‘GenerateWP’.  Select the navigation elements 'Shortcode', 'Attributes', and 'Code' on the site, and complete the form to create your custom code snippet. 

Best practice is to copy the generated code and paste it into a stand-alone plugin in order to register the shortcode within your site. It also encapsulates the code, so that if anything goes wrong, the code can be isolated and evaluated separately from the rest of your site. 

[ Back to top ]

Apply Scripts by Shortcode in the Popup Editor

Executing JavaScript

By default, WordPress does not allow users to add JavaScript directly into the editor.  On 'Publish' or 'Update', the JavaScript would be saved directly to the 'wp_posts' database table.  If the script is from an untrusted source, it could execute malicious code and compromise the site (or other sites as well).  

WordPress runs the API function 'wp_kses' in the background to filter all content before it's saved to the database. That function strips out <script> tags before the editor content can be saved to the database. After 'wp_kses' runs, <script> tags appear in the editor as a string of characters that will not execute the intended script. 

Executing PHP Scripts

Plugin users have inquired about modifying the PHP code in the popup template file rendered in the Popup Editor.  We do not recommend direct modification of the file '/popup-maker/templates/template.php' to hook in custom functions. At some point in the future, that file may change.  Any prior customizations to that file would be overwritten by the plugin update. 

The better solution is to register a shortcode with WordPress (see above; 'Register Your Shortcode with WordPress' ) and use the shortcode in the popup content editor.

Use Case: Google AdSense

Google Adsense requires the addition of a Javascript 'ad unit code' between a page template's opening and closing <body> tag to display an ad on that specific page.  Users of Popup Maker who wish to add that script directly into the Popup Editor now face a problem. WordPress won't accept Google's <script> tag. What to do? 

The solution is to create and register a shortcode to pass in JavaScript. Then add the registered shortcode into a plugin, and activate the plugin on your site.  Consult the WordPress 'Plugin Handbook' for guidance on building a plugin.

Here's a link to a simple plugin that you can add to your site in which to test out the registration of your shortcode.

Use Case: Email Provider's Form Code

Email marketing services ( for example, MailChimp, AWeber, etc. ) generate pre-built HTML and JavaScript that can be added into forms that integrate with email marketing applications. The HTML can be added directly to the Popup Editor via the 'Text' tab, but the JavaScript cannot.

Again, the solution is to add the extra HTML and JavaScript from the mail provider's application into a shortcode registered to WordPress, and then activate the shortcode via a plugin. 

Here is an example of how such code might be registered to a shortcode: 

<?php
/**
 *  This is an example of the WordPress API function 'add_shortcode'
 *  in action.  Some HTML and a <script> tag generated by an email
 *  marketing application (for example, MailChimp) are added into
 *  the function 'add_shortcode'.  Once the shortcode is registered to
 *  WordPress, add the shortcode tag (name) to the Popup content editor
 *  to run the script.
 *
 *  Use the code below this comment block when building your shortcode. When
 *  customized to your needs, add the registered shortcode to a plugin to run
 *  on your site.
 */
add_shortcode( 'mailprovider_form1', 'mailprovider_form1_shortcode' );
/**
 *  Register the shortcode to buffer and return the HTML and scripts to WordPress.
 *
 * @since 1.0.0
 *
 * @param string mailprovider_form1            The 'tag' (name) of the shortcode
 * @param string mailprovider_form1_shortcode  Register the shortcode with WordPress
 */
function mailprovider_form1_shortcode() {
	ob_start(); ?>

    <!--Insert your mail provider's HTML and JS form code here-->

	<?php
	return ob_get_clean();
}

View the source on GitHub.

Notice that the function that registers the shortcode to WordPress contains the PHP functions  'ob_start' and 'ob_get_clean'. These refer to an 'output buffer' which temporarily stores the data passed to 'add_shortcode' and then returns it to WordPress for further processing.  

Learn more about PHP's output buffer and how it's used.

[ Back to top ]

Related Article: The Shortcode API (WordPress Codex).

Related Article: Documentation for 'add_shortcode' (KnowTheCode.io/Docx)

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.