This is the fifth of 5 articles that describe Click Open trigger-setting methods.
By default, WordPress automatically strips out JavaScript when it’s added to the Editor.
Add the following WordPress filter to run jQuery/JavaScript directly in the Popup Editor. You can add the PHP code snippet to your child theme’s functions.php
file or with a third-party plugin such as My Custom Functions.
<?php // Copy everything below this line // add_filter( 'kses_allowed_protocols', 'my_allowed_protocols' ); /** * Description * * @since 1.0.0 * * @param $protocols * * @return array */ function my_allowed_protocols ( $protocols ) { $protocols[] = "javascript"; return $protocols; }
View the source on GitHub.
Here are 3 different approaches to call a popup in the Editor using JavaScript/jQuery.
Method #1: Use the global function ‘PUM.open()’ as described in the Popup Maker jQuery API.
// The parameter '123' refers to a generic popup ID. // Substitute the actual ID number generated for your popup. <a href="javascript:PUM.open(123);">Sign Up For Our Newsletter!</a>
View the source on GitHub.
Method #2: Use the ‘PUM.open()’ function assigned to an ‘onclick’ link attribute.
// The parameter '123' refers to a generic popup ID. // Substitute the actual ID number generated for your popup. <a href="#" onclick="PUM.open(123);">Sign Up For Our Newsletter!</a>
View the source on GitHub.
Method #3: Target one or more CSS selectors with jQuery to open a specific popup with the .on( ‘click’ ) method.
<button id="my-button">Click Me</button> // Replace the CSS selector '#my-button' with the selector(s) to be targeted by // the .on( 'click' ) method. // The parameter '123' in the .open() method refers to a generic popup ID number. // Substitute the actual ID number generated for your popup. <script type="type/javascript">jQuery('#my-button').on('click', function () { PUM.open(123); }); </script>
View the source on GitHub.