Getting Started With Custom JavaScript

Popup Maker relies on JavaScript (JS) to do all of its magic. Without JavaScript, web pages would be downright boring (not to mention a lot less functional). Things we take for granted like popups, alerts, and forms wouldn't work.

WordPress does a great job of supporting custom JavaScript. But, you need to follow the "WordPress Way."

So, you want to write some custom JavaScript to customize Popup Maker? This doc outlines best practices and gives you example code to help you get started.

How Do I Add My JavaScript? #

We'll cover these 3 ways to add your code:

Using a plugin (generally the easiest way) #
Using the wp_footer hook (involves writing PHP) #
Using your theme's built-in settings #

Using a Plugin #

If you haven't set up a child theme or you aren't comfortable editing your functions.php file, then using a plugin is the way to go! Now, if you've never heard of a child theme or a functions.php file, then using a plugin is a no-brainer. We'll cover 2 plugins we like to use.

Simple Custom CSS and JS Plugin #

The first plugin we recommend is the Simple Custom CSS and JS plugin.

After you install and activate the plugin, add your CSS by going to Custom CSS & JS > Add Custom JS under your wp-admin side menu.

The screen capture above is courtesy of Simple Custom CSS and JS.

The awesome thing about this plugin is that you plop in only JavaScript. You don't need to worry about wrapping it around any HTML tags or PHP functions. Whew!

Important! Custom JS works best with Popup Maker using the following settings:

Linking type: Internal
Where on page: Footer
Where in site: In Frontend

Code Snippets Plugin #

The second plugin we use a lot is the Code Snippets plugin.

Read our Getting Started With Custom PHP guide for a step-by-step.

Create Your Own Plugin #

What's that you say? You want to write your own plugin. Knock yourself out! Head over to Pluginception WordPress plugin to get started creating your very own plugin.

If you don't want to use a plugin for your custom PHP, you'll need a child theme. After your child theme's set up, you can add your hooks directly into the child theme's functions.php file.

Note: We use the wp_footer hook throughout Popup Maker's documentation. And, If you've never edited your child theme's functions.php file, please check out our Getting Started with Custom PHP help guide.

Below is a template you can use to help you get started. You'll need to add the snippet to your child theme's functions.php file (except for line #1). Then, replace the popup ID number and function name as needed.

<?php // Ignore this first line when copying to your child theme's functions.php file.

/**
* Add custom JavaScript scripts to the footer of your site theme.
*
* @since 1.0.0
*
* @return void
*/
function my_custom_popup_scripts() { ?>
   <script type="text/javascript">
       jQuery(document).ready(function ($) {

           // ADD CUSTOM CODE HERE
     
           // Example of opening a click trigger popup
           // using the default trigger class.
           $(".popmake-123").click(function () {
               PUM.open(123); // Launch popup 123.
           }); // Click
           
       }); // jQuery
    </script>
<?php }
add_action( 'wp_footer', 'my_custom_popup_scripts', 500 );

/** 
* Add to your child theme's functions.php file or use a code snippets plugin. 
*/

What's happening in that code sample above? #

Here's a breakdown of what that code does:

First, it defines a PHP function called my_custom_popup_scripts
The my_custom_popup_scripts function Injects jQuery code that will open popup 123 when someone clicks an HTML element that has the popmake-123 class, e.g., <div class="popmake-123">Click Me</div>
Finally, it adds my_custom_popup_scripts to the wp_footer hook at priority 500 so WordPress inserts the jQuery code to the post's or page's footer after the popups load

Custom JavaScript that interacts with popups needs to load after popups. A priority of 500+ should be enough to load your JavaScript after the popups load.

Pro Tip #

That example calls PUM.open() to launch a popup.

See Popup Maker's JavaScript API to learn more.

Using your theme's built-in settings #

Some WordPress themes have built-in support for adding custom JavaScript. So, check with your theme's documentation or support team first.

Below are a couple of popular themes with links to their how-to guides.

Basic Troubleshooting #

Major caveat: Every time you add custom code, you take responsibility for testing and maintaining it. Here are some best practices you should follow:

Back up your site: Make sure you have a recent full backup of your site.
Use a staging site: Test your code on a staging copy of your live site.
Tweak the example: Remember that any custom code example you decide to reuse is exactly that—an example! Meaning, that you'll need to tweak and make sure the code works in your environment and meets your needs.
Disable custom code when troubleshooting conflicts: Whenever you need to troubleshoot your site for a possible plugin or theme conflict, make sure you disable all custom code.

If your site shows JavaScript or PHP error messages or even a blank white page after making your code changes, you'll need to "back out" or remove your last edits. Here are 4 ways you can do that:

If you're using Code Snippets, deactivate your snippet. For Simple Custom CSS and JS, unpublish your code.
Comment out your edits using // for a single line or /* */ for multiple lines. Save your changes.
Revert to your backup functions.php.
Restore your site from your last full backup.

Once you've backed out your last edits and your site working again like it was before, you can debug the code that caused the error.