15 replies to this topic

[srussel2]

Hello, I am looking to add a WP login box to the upper right corner of my website, specifically where the social icons usually are, across from the branding in the header. Position as seen on the demo: http://demo.pagelines.com/framework/ Any tips on getting it up there? I have searched past threads but some posts were every outdated (circa 2010) and no longer applied or worked. Thanks edit: sorry didn't mean to post this in the general forums... I am using platform pro

[catrina]

What will the WP login box be used for specifically? Are you creating some kind of membership site that requires users to register so that they can log in and access certain content on your site?

[srussel2]

Are you creating some kind of membership site that requires users to register so that they can log in and access certain content on your site?

Yes, exactly :-)

Let me know if you think I will need additional plugins to accomplish this.
Kind of a novice here, haha.

[catrina]

I've heard good things about this plugin: http://wordpress.org...gins/s2member/. You can install it and try it out to see if it's exactly what you're looking for.

[srussel2]

Okay I will try it out as soon as I can. Do you think additional coding will be needed to put in the place of the social icons?

[catrina]

If you want to add the log-in box there, then perhaps there will be.

[srussel2]

What about just using a log in form with wordpress' user management system? They have page permissions and everything. I don't need all the extra stuff that comes with s2member... This isn't going to be a big website by any means.

How would I set up these values to be on the main page as I described in my first post?

Maybe just:

Login: [_________] Password: [_________] Register?
Retrieve my password

"Register" can link to a different page...

Do you think I can just chop up the current login.php, stick it as a div in the header, and then style it?

[catrina]

I think the form will require a code similar to the one used in login.php but I'm not sure exactly how it should be edited to work in the header. I searched around and found this, however: http://wordpress.org...=7#post-1515749

[srussel2]

Cool, thanks for the link. Before I read your reply I found another website which hacked up the login.php to work on a page. Anyway, here's how it looks now. Rather dapper if I do say so myself! http://www.kooikersociety.org/ However, if you notice you can't click on it or enter anything. I looked it up with fire bug and it seems the whole header div, which the header image is in, is set up to be a link. Where do I remove this? I want the header image to link to the front page, but not the whole div table. Doing the style position z thing doesn't move it in front.

[Rob]

Dapper indeed! The clicking thing may be the result of a need for a z-index. The reason the whole header is one link probably has to do with the way you wrote your hook. Can you copy and paste it here? Thanks. I'll take a look.

[srussel2]

Thanks! Here how it is written in the functions.php file

 
	// add_action('hook_name','function name');
	add_action('pagelines_after_branding_wrap', 'header_login');
	
	// function name
	function header_login(){
	?>
	<!-- top-login --><div id="header-login" style="float: right; margin-top: -80px; background-color:rgba(255,255,255,.75); padding:7px;">
	<?php
	global $user_ID;
	if(!$user_ID ) :?>
	Login Below
	<?php else :?>
	Welcome Back, <?php
	global $current_user;
	if ( isset($current_user) ) {
	    echo $current_user->user_login;
	}
	?>
	<?php endif;?>:<?php if (!(current_user_can('level_0'))){ ?>
	<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
	<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="10" placeholder="username" />
	<input type="password" name="pwd" id="pwd" size="10" placeholder="password" />
	
	<input type="submit" name="submit" value="Login" class="button" />
	
	       <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
	       <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
	
	</form>
	<a href="<?php echo get_option('home'); ?>/wp-register.php?action=register">Register</a> | <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
	<?php } else { ?>
	Logout
	<a href="<?php echo wp_logout_url('$index.php'); ?>">logout</a>
	
	<a href="<?php echo get_option('home'); ?>/wp-admin/">admin</a>
	<?php }?>
	</div><!-- /top-login -->
	
	
	<?php }
	// end function

[Jenny]

Add:

 
	position: relative;

To the header-login div

[srussel2]

Genius! You guys are the best

[Rob]

I concur. She is a genius! Thanks for the comment. I'll pass it along to her.

[Jenny]

hehe thanks Glad to help!

[zvelena]

The solution works fine, however, it overlaps with the logo on iPhone. Is there a way to put this form into a responsive layout ? (one that would go below the header on handhelds) Thanks Elena