Getting Started with Custom JavaScript

Popup Maker relies on JavaScript to do all of its magic. Without JavaScript, the popups simply wouldn't function.

In special cases, when customizing Popup Maker to meet your needs, you may need to write some custom JavaScript. This doc outlines best practices and gives you some quick example code to work from when getting started.

How Do I Add My JavaScript?

There are a few ways to add your code:

  1. Using the wp_footer hook.
  2. Installing a plugin.
  3. Add it to your themes existing JS files.

Method #1: Add JavaScript Using wp_footer

This is the fastest and easiest way to get your custom code setup. This is also the method we use throughout the Popup Maker Documentation.

Simply input your custom code in the wrapper below (denoted: "// Your custom code goes here."), then add the entire code block to your functions.php, or even better, add it to a child theme or custom site plugin, so you don't lose your changes when the theme is updated.

Method #2: Add JavaScript Using a Plugin

A less quick, but easy solution, this plugin offers great capability and flexibility to add your custom JavaScript code:

Using Simple Custom CSS and JS with Popup Maker

To make sure the CSS or JS you use for Popup Maker works as intended, add your code to the plugin normally, but make sure your Options Pane is setup like this:

Keep in mind, when using a plugin like this, you don't need the wrapper that we've provided above when using the wp_footer method.

Method #3: Adding Code to Existing Theme JavaScript Files

Often themes have an existing JavaScript file, sometimes there is even an extra one called custom.js. You can add your code at the bottom. Be sure you understand what your doing so as to not mess up any existing code.

Method #4: Create Your Own Plugin Using Pluginception

Still need help? Contact Us Contact Us