How to get MailChimp Subscriber Popup working in WordPress

Introducing the MailChimp Subscriber popup … that doesn’t work with WordPress

Update: Please read why a popup subscribe form will negatively affect your SEO.

There are many means of adding a MailChimp subscribe form to WordPress. I tend to use either the MailChimp supplied embedded forms, the Gravity Forms MailChimp add-on or the excellent MailChimp for WordPress plugin. With the increasing popularity of pop-up forms on websites, MailChimp released a brilliant and very flexible popup subscribe form for all MailChimp plans. Most excellent of all is that the MailChimp popup looks beautiful, is totally free, and is incredibly easy to install on a website. The only problem is that the form doesn’t work on WordPress websites.

So why doesn’t the MailChimp subscriber popup work in WordPress?

Why the MailChimp Subscriber popup doesn’t work on WordPress

I noticed when first adding the popup code by MailChimp that nothing happened when I loaded any WordPress website page where the popup should have appeared. I searched Google and noticed that many others have the same issue but couldn’t find anyone that actually has the popup working in WordPress. I tested by placing the code as supplied by MailChimp in both the header and footer but neither worked. My code looked similar to:

Because the MailChimp supplied popup is so much more elegant than third party solutions and most other WordPress plugins that enable pop-ups, I decided to do a bit of troubleshooting. It didn’t take long to figure out that the MailChimp file at //s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js tries to load the jquery.js file from the root directory of the domain.

In WordPress, jquery.js is a core script that is supplied with WordPress in the location /wp-includes/js/jquery/jquery.js. There is no jquery.js file in the root directory in WordPress powered websites therefore the failure of the popup to load.

Instructions for getting the MailChimp popup to work in WordPress

First off a disclaimer is needed; the solution that follows is a hack and goes against WordPress best practice. I’m sure there is a far better solution to mine and if anyone knows one, please let me know.
Now here are the instructions (what we are doing below is creating the jquery.js file that the MailChimp code wants to load however in the file we create we are in fact loading the WordPress supplied version of jquery.js):

1. Design your MailChimp popup and copy the code.
2. In WordPress install and activate the Header and Footer Plugin.
3. In WordPress go to Settings -> Header and Footer. In the Page Head and Footer tab paste and save the MailChimp popup code to the Code to be added before the end of the page textarea.
4. Open a text editor and paste the following into a new file

   1 2 3

   jQuery.getScript("/wp-includes/js/jquery/jquery.js")     .done(function() {             })

   and save the file as jquery.js.

5. Using FTP or your cPanel File Manager copy the newly created jquery.js to the root of your domain (this is usually the www directory in cPanel or the httpdocs directory if you use Parallels Plesk Panel).

Your popup subscribe form should now work when you load any page on your website. Keep in mind that the MailChimp popup is coded so that if a visitor subscribes or clicks the popup close button, the form won’t be shown to them again (i.e. don’t fall into the trap of thinking the popup doesn’t work when it actually does). The form remembers not to show the popup again via the use of a cookie therefore clearing cookies from your browser will force the popup to show again.

Original Post: https://www.organicweb.com.au/19561/wordpress/mailchimp-popup-instructions/