How to add a lightbox form to WordPress
Thursday, February 11th, 2010Here are the steps that I took to create the lightbox subscription form used on this site:
1. Download “Lightbox gone Wild” from this page.
2. Unpack the following files and save them to the “lightbox” directory on your site:
scripts\lightbox.js
scripts\prototype.js
css\lightbox.css
3. Save the HTML code for the lightbox as a file in the lightbox directory, eg. as form.html
4. To make the lightbox load automatically, make the changes listed on this page, but don’t add the last line of HTML to anything just yet.
5. Return to the Lightbox gone Wild site and search for a comment from “preaxz”. Make the changes listed, so that the lightbox disappears when you press Escape or click in the shadowed area.
6. Create the following files within your WordPress theme directory:
– lightbox-cookies.php –
<?php
$lightboxcookie = $_COOKIE["lightbox"];
setcookie ("lightbox","1",pow(2,31)-1,"/"); // never expire
?>
– lightbox-header.php –
<!-- CSS --> <link rel="stylesheet" href="/lightbox/css/lightbox.css" media="screen,projection" type="text/css" /> <!-- JavaScript --> <script type="text/javascript" src="/lightbox/scripts/prototype.js"></script> <script type="text/javascript" src="/lightbox/scripts/lightbox.js"></script>
– lightbox-activate.php –
<?php
if ($lightboxcookie != "1")
{
echo "<input class=\"lbOn\" id=\"lbOnAuto\" type=\"hidden\"
value=\"/lightbox/form.html\">";
};
?>
7. Within the WordPress theme file header.php, add the following lines:
On the very first line (yes, before the DocType!) add:
<?php include "lightbox-cookies.php"; ?>
Before the </HEAD> tag add:
<?php include "lightbox-header.php"; ?>
After the <BODY> tag add:
<?php include "lightbox-activate.php"; ?>
8. Now upload the 4 files in the theme directory and the lightbox directory to your site!
