Simple Login Box in Header

  • Hey all,
    I know this isnt exactly a totally new subject but after over a week of struggling with this I figured I’d see if I could get some help.
    So, all I want to do is add a simple login/logout/register/forgot password box into the header of a site I’m working on for a client.
    I come from an old school html background and am still pretty fresh to css and php etc. I love the usability of wordpress and widgets but cannot get this to work the way I need it to.
    What I need is something like this:
    https://i38.tinypic.com/b5r24z.jpg
    but with register / forgot pass also.
    more like what’s pictured at the top of this:
    https://greenforestcafe.net/main-page-changed.jpg
    I currently have the Sidebar Login widget placed in the header widget section using WP Weaver. It seems no matter what I do I cant resize it to fit properly like I need it to be.
    In my constant searchin on the subject I came across this post:
    https://www.ads-software.com/support/topic/how-to-put-a-login-box-in-header
    I have tried using the code posted in that, putting it in the header.php and also tried instead using the code in a custom widget but can’t get it to look right, instead of a neat box like
    https://i38.tinypic.com/b5r24z.jpg
    it comes out stair-stepped, not aligned, just kinda jumbled.
    also it lacks the register and forgot pass functions anyway.
    My client is being very specific about wanting this seemingly simple thing in pretty much exactly the way they pictured in the mock up they made https://greenforestcafe.net/main-page-changed.jpg
    I’ve seen this done over and over on various websites but cannot for the life of me get it to work right, at my wits end…
    website I’m workong on: https://greenforestcafe.net/
    code I tried from the post I mentioned:

    <div align=”right”>

    <form name=”loginform” id=”loginform” action=”https://xxx.com/wp-login.php&#8221; method=”post”>

    Username <input value=”Username” class=”input” type=”text” size=”20″ tabindex=”10″ name=”log” id=”user_login” onfocus=”if (this.value == ‘Username’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Username’;}” /> <input name=”rememberme” id=”rememberme” value=”forever” tabindex=”90″ type=”checkbox”> Remember Me?

    Password <input value=”Password” class=”input” type=”password” size=”20″ tabindex=”20″ name=”pwd” id=”user_pass” onfocus=”if (this.value == ‘Password’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Password’;}” />
    <input name=”wp-submit” id=”wp-submit” value=”Log In” tabindex=”100″ type=”submit”>
    <input name=”redirect_to” value=”https://xxx.com/wp-admin/&#8221; type=”hidden”>
    <input name=”testcookie” value=”1″ type=”hidden”>

    </form>
    </div>

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    Have you try this link https://www.wprecipes.com/add-a-login-form-on-your-wordpress-theme ?

    I’ve tried it and have it modified like this:

    <?php

function form_login( $args = array() ) {
	$defaults = array( 'echo' => true,
						'redirect' => ( is_ssl() ? 'https://' : 'https://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], // Default redirect is back to the current page
	 					'form_id' => 'loginform',
						'label_username' => __( 'Username' ),
						'label_password' => __( 'Password' ),
						'label_remember' => __( 'Remember Me' ),
						'label_log_in' => __( 'Login' ),
						'id_username' => 'user_login',
						'id_password' => 'user_pass',
						'id_remember' => 'rememberme',
						'id_submit' => 'wp-submit',
						'remember' => true,
						'value_username' => '',
						'value_remember' => false, // Set this to true to default the "Remember me" checkbox to checked
					);
	$args = wp_parse_args( $args, apply_filters( 'login_form_defaults', $defaults ) );

	$form = '
		<form name="' . $args['form_id'] . '" id="' . $args['form_id'] . '" action="' . esc_url( site_url( 'wp-login.php', 'login_post' ) ) . '" method="post">
			' . apply_filters( 'login_form_top', '', $args ) . '
			<label for="' . esc_attr( $args['id_username'] ) . '">' . esc_html( $args['label_username'] ) . '</label>
				<span><input type="text" name="log" id="' . esc_attr( $args['id_username'] ) . '" class="input" value="' . esc_attr( $args['value_username'] ) . '" size="15" tabindex="10" /></span><br>
			<label for="' . esc_attr( $args['id_password'] ) . '">' . esc_html( $args['label_password'] ) . '</label>
				<span><input type="password" name="pwd" id="' . esc_attr( $args['id_password'] ) . '" class="input" value="" size="15" tabindex="20" /></span><br>
			' . apply_filters( 'login_form_middle', '', $args ) . '
			' . ( $args['remember'] ? '<label><input name="rememberme" type="checkbox" id="' . esc_attr( $args['id_remember'] ) . '" value="forever" tabindex="90"' . ( $args['value_remember'] ? ' checked="checked"' : '' ) . ' /> ' . esc_html( $args['label_remember'] ) . '</label>' : '' ) . '
				<input type="submit" name="wp-submit" id="' . esc_attr( $args['id_submit'] ) . '" class="button-primary" value="' . esc_attr( $args['label_log_in'] ) . '" tabindex="100" />
				<input type="hidden" name="redirect_to" value="' . esc_url( $args['redirect'] ) . '" />

			' . apply_filters( 'login_form_bottom', '', $args ) . '
		</form>';

	if ( $args['echo'] )
		echo $form;
	else
		return $form;
}

?>

    Have it a go, and let us know what the result you get, just to remind you. You might have to play around with css to get the result you want.

    Oh and also, i haven’t figure out too about the function wp_register() it just doesn’t show up anything. Maybe guys from wordpress will make it clearer.

    cheers,

    oh and yes, i forgot to mention that i also combine it with function wp_login_form() to make that code, a little mix here and there

    If you download the Emporium theme, it contains a custom login widget (using wp_login_form()). Perhaps you can grab some code from there?

    Okay,

    I figure it now, it was my bad i didn’t notice 1 tiny option. So the step is like this:
    1. Make sure you enable the “Anyone can register” option in general setting, if you are not sure read this article https://www.dummies.com/how-to/content/how-to-allow-user-registration-on-your-wordpress-n.html

    2. If you are making your own theme write this on your header.php on your theme folder around line 77 (after the </hgroup> or put it somewhere else you like just don’t broke the other stuffs)

    <!--Login Form Begin-->
  <?php if (!is_user_logged_in()){ ?>
  <div id="login-form"><!--create new id on css just to make it easy to order things-->
  <?php form_login() ; ?><!--this is my own modification code because i hate the paragraph used on wp_login_form(), i wrote it on function.php in my theme folder-->
   <?php wp_register('', ''); ?>&nbsp;|&nbsp;<a href="<?php echo wp_lostpassword_url( get_permalink() ); ?>" title="Lost Password">Lost Password</a>
  </div>
  <?php } else { ?>
  <div id="login-form">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
   <p>&nbsp;</p>
  <?php wp_register('<p>', '</P>'); ?>
  <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
  </div>
  <?php }?>
  <!--Login Form End-->

    3. modified your style.css to get the look you want
    4. If you do anything right you’ll get something similar to https://dl.dropbox.com/u/91247708/ss%20frmlogin.jpg

    Hope you’ll find it usefull

    Cheers,

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Simple Login Box in Header’ is closed to new replies.