• Default WordPress Login Page
• Moving the login/register/password form
• Custom WordPress template code
• Implement and Demo
• Customizing things
• Wrap up

Default WordPress Login Page

Out of the box, WordPress uses wp-login.php for logging into the Admin, retrieving lost passwords, and registering for site membership. Each of these activities are handled on the same page, commonly referred to as the WordPress Login Page.

Yep, it’s the WordPress Login Page

As seen here, the Login Page shows the log-in form by default. Beneath the form are two links, “Register” and “Lost your password?”, which enable users to (yep, you guessed it) register and recover their password.

The cool thing about the Login Page is that the page doesn’t reload when either of these links are clicked. Instead, the form instantly changes from login to register or password to whatever. All three forms are included on the wp-login.php page and hidden/revealed as-needed using JavaScript. This “same-page” functionality is key to setting up our own custom login/register/password form elsewhere in our theme.

Moving the login/register/password form

While it’s not a good idea to move the entire wp-login.php file, it is possible to display the login/register/password forms anywhere in your theme. For example, putting the forms in your sidebar.php make it super-easy for visitors to register and login from anywhere in your site (here is an example). You could even create a WordPress page for each event: login, registration, and password-recovery pages that are customized/optimized in some really unique, bad-ass way.

The key to mobilizing the login forms is ensuring that they’ll work properly regardless of placement (before, after, or within the loop) in your theme template files. We also want to ensure that normal visitors who aren’t logged in see the forms, but logged-in users do not (or see alternate content).

Basically, it should work exactly like the default WordPress login functionality, but with one exception: instead of redirecting to the Admin Area (for log-ins) or to the Login Page (for registrations/password-recovery), we want the user to remain on the same page. This enables your guests to log-in, register, and reset passwords without leaving whatever page they happen to be visiting. Here’s the code to make it happen..

Custom WordPress template code

Here is the code to display the login/register/password form anywhere in your theme:

view as plain text

<div id="login-register-password">

	<?php global $user_ID, $user_identity; get_currentuserinfo(); if (!$user_ID) { ?>

	<ul class="tabs_login">
		<li class="active_login"><a href="#tab1_login">Login</a></li>
		<li><a href="#tab2_login">Register</a></li>
		<li><a href="#tab3_login">Forgot?</a></li>
	</ul>
	<div class="tab_container_login">
		<div id="tab1_login" class="tab_content_login">

			<?php $register = $_GET['register']; $reset = $_GET['reset']; if ($register == true) { ?>

			<h3>Success!</h3>
			<p>Check your email for the password and then return to log in.</p>

			<?php } elseif ($reset == true) { ?>

			<h3>Success!</h3>
			<p>Check your email to reset your password.</p>

			<?php } else { ?>

			<h3>Have an account?</h3>
			<p>Log in or sign up! It&rsquo;s fast &amp; <em>free!</em></p>

			<?php } ?>

			<form method="post" action="<?php bloginfo('url') ?>/wp-login.php" class="wp-user-form">
				<div class="username">
					<label for="user_login"><?php _e('Username'); ?>: </label>
					<input type="text" name="log" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="11" />
				</div>
				<div class="password">
					<label for="user_pass"><?php _e('Password'); ?>: </label>
					<input type="password" name="pwd" value="" size="20" id="user_pass" tabindex="12" />
				</div>
				<div class="login_fields">
					<div class="rememberme">
						<label for="rememberme">
							<input type="checkbox" name="rememberme" value="forever" checked="checked" id="rememberme" tabindex="13" /> Remember me
						</label>
					</div>
					<?php do_action('login_form'); ?>
					<input type="submit" name="user-submit" value="<?php _e('Login'); ?>" tabindex="14" class="user-submit" />
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
					<input type="hidden" name="user-cookie" value="1" />
				</div>
			</form>
		</div>
		<div id="tab2_login" class="tab_content_login" style="display:none;">
			<h3>Register for this site!</h3>
			<p>Sign up now for the good stuff.</p>
			<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" class="wp-user-form">
				<div class="username">
					<label for="user_login"><?php _e('Username'); ?>: </label>
					<input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" />
				</div>
				<div class="password">
					<label for="user_email"><?php _e('Your Email'); ?>: </label>
					<input type="text" name="user_email" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" id="user_email" tabindex="102" />
				</div>
				<div class="login_fields">
					<?php do_action('register_form'); ?>
					<input type="submit" name="user-submit" value="<?php _e('Sign up!'); ?>" class="user-submit" tabindex="103" />
					<?php $register = $_GET['register']; if($register == true) { echo '<p>Check your email for the password!</p>'; } ?>
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?register=true" />
					<input type="hidden" name="user-cookie" value="1" />
				</div>
			</form>
		</div>
		<div id="tab3_login" class="tab_content_login" style="display:none;">
			<h3>Lose something?</h3>
			<p>Enter your username or email to reset your password.</p>
			<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" class="wp-user-form">
				<div class="username">
					<label for="user_login" class="hide"><?php _e('Username or Email'); ?>: </label>
					<input type="text" name="user_login" value="" size="20" id="user_login" tabindex="1001" />
				</div>
				<div class="login_fields">
					<?php do_action('login_form', 'resetpass'); ?>
					<input type="submit" name="user-submit" value="<?php _e('Reset my password'); ?>" class="user-submit" tabindex="1002" />
					<?php $reset = $_GET['reset']; if($reset == true) { echo '<p>A message will be sent to your email address.</p>'; } ?>
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=true" />
					<input type="hidden" name="user-cookie" value="1" />
				</div>
			</form>
		</div>
	</div>

	<?php } else { // is logged in ?>

	<div class="sidebox">
		<h3>Welcome, <?php echo $user_identity; ?></h3>
		<div class="usericon">
			<?php global $userdata; get_currentuserinfo(); echo get_avatar($userdata->ID, 60); ?>

		</div>
		<div class="userinfo">
			<p>You&rsquo;re logged in as <strong><?php echo $user_identity; ?></strong></p>
			<p>
				<a href="<?php echo wp_logout_url('index.php'); ?>">Log out</a> | 
				<?php if (current_user_can('manage_options')) { 
					echo '<a href="' . admin_url() . '">' . __('Admin') . '</a>'; } else { 
					echo '<a href="' . admin_url() . 'profile.php">' . __('Profile') . '</a>'; } ?>

			</p>
		</div>
	</div>

	<?php } ?>

</div>

Okay, so here are the functional highlights for this hefty chunk of code:

• Everything is wrapped with <div id="login-register-password"></div>
• If the user is not logged in, the three forms are included in the markup
• If the user is logged in, a simple welcome message is displayed
• Success messages are displayed after both password recovery and registration
• Each form submission sets a generic user-cookie
• After login or registration, the script redirects the user to the same page
• Only one form is shown at a time; JavaScript is used to show and hide forms

So if you just throw this thing into your sidebar.php file, you’ll see the login form and three links: login, register, and recover-password. The other two forms are included in the markup, but are hidden with CSS (display:none;). As-is, the three links won’t do anything because they require JavaScript to work. Once we sprinkle in some jQuery, the links will toggle the three different forms.

Implement and Demo

First let’s walk through using this code in your theme, and then we’ll check out a demo.

1. Place the custom login code in your sidebar.php file, or some other location
2. Grab the jQuery code (no-conflict mode) and include it in your footer.php file
3. Include the CSS code in your theme’s style.css file, or wherever your styles are located

..and done. Once these three items are in place, upload everything to your server and check it out. Here is a demo showing this code used on a custom page within the loop.

Note that we have registration disabled here at DigWP.com, so the forms won’t be of much use other than to show how the tabs work and how the forms are styled. Here are some screenshots showing the “success” messages, and also the “logged-in” display.

Message displayed on successful registration

Message displayed on successful password-recovery

Content displayed when user is logged into the site

Here again is the demo and here are the three resource files:

• Custom Template Code
• jQuery Code
• CSS Code

Customizing things

One of the main reasons why we like working with actual code instead of widgets or plugins is the ability to easily customize anything we want exactly how we want it. With this implementation, there are basically three things to customize: the jQuery, the custom login code, and the CSS. As with any code, there are countless ways to modify appearance and functionality, so hopefully you have something specific in mind, and are familiar enough with design to jump in and customize things. If not, no worries – here are some ideas to help get you started.

Customizing the login forms

As-is, the custom login forms redirect to the current page. To get any/all of the forms to redirect to a different page, locate and edit the following line of code:

<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />

There are three instances of this hidden input field, which WordPress uses to perform the redirect. The value returns the current URL, so that’s what needs changed for each form to redirect elsewhere.

Another useful modification involves customizing what the logged-in users see. Showing the gravatar and username is kind of neat, but there are tons of cool tricks to help ensure smooth user experience.

Customizing the jQuery

The jQuery used to show/hide the different login panels is actually pretty basic and is only used for toggling display states. I suppose there is a way to customize this, but it already handles additional menu items, so maybe you want to change the class names or optimize the script or something.

I do love to look at a nice slice of well-formatted jQuery, however, so I’ll further indulge myself by including the entire code snippet right here:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".tab_content_login").hide();
		$("ul.tabs_login li:first").addClass("active_login").show();
		$(".tab_content_login:first").show();
		$("ul.tabs_login li").click(function() {
			$("ul.tabs_login li").removeClass("active_login");
			$(this).addClass("active_login");
			$(".tab_content_login").hide();
			var activeTab = $(this).find("a").attr("href");
			if ($.browser.msie) {$(activeTab).show();}
			else {$(activeTab).show();}
			return false;
		});
	});
</script>

A bit heavy-handed perhaps, but works great with no editing required ;)

Customizing the CSS

To get that fancy tabbed form menu looking all clean and rounded, much CSS is used. So instead of posting endless gobs of CSS, here is the code in plain text. As with any CSS, the best way to customize things is to open Firebug and start tweaking.

Just the links

One last trick: use this code to display links to the default WordPress login/registration page:

<ul>
	<?php wp_register(); ?>
	<li><?php wp_loginout(); ?></li>
	<?php wp_meta(); ?>
</ul>

Nothing to golf about, but I figured it was worth mentioning.

Wrap up

Using the code and techniques in this article, you can provide your readers with a login form anywhere on your site. This makes it easy for your users and visitors to login/logout, register for your site, and recover passwords without leaving their current page. The login code works great as-is or is easily transformed into a snazzily tabbed login menu using a sprinkle of CSS and a dash of jQuery.

Finally, one of the great things about WordPress is that there is always more than one way to set things up. So if you see a way to improve the code, please share with the community by leaving a comment. Thank you!

© 2010 Digging into WordPress | Permalink | 63 comments | Add to del.icio.us | Post tags: Admin, Theme

One example situation is the contest we just ran. Like many blog-based comments, it was comment-to-win. That means it’s best to close the comments when the contest is over, so people clearly understand that it’s over. We do close comments after a few months on this site to avoid spam and questions that come in way after the fact and will probably never be answered, but this is a case where we close comments much sooner than a few months. When we closed the contest, we actually put the winners of it as a custom message beneath the comment thread.

To accomplish this in a very easy-to-use manner, we’ll create a custom meta box inside the Post Editor itself.

Functions.php

We need to hook into two actions for this. We’ll use the ‘admin_menu’ and ‘add_meta_box’ to create the meta box. Then we’ll tap into ‘save_post’ and use ‘update_post_meta’ to actually save the value entered.

// After Comments Message

add_action('admin_menu', 'custom_comments_message_hooks');
add_action('save_post', 'save_custom_comments_message');

function custom_comments_message_hooks() {
	add_meta_box('custom_comments_message', 'Custom Comments Message', 'custom_comments_message_input', 'post', 'normal', 'high');
}
function custom_comments_message_input() {
	global $post;
	echo '
<input id="custom_comments_message_noncename" name="custom_comments_message_noncename" type="hidden" value="'.wp_create_nonce('custom_comments_message').'" />';
	echo '<textarea id="custom_comments_message" style="width: 100%;" cols="30" rows="5" name="custom_comments_message">'.get_post_meta($post-&gt;ID,'_custom_comments_message',true).'</textarea>';
}
function save_custom_comments_message($post_id) {
	if (!wp_verify_nonce($_POST['custom_comments_message_noncename'], 'custom_comments_message')) return $post_id;
	if (defined('DOING_AUTOSAVE') &amp;&amp; DOING_AUTOSAVE) return $post_id;
	$custom_comments_message = $_POST['custom_comments_message'];
	update_post_meta($post_id, '_custom_comments_message', $custom_comments_message);
}

That is the entire UI for creating this functional data-saving meta box. Now we just need to actually use that value.

Comments.php

There is some logic in the comments.php file which tests if comments are open or not. If they are, the comment form is output, if they are not, some kind of “comments closed” message is output. We’ll be tinkering around in the “if they are not” section (the “else” code below) and adding a check for our special custom field value. If it’s present, output that, if not, output the default.

<?php if ( comments_open() ) :

  // regular outputting of comments stuff in here

<?php else: 

	global $post;

	$custom_message = get_post_meta($post->ID, '_custom_comments_message', true);
		
	if ($custom_message != '') {
		
		echo '<div id="after-comments-message">';
		echo $custom_message;
		echo "</div>";
		
	} else {
	
		echo '<div id="after-comments-message">Comments are closed. If you have something really important to add, <a href="/contact/">contact us</a>. Thank you!</div>';
	
	} ?>
	
<?php endif; ?>

That’s all there is to it! Now you have a fancy custom box right in your Post Editor where, should you choose, you can close comments and write a custom message to display after the existing comments.

© 2010 Digging into WordPress | Permalink | 15 comments | Add to del.icio.us | Post tags: comments, functions.php, message

Direct Link to Article — Permalink on DiW

© 2010 Digging into WordPress | Permalink | No comment | Add to del.icio.us | Post tags:

Now available as a WordPress plugin to make it even easier. Just use simple shortcodes to link up the video and specify what options you want (e.g. autoplay, fullscreen, etc).

Direct Link to Article — Permalink on DiW

© 2010 Digging into WordPress | Permalink | No comment | Add to del.icio.us | Post tags:

1) Declare CSS for Visual Editor

Very easy, one-liner in your functions.php file.

// Add CSS to Visual Editor
add_editor_style('css/custom-editor-style.css');

The file path that you pass as a parameter is relative to your theme’s root. Make sure to actually create this file in your theme folder, at the specified location!

2) Make Sure You Have a Common Class To Work With

The HTML markup for the posts on your site are very likely wrapped within a container element. Perhaps something like:

<div class="post">
  <!-- all content for entire post in here -->
</div>

Then your typography CSS likely uses that class name to to create typography specific to posts:

.post h1, .post h2, .post h3, .post h4 { font-family: MuseoLight, Georgia, serif; font-weight: normal; margin: 0 0 10px 0; }
.post h2 { font-size: 28px; }
.post h2 { padding: 10px 180px 10px 15px; background: #237abf url(../images/title-bg.png) repeat-x; margin: 0; line-height: 1.3; font-size: 22px; }
.post h2, .post h2 a { color: white; text-shadow: 0 1px 2px #143855; }
.post h2 a:hover { color: #b8e0ff; }
.post h3 { font-size: 20px; padding: 5px 0; margin: 30px 0 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.post h4 { font-size: 18px; }
.post p { margin: 0 0 10px 0; }
.post pre { background: #eee; padding: 15px; overflow: auto; margin: 0 0 15px 0; border: 1px solid #ddd; }
.post pre code { font-size: 11px; }
.post code { background: #eee; font: 12px Monaco, Courier, Monospace; color: #0E304A; }
.post h3 code { font-size: 18px; }
.post acronym, abbr { border-bottom: 1px dotted #514031; cursor: help; }
.post ins { text-decoration: underline; }
.post del { text-decoration: line-through; }
.post a { outline: none; text-decoration: none; color: #19517C; background: #eee; border: 1px solid #ddd; padding: 1px 3px 2px 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.post a:hover { color: #fff; background: #143855; border: 1px solid #143855; }

It would be nice if we could just copy and paste that over to the CSS file we declared in Step 1. The problem is, the Visual Editor doesn’t have that same class name inside of it. So if we did a straight up copy-and-paste, none of these styles would apply. Rather than re-jigger all our CSS to not use that class name, we can actually just force the visual editor to also have that class name.

Just put this in functions.php:

// Add body class to Visual Editor to match class used live
function mytheme_mce_settings( $initArray ){
 $initArray['body_class'] = 'post';
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'mytheme_mce_settings' );

This isn’t quite as efficient as referencing a single file, but at least you can copy and paste easily. If you are the type of person who separates CSS out into different files (like Typography has it’s own typography.css), then you are more than welcome to reference the same CSS both for Visual Editor and in the live theme. That’s just now how I roll.

The body class trick is from Seamus Leahy. Thanks Seamus!

The Result:

Check out this example of this very post from back end to front end:

You can literally do anything CSS can do, right down to the custom web fonts!

© 2010 Digging into WordPress | Permalink | 26 comments | Add to del.icio.us | Post tags: editor, functions.php

Direct Link to Article — Permalink on DiW

© 2010 Digging into WordPress | Permalink | No comment | Add to del.icio.us | Post tags:

• DiW Book Giveaway
• DiW Holiday Sale
• DiW Scratch-n-Dent Sale

Book Giveaway!

To kick off the holiday event, we’re giving away 10 awesome prizes:

• 1 printed edition of Digging into WordPress (includes everything + free shipping)
• 3 digital copies of Digging into WordPress (PDF, includes themes + lifetime updates)
• 3 discount coupons for $20 OFF DiW Printed Books
• 3 discount coupons for $10 OFF DiW PDF Books

To enter the contest, just leave a comment about how you utilize WordPress and/or why you read this blog. We’ll randomly choose the 10 winners on Black Friday (November 26, 2010).

If you win a discount coupon but already own or don’t want to/can’t purchase the book, feel free to give it away to a friend.

Holiday Book Sale!

In addition to the Book Giveaway, we’re throwing a DiW Holiday Sale! From now until December 10th, you can get Digging into WordPress for $5 off the PDF and $10 off the printed edition. Just use these discount codes during checkout:

• $5 off the e-book (PDF): LetItSnow
• $10 off the printed edition + e-book: HoHoHo

All books include free lifetime updates, exclusive WordPress themes, and access to our DigWP.com members area, where you can download anything you need anytime you want. Sound good? Go here to get Digging into WordPress at these limited-time sale prices.

Scratch & Dent Sale

We’re also offering a $15 discount for a limited number of printed books that were scratched & dented during the printing/shipping process. These “scratch & dent” books are all packaged up and ready to ship to anyone who doesn’t mind a few dingers. Most of these books are actually in pretty decent condition – check out these photos (click for full-size view):

Most of these books have some light scuffs or scratches on the front/back covers, but the pages are all perfectly fine. A few of them have some bent corners and other dings, but those are at the bottom of the stack (hint hint). Please note that the scratch-n-dent books are sold strictly on an “as-is” basis. Go here to grab one of these books for $55 while supplies last.

Happy Holidays!

We want to thank everyone for making Digging into WordPress such an awesome experience. We wish you and yours a very special Holiday Season! :)

© 2010 Digging into WordPress | Permalink | 156 comments | Add to del.icio.us | Post tags: book, sale

Direct Link to Article — Permalink on DiW

© 2010 Digging into WordPress | Permalink | No comment | Add to del.icio.us | Post tags: