Creating the custom page template

First up, we'll need to create a new page template that we can assign our registration page to. We'll start by creating a copy of our page.php template and renaming it registration-page.php.

J page.php

J page.php

The whole point of this form is to load in the ColorBox modal window, so having our theme's header and footer styling will be a bit distracting. We'll simply remove the get_header() and get_footer() WordPress template tag commands from this template page.

Next, while we don't want the header and footer styles, we do need the page to be a properly formatted HTML page that loads in jQuery. We'll manually add a doctype and borrow some of the WordPress header code from the header.php file, just from a body tag to the beginning of this template's loop, as shown here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19 99/xhtml" <?php language_ attributes!); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?>

.cform fieldset{

border:1px solid #036;

.successj font-size: 140%; font-weight: bold;

You'll notice that we've simplified it a lot compared to the header.php file's head tag code. We don't need to worry about comments or a sidebar on this page, so those bits of PHP WordPress code have been removed. We do need jQuery to load in and I've also gone ahead and added a few manual styles the cforms use to spruce up our form a bit.

We'll then add this new footer markup; just the closing body and HTML tags just below the template page's loop:

Don't forget about your plugin hooks when customizing template pages

Note, I made sure that the wp_head() and wp_footer() were manually placed in our registration template page. Many plugins require those hooks to be in a theme to work. If you're creating custom pages, make sure that they be included in the header or footer or that you place them in manually if the theme's header.php and footer.php files won't be included, as this template page does.

Last, for this new page to be recognized as a special template for WordPress, we have to add a template header to the very top of the document in commented out PHP as shown here:

Template Name: Register Form

As with our plugin in Chapter 3, Digging Deeper: Understanding WordPress and jQuery Together, make sure there are no spaces or hard returns before the <?php tag. Otherwise, you may get an error about headers already having been sent.

Now, if we return to our Registration page in the Administration panel, on the right-hand side, we'll see that our new page template is available to be assigned to the page.

We can now see that if we use the browser's address bar to navigate to the URL of our Register page, it loads up without any other WordPress styling and is ready to be loaded into our ColorBox modal window.

That's the first half of our solution. Let's now finish it.

WordPress Cash Machines

WordPress Cash Machines

In WordPress Cash Machines, you will learn over 50 different methods of making money with WordPress.

Get My Free Ebook


Post a comment