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.
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.
Using the wp_footer Hook #
wp_footer hookthroughout Popup Maker's documentation. And, If you've never edited your child theme's
functions.phpfile, please check out our Getting Started with Custom PHP help guide.
functions.phpfile (except for line #1). Then, replace the popup ID number and function name as needed.
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_scriptsfunction 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
wp_footerhook at priority 500 so WordPress inserts the jQuery code to the post's or page's footer after the popups load
Pro Tip #
That example calls
PUM.open() to launch a popup.
Using your theme's built-in settings #
Below are a couple of popular themes with links to their how-to guides.
- Thrive: https://help.thrivethemes.com/en/articles/4430084-how-to-add-scripts-to-a-website-using-thrive-themes
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 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
- 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.