Article Table of Contents #
- What is a Shortcode?
- Register Your Shortcode with WordPress
- Apply Scripts by Shortcode in the Popup Editor
- Executing JavaScript
- Executing PHP Scripts
- Use Case: Google AdSense
- Use Case: Email Provider’s Form Code
What is a Shortcode? #
Register Your Shortcode with WordPress #
- $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.
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.
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.
Related Article: The Shortcode API (WordPress Codex).
Related Article: Documentation for ‘add_shortcode’ (KnowTheCode.io/Docx)
