Whew! What a long title! So what the hell is a Double Email Optin Popup majiggy? I probably have the term completely wrong, but it’s when you click on a button, then a light box pops up with an optin form. It supposedly leads to more sign ups, etc., etc. Anyway, this is how you do it!
The steps are going to be pretty easy. I would’ve made this a video, but I’m finding it harder and harder to find 15 minutes of actual quiet where I won’t wake up a baby, or bother my coworkers. Here we go:
Step 1 – Create a new widget area
If you saw my last video, this is as simple as copy and paste. If you didn’t, here’s the code below:
[gist id=”363bb260f633ba1e6c91″ file=”register-new-widget-area.php”]
Step 2 – Add it to the front-page.php
Once you register it, just add it to front-page.php. Alternatively, you can add it to the functions file so that it’s on every page, but in this example, I just want it on the front page.
Open front-page.php and add the following:
[gist id=”363bb260f633ba1e6c91″ file=”add-widget-area.php”]
Just make sure you add it within a function on the homepage. So if you’re using a theme from StudioPress, most of them have a “helper” function or something on the front-page.php already. Add it with the clump of other widget areas.
Things are getting fun!!!
Step 3 – Enqueue your light box script
I’m going to be using pretty box, no real reason, I just want to =). There’s probably a million Lightbox scripts to choose from, so pick one that you like and that does inline HTML.
[gist id=”363bb260f633ba1e6c91″ file=”enqueue-pretty.php”]
We’re almost done!!!!
Step 4 – Let’s hide our widget area.
Go into your CSS, get the ID of the widget area we created. In this case, it’s
sfws-optin. Hide it.
[gist id=”363bb260f633ba1e6c91″ file=”hide-it.css”]
Step 5 – Let’s add the link and test it out!!
So in my code I’m going to add
<a href="sfws-optin" rel="prettyPhoto"> Click my link and watch my light box appear </a>
I click it and….
Boom! That’s all folks!!! Now I can add anything into that widget area (it will be an email optin). Style it however I want, etc., etc., the possibilities are ENDLESS!!
Hope you enjoyed this tutorial. Feel free to ask questions =).