We’ve recently moved our WordPress blog from the freely hosted system at WordPress.com to our own self-hosted system using WordPress.org. One of the key benefits and reasons behind this move is the ability to have absolute control over our site and the features we deliver to our viewers and visitors. The paint hadn’t even dried on our new site and we found ourselves busy trying to incorporate MailChimp signup forms here. As it turns out, it’s pretty easy but not straight-forward at all. After having successfully integrated the system into our site, several of our friends have asked us how we did it. And that’s how we came to the idea to write this quick guide on how-to.
This article discusses copying and pasting script generated from the MailChimp system to your own WordPress.org blog site. The concepts discussed here specifically apply to these platforms only, but the concept is portable to any mailing list signup system and blog platform.
Testing The Popup
The single most inconvenient issue in trying to do this yourself is the fact that when you add the popup code to your site and visit it, a cookie is set by MailChimp that makes it so the popup doesn’t appear again. This is totally by design. The concept here, a very important one, is that you only present this popup window to your visitors once. This vastly reduces the frustration factor for your visitors as these sorts of popups are considered highly intrusive.
So, now, you’ve plunked your code into your webpage and reviewed it. You want to change some text. The cookie is set on your system that precludes the popup from appearing allowing you to see your revisions and changes.
The solution is to find the cookie on your system and delete it before refreshing your page. This is a slightly cumbersome operation but is critical to know about before you begin this process.
The key problem here is that each operating system (Windows, Mac, Linux, etc.) and each browser (IE, Firefox, Safari, etc.) store their cookies in different places and formats. To make that even more confusing, I have noticed that even the same product (we use Firefox here at The Hollow pretty much exclusively) can have vast differences between their own versions.
On my desktop here, I run Windows XP and Firefox 10.0.2. You may notices differences in your setup, and this is outside the scope of this article.
In Firefox to find and delete this cookie I do the following: on the main menu, select Tools | Options. This will present you with a dialog box of tabs. Select the Privacy tab. Click the Show Cookies button on this screen. From there you will be presented a series of folder, each folder applies to a different site you visit. Our blog is hosted here at http://toadhollowphoto.com, so I scroll down the list until I see that. Click the + button to expand that folder. Find the entry titled MCEvilPopupClosed, select it and press the Delete button.
From here you should be good to go with your testing. Pressing refresh on your browser on your site should bring your site up and relaunch the popup for your review. Rinse and repeat as necessary.
Backing Up Your HTML
The other key thing to plan for before beginning all this is to have a backup of your original HTML file(s) before modifying them, in case you make a mistake and need to revert back. I copied and pasted my original HTML into a Notepad and saved it locally to my computer before beginning, just in case.
MailChimp: Generating The Script
OK, now that we’ve covered the planning aspect of this, it’s time to jump in and try it all out.
Login to your MailChimp control panel, you should see a screen similar to the one above. Click on the 2-Design A Form button.
You should be then taken to the above screen. In the dropdown menu area, select For Your Website and then click on Signup Form Embed Code.
In the left pane, select Classic Form and then click on the Options button, as circled in point 1 above. When presented with that form, select the Enhance Your Form – enable evil popup mode checkbox as illustrated in point 2 circled above. Make any customizations as desired for things like the title field, form width etc. For our site here, I only changed the title. Once you’re happy with your settings, press the Create Embed Code button as circled in point 3 above.
You should be presented with a screen as shown above. Copy the code as circled above. Now we’re ready to head over to our site to begin the actual embedding process.
WordPress.org: Embedding The Popup Code
From here we do all our work in the WP Admin panel.
Once logged in, on the left menu select Appearance and Editor to get to the above screen, as circled in point 1. Then select the Header (header.php) item in the right Templates section, as circled in point 3 above. This is where all the magic begins.
From here we will be working exclusively in the center section of this screen, as outlined in red in point 2 above.
Scroll down until you see the </head> tag as shown above circled. Place your cursor after this tag and press Enter a couple of times to give yourself a little whitespace to work with. Paste in your code as copied from MailChimp.
We’re almost done now, except for any customizations you may want to make. Personally, I am very finicky about our site here and spent a few hours playing around with some of the parameters in the HTML script in the section I’ve outlined in blue above. The parameters, for example, width: 100%; height: 100% etc. can all be changed and played with, resulting in different appearances to your popup form. It should be noted that some browsers render these parameters differently, so please be careful when playing around here. You can feel free to copy the settings we’ve supplied in our above screenshot for your site if you like the way ours works and want to have a similar setup.
Please exercise caution when working in this area of your system. An incorrect bit of HTML introduced into the equation could render your site unusable, and this is where the recommendation of a backup mentioned above comes into play. This entire process is semi-complex and must be undertaken with a strict degree of caution. I personally know just enough about all this stuff to be highly dangerous myself, so I will be of very limited help in assisting with any issues encountered.
Now, with all the disclaimers in place and all that being said, the process of doing this yourself and achieving the results you want for your own site is a highly gratifying and fun thing to go through. I can only hope that our article here can help you traverse the minefield of HTML coding a bit to do your own site customization, and in doing so saves you a bit of frustration and time.
Best wishes, and good luck! Don’t hesitate to leave any follow-up questions or comments you may have, we’re too happy to try and help!