Turn On Support for Inline JavaScript #
WordPress automatically strips out JavaScript any time you add it directly in the classic and block editors.
To allow support for adding JavaScript in the editor, add the following WordPress PHP filter. 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.
3 Ways to Use Inline JavaScript to Launch Your Popup #
PUM.open() in the href attribute #
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.
PUM.open() in the onclick attribute #
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.
Use CSS Selectors and jQuery #
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.
