Try Tuts+ Premium, Get Cash Back!
Quick Tip: Making a Fancy WordPress Register Form from Scratch

Quick Tip: Making a Fancy WordPress Register Form from Scratch

on May 18th 2010 with 94 comments
Tutorial Details
  • Difficulty: Intermediate
  • Estimated Completion Time: 30 min

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.

<div id="registration"><a class="show register-button" href="#register-form">Register</a></div>

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.

<div style="display:none"> <!-- Registration -->
		<div id="register-form">
		<div class="title">
			<h1>Register your Account</h1>
			<span>Sign Up with us and Enjoy!</span>
		</div>
			<form action="" method="post">
			<input type="text" name="" value="Username" id="" class="input"/>
			<input type="text" name="" value="E-Mail" id="" class="input" />
				<input type="submit" value="Register" id="register" />
			<hr />
			<p class="statement">A password will be e-mailed to you.</p>
			</form>
		</div>
</div><!-- /Registration -->

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.

div#register-form {
	width: 400px; 
	overflow: hidden; 
	height: 230px; 
	position: relative; 
	background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px; 
	font-family: Helvetica Neue, Helvetica, Arial !important;
}

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

div#register-form input[type="text"] {
	display: block;
	border: 1px solid #ccc;
	margin: 5px 20px;
	padding: 9px 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius:4px;
	width: 200px;
	font-family: Helvetica Neue, Helvetica, Arial !important; 
}

div#register-form input[type="text"]:hover {
	border-color: #b1b1b1;
}

div#register-form input[type="text"]:focus {
	-moz-box-shadow: 0 0 3px #ccc;
	-webkit-box-shadow: 0 0 3px #ccc;
}

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

div#register-form input[type="submit"]#register {
	background: url(images/register.jpg) no-repeat;
	border: 0;
	clear: both;
	cursor: pointer;
	height: 31px;
	overflow: hidden;
	position: relative;
	left:295px;
	text-indent: -9999px;
	top:42px;
	width:92px;
}
div#register-form input[type="submit"]#register:hover {
	background-position: 0 -32px;
}

Finally, we add some general styling.

div#register-form span {
	display: block;
	margin-bottom: 22px;
}

div#register-form div.title {margin-left:15px}
div#register-form div.title h1,
div#register-form div.title span {text-shadow:1px 1px 0px #fff}
div#register-form div.title h1 {
	margin:7px 0;
}

p.statement {
	position:absolute;
	bottom:-2px;
	left:10px;
	font-size:.9em;
	color:#6d6d6d;
	text-shadow:1px 1px 0px #fff;
}

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!

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

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

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
	<!-- Javascript -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

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

		jQuery(document).ready(function() {
			jQuery(".show").fancybox({
				'titleShow'		: 'false',
				'transitionIn'		: 'fade',
				'transitionOut'		: 'fade'
			});
		});

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:

<?php echo site_url('wp-login.php?action=register', 'login_post') ?>

And:

<?php do_action('register_form'); ?>

The final code should look like so:

<div style="display:none"> <!-- Registration -->
		<div id="register-form">
		<div class="title">
			<h1>Register your Account</h1>
			<span>Sign Up with us and Enjoy!</span>
		</div>
			<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
			<input type="text" name="user_login" value="Username" id="user_login" class="input" />
			<input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
				<?php do_action('register_form'); ?>
				<input type="submit" value="Register" id="register" />
			<hr />
			<p class="statement">A password will be e-mailed to you.</p>
			
			
			</form>
		</div>
</div><!-- /Registration -->

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?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a Web Designer from Venezuela, I love Photoshop, and enjoy making website templates for ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://vultro.info TechMan8

    Awesome! :D

  • http://www.visualisations.co.nz Pieter V

    Great tutorial, keep the wordpress ones coming!

  • http://yoshz.com yoshz

    Thanks for this tip. very useful :)

  • http://ds.laroouse.com esranull

    very nice post thanks a lot

  • amidude

    Nice tut…isn’t having style=”display:none” inside your markup bad coding? Can’t that be placed in the stylesheet?

  • Daniel Ribeiro

    Great!

    Another great post!

    Congratulations from Brazil!

  • http://spotdex.com Davidmoreen

    This was a pretty nice tutorial for a Quick Tip! I love the fancy box integration!

  • http://driftinfo.lv Frenky

    Wow, what a new. I’m going to use that.

    —

    Thanks to author. ;)

  • http://www.jsxtech.com Jaspal Singh

    Great tutorial.

  • http://www.xcellence-it.com/ Xcellence IT

    awesome tutorial….

    Thanks for sharing this…

    Regards
    Xcellence IT

  • Don

    That’s great!
    Thanks heaps.

  • http://www.newoutlet.com/ Wai Han

    What a nice tutorial! Thanks for sharing.

  • http://blog.alchemycode.pl AlchemyCode

    Great article! I always appreciate wordpress tutorials :)

  • http://www.codeforest.net Codeforest

    I really like tutorials like this. WordPress is great. Keep it coming

  • http://www.code-pal.com Sumeet Chawla

    Nice stuff…I was always thinking how to implement a “Register” feature on the wordpress blog. There are many plugins available for that but nothing beats a completely customized coded registration box :) Thanks for sharing…!

  • http://newarts.at Drazen Mokic

    Man…” ” Inline CSS? Why?

    I like the result but the totally unnecessary use of inline css is really ugly.

    • http://newarts.at Drazen Mokic

      And btw, without javascript no registration right? Adding “display:none” with Javascript would have been a better idea (progressive enhancement).

      I dont want to play the bad guy but that`s a serious point.

  • http://www.damiencarbery.com Damien Carbery

    You correctly used wp_enqueue_script to load jquery. For consistency, you should probably also use it for the FancyBox scripts, even though they are in your theme directory.

  • http://www.jordanwalker.net Jordan Walker

    Excellent tutorial for WordPress, thanks for the contribution.

  • http://hdesignsPlus.com HDesignsPlus

    Thanks Ivor Padilla, Just what I needed, although I expected an screen cast for this quick tip, but even without a video it was very helpful, all i found on the web about this was just some outdated tuts, but this one is fresh out of the oven :)

  • James

    Can we do the same thing with login?

    • http://ronaldfarber.com Ronald

      I was also looking to do this, and, seeing as no one else had, I tinkered around with it myself until I had transformed it into a Login feature.

      Just replace the “form” part of the code with the following:

      <form action=”<?php echo site_url(‘wp-login.php’, ‘login’) ?>” method=”post”>
      <input type=”text” name=”log” value=”Username” id=”user_login” class=”input” />
      <input type=”password” name=”pwd” value=”" id=”user_password” class=”input” />
      <?php do_action(‘login_form’); ?>
      <input type=”submit” value=”Login” id=”login” />
      </form>

  • SkipSoft

    WoW, Really Nice Tutorial. Thanks.

  • http://tutorialblog.info/ tutorial blog

    thank! very useful

  • http://www.archivetr.net/ dellopos

    Thanx. Very nice.

  • http://www.5-squared.com 5-Squared

    Awesome post Ivor! Thanks!

  • http://www.boudigi.com Sylvie

    Thanks Ivor awesome tutorial.

  • http://www.sensehow.com aaslin

    good guide for wordpress…give more of wordpress

  • http://www.sokwebdesign.com Martin

    This is another incomplete WORDPRESS tutorial.

    I think I have gone through 10-12 of these wordpress tutorials only to find the author rushes to the end and seems to leave out one of the most important pieces of information; That is how and where to place the snippet of code in WORDPress.

    This mostly occurs in the wordpress plugin tutorials.

    Come on TUTS.

    Quality Control for my Bucks.

    • http://ivorpadilla.net Ivor
      Author

      This is not a tutorial per se this is a Quick Tip! The Title is very clear I think =)

    • http://1sprint.com Calle

      I second that opinion. The placement of code is important – otherwise its a great tutorial..

    • http://relevantdevelopment.co.uk Ash

      I wasn’t aware that you’d paid anything for this quick tip, Martin?

  • http://www.ci-dd.com Cesar

    Excellent tutorial. I have been looking for this information all around, and I could not find it. Thanks !!

    Could you please indicate a way to re-direct the user after the “register” button has been clicked to a page, instead to go to the wp-login.php?

    Best,

  • http://www.kreatech.net Ejaz

    Great tip Ivor, Let me add my two cents

    div should not be appended before an ID, it makes it slower and overly qualified. This is a performance drawback.
    (more info http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors)

    e.g.
    div#register-form span {
    should be

    #register-form span {

    I hope this would make already good code a better one.

  • Yomero

    Yeah, I’m interested in knowing that. Also, what hooks do I need to use to make a Register form? Really, thanks for the info!

  • Grant

    Thanks, that is a good register way for me to use.

  • http://gavinjaynes.com Gavin

    Hey thanks for the tip – it’s really going to help me out. I need a little help though – I have tried to implement the custom registration box but fancybox just won’t play. Obviously it’s not working as in my footer I’m getting this text displaying:

    jQuery(document).ready(function() { jQuery(“.show”).fancybox({ titleShow’: ‘false’, ‘transitionIn’: ‘fade’, ‘transitionOut’: ‘fade’}); });

    Why does that code belong in the footer – can someone please explain that to me. I have tried change file premissions thinking it might be that but no luck.

    Any help would be much appreciated

    Thanks

    • PAblo

      I have same error at the footer :(

      Where is error??

    • mat

      I do have the same error… It doesn’t work on my blog. :(

    • Simon

      Same here… Any clues yet? Would be awesome to get this running on my WP

    • http://www.windkr89.nl Erik

      Any success? I have the same error, can some one please help me out?

    • http://www.windkr89.nl Erik

      Stupid me, looked at the code and the <script> tags are just missing, problem solved for me….

    • ken

      you forgot the tags around the javascript part, i think as it wasn’t mentioned in
      the tut. but you had to know.

    • http://www.sherwinhermogenes.com/ Web Designer Philippines

      You need to add the script tag that’s why the code is showing.

  • Jaysone

    Wish there was a post on wordpress comments. Getting it setup especially with the fact that wordpress 3.0 is out.

  • http://www.livetv.pk imran14826

    Could you please indicate a way to re-direct the user after the “register” button has been clicked to a page, instead to go to the wp-login.php?

    Imran14826
    http://www.livetv.pk

  • http://fedelosa.com Federico

    Could anybody explain me more in detail the 4th step?

    Where to put the wordpress code snippet?

    Thanks and sorry for my english

  • Ali

    Hi,

    Thanks for the code but can some guide me how to autoload this registration box on page load. I’ve tried to use the onload click event but nothing happens.

    Thanks,
    Ali

  • http://donnieraycrisp.de Donnie

    PLEASE PLEASE PLEASE could you show how it is done to redirect back to the page with the message instead of directing to the login.php. PLEASE ^^

    • Tristan

      Hi Donnie, did you ever discover how to do this?

      • Júlio

        Add in form:

        <input type="hidden" name="redirect_to" value="”/>

  • http://ernaotoh.blogspot.com erna

    nice!
    just the way I want!
    simple and easy.

  • http://www.daists.com daists

    very nice ~!

    Thanks your share ~!

  • http://www.xcellence-it.com pop

    thanks man….

    was really a great help…

    n a great tutorial too..

  • http://www.linkare.com.br Pietro Marafiga

    Works here!
    But how I do proceed to choose the size of lightbox content?
    Width and height?

    thanks from Brazil!

  • http://www.clickddl.com/ clickddl

    very goood site. thanx.

  • http://b2nature Didi Prasetyo

    nice post. it’s very usefull

  • http://pinnaclenetworking.com Art Eppley

    Very nice “quick Tip” however, the reg box does not show… I don’t get the same “issues” as having the jquery in the footer show (i knew to add the to both sides….why isn’t this appearing????

    • http://pinnaclenetworking.com Art Eppley

      I’ve tried all sorts of fixes… can’t get this to work :(

  • http://www.jtotv.com jim

    beautifull… thanks for share…

  • http://flickapix.co.uk/ dan

    im using prettyphoto in my wp site and fancybox conflicts,can i use the pretty photoin its place and how would i implement it,

    any help is appreciated

    • Fask

      PrettyPhoto if you use, you do not have to use fancybox … You can do the same things.

  • Marz

    This is a great tutorial, but what if you want to use this as a “Log In” and not for “Registration”?

    What PHP code should apply in order to change the box into “Log In” box?

  • http://www.postern.se/ Postern

    Thank you very much for this,It saved my time
    really thrilling to use it

  • http://savingmoneyexpert.com.au Ryan

    Anyone know how this can be accomplished with the WordPress Thesis 1.8, and openhooks?

    You need to edit the custom.css files, and prefix everything your styling with .custom, and you must add everything in openhooks, so its slightly varied.

    If anyone has accomplished this same thing with thesis and openhooks i’d really like to hear from them

  • http://www.websbyu.com Rudy Pohl

    Hi Ivor:

    I’ve read through the entire tutorial and am looking forward to working through it this Saturday when I finally have some time.

    One question: Are yuo familiar with the Genesis Framework for WordPress, and if you are, do you know if your method above will work on their themes?

    Thanks again…. great teaching!

    Rudy in Ottawa

Newer Comments →