How to add a lightbox form to TwentyTen

When you first visited this blog, you’ll have noticed a form pop up at you and ask for your e-mail address.  (You did enter it, didn’t you?)

Lightbox width=

This is the lightbox, and is often a feature of e-mail services such as aweber who make it easy for you.  But I am using a custom form to work with a different mailing system, so I have to create the lightbox myself.  Real DIY, you might say.

This involves quite a bit of coding and editing the file header.php.

PLEASE BACKUP YOUR THEME BEFORE MAKING THESE CHANGES!

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 comments) add:

<?php include "lightbox-cookies.php"; ?>

Before the </HEAD> tag add:

<?php include "lightbox-header.php"; ?>

After the <BODY <?php body_class(); ?>> tag add:

<?php include "lightbox-activate.php"; ?>

8. Now upload the 4 files in the theme directory and the lightbox directory to your site!

About Graham Tappenden

Graham Tappenden is a blogger from Germany. He has written code for WordPress themes since 2006 and been creating websites since 1994.
This entry was posted in TwentyTen and tagged , , . Bookmark the permalink.