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 theme's 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.

Add the following code to your site using the following options:
  1. Child theme: Add the snippet to your child theme's functions.php file (except for line #1)
  2. Theme settings: Use your theme's custom code settings or snippets area

Replace or tweak the example code as needed.

Method #2: Add JavaScript Using a Plugin

The Simple Custom CSS and JS 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 and make sure your Options pane is set up like in the screen capture below.

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

Visit the Pluginception WordPress plugin page to get started creating your very own plugin.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.