Jump to content


Photo
- - - - -

Login at the top right of the page


  • Please log in to reply
15 replies to this topic

#1 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 02 March 2012 - 04:20 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 March 2012 - 04:51 PM

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?
  • wsiada likes this

#3 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 02 March 2012 - 05:23 PM

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.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 March 2012 - 05:29 PM

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.

#5 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 02 March 2012 - 05:42 PM

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?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 March 2012 - 05:53 PM

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

#7 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 02 March 2012 - 11:48 PM

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?

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 March 2012 - 04:25 PM

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

#9 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 04 March 2012 - 08:35 PM

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.

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 March 2012 - 11:14 PM

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.

#11 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 04 March 2012 - 11:29 PM

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


#12 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 05 March 2012 - 04:45 PM

Add:
 
	position: relative;

To the header-login div :)

#13 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 05 March 2012 - 05:58 PM

Genius! You guys are the best :D

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 March 2012 - 06:28 PM

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

#15 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 05 March 2012 - 09:38 PM

hehe thanks :) Glad to help!

#16 zvelena

zvelena

    Advanced Member

  • Members
  • 74 posts

Posted 21 July 2012 - 08:52 PM

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