Advertisement

Quick Tip: Making a Fancy WordPress Register Form from Scratch

by

In this tutorial, I will guide you through the process of making a beautiful "Register" form, using Fancybox, jQuery, and, of course, WordPress. As you'll find, the process is really quite simple.

Step 1. The Markup

First, let's place our button at the top of the page, replacing the default description in the theme.

Notice that in the register button, the href (#register-form) is the same ID as the form below. We're also using the class ".show" to call FancyBox with jQuery.

We need our base; let's create our markup. Open header.php, and place this following snippet anywhere you'd like.

Note that I'm using display:none to hide the form initially.


Step 2. CSS

The CSS is rather simple; I'm merely styling a quick form design in PhotoShop.

The form, minus the styling, looks like so: (note that I've removed the display:none in the markup to check my styles)

Let's next begin styling our box.

Continuing on, I'll now style the text inputs, adding some fanciness.

Now, I'll style the button, adding a hover state, and replacing the default button with an image.

Finally, we add some general styling.

Voila! we have our form. Now, let's move forward with the jQuery functionality.


Step 3. jQuery

First, we need to include jQuery within WordPress. To achieve this, we need to place the following chunk of code before the <head> tag within the header.php file. Remember, as WordPress itself utilizes jQuery, we don't want to potentially load it twice!

Download Fancybox and place it in your WordPress folder. To organize things a bit more, I've created an "Includes" folder.

Next, open your footer.php file, and place the following before the end of the </body> tag

And now, let's call the fancybox method; paste this after the code above and before the closing body tag.

We're done! Our form has been created; we lastly just need to pass the necessary WordPress information to make it function properly.


Step 4. WordPress

There is nothing fancy here; we only require two WordPress snippets, hidden within the wp-login.php file.

The first snippet:

And:

The final code should look like so:

Please note that it's really important, and necessary, to have user_login as a name and as an ID in your text input; the same is true for the email input. Otherwise, it won't work.

And with that, we're done!

Conclusion

With a touch of code, and some tweaks, we've managed to build a great looking "Register Form" for our users. What do you think?

Advertisement