Login and Register on the main page?

[cassel]

I seem to remember seeing something about this but i cannot find that information again. Is there a way to have the login/register "page" or such directly on the main page, so that users can simply enter their information from where they are instead of having to go to a login/register page and come back?

As i am using Headway Theme, i would LOVE to be able to put a "smaller version" of the login/register page into a side leaf, in plain view of the visitor.

Is it possible?

[Cristián Lávaque]

If you're using s2Member Pro, you have the Pro Login Widget available to you. WP Admin -> Appearance -> Widgets

The Pro Login Widget can also be included using PHP. WP Admin -> s2Member -> API / Scripting -> Pro Login Widget via PHP

If you don't have Pro, you can also try this free plugin http://wordpress.org/extend/plugins/sidebar-login/

I hope that helps.

[cassel]

I"ll look at the plugin, since i do not have the Pro version. Thanks for the link.

[Cristián Lávaque]

Cool.

[theone]

You don't really need the plugin to get this to work. Though I do highly recommend purchasing it as there's a bunch of cool extra things that it can do (plus your helping support future updates).

I have a login form on my homepage (which isn't even part of my Wordpress installation). I just copied the rendered code from wp-login.php, styled it accordingly, and then inserted it into my index.php page.

My code looks something like this. As long as the form is pointing to the right address (and your input ID are correct) it will work on any website.

(ie. I could put a login form to MY website on YOUR homepage).

Code: Select all

<form name="loginform" id="loginform" action="http://www.mydomain.com/members/wp-login.php" method="post">
   <p>
      <label>Username *<br />
      <input type="text" name="log" id="user_login" class="input" value="admin" size="20" tabindex="10" /></label>

   </p>
   <p>
      <label>Password *<br />
      <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
   </p>
   <div class="remember-me"></div>
   <p class="submit">
      <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="" tabindex="100" />

      <input type="hidden" name="redirect_to" value="http://www.mydomain.com/members" />
      <input type="hidden" name="testcookie" value="1" />
   </p>
</form>

[cassel]

The sidebar-login plugin is free though. So far it works fine, but due to my theme, it looks horrible! That needs work. So, now, waiting to hear from the support for Headway, to see if there is a little detail to adjust because the plugin, used as is, does not look like it is supposed to. So, i am juggling: WP + s2Member + Headway Theme = A LOT TO LEARN!

[theone]

Well the way I just mentioned will allow you to style it any way you wanted. However, it requires moderate knowledge of html / css and how forms work.

I'm not sure what the capabilities are in regards to styling with the plugin. I tried it out and it didn't do what I needed so I went with the aforementioned method which works perfectly for me as it can be adjusted as needed.

[cassel]

Unfortunately, i only have MILD knowledge of html/css and no idea about forms! But since i have a TEST site, i can mess as much as i want! (and i will)

[cassel]

Theone, i tried your coding, and somehow, i get a tiny SUBMIT button with no text on it. Is there something missing in the code?

I feel i am getting a bit closer to what i want.
- I am able to redirect to the same page i would have using the setting in s2Member
- i am able to incorporate the fun buttons i made (Cristian, they are based on the link i gave in another thread about Paypal buttons)
- i am able to add some other features (like the extra ebook mention with registration)
- so i am getting a good FEEL of that look!

but ... i am not getting it to work correctly yet:
- although i know i have the right username and password (because i can do it in the OTHER sidebar login), it does not seem to do anything
Want to have a look at it? If this worked, it would be a great combo with s2Member since i dont want members to navigate too far from the page they are on!

The test site is here: http://digiscrapcampus.com/main
The top "login box" is from the MailChimp code and just some additional buttons, but it does send the member to a separate page (which i am trying to avoid)
The sidebar login plugin is the second on the right side: it does stay on the page, and is very basic, but i am having a problem with the look of it, possibly needing some coding that i dont know of (or there is a conflict with the Headway theme)
The bottom login side bar on the right is from your code, which i edited a bit (it LOOKS great so far, just not working correctly)

[theone]

Theone, i tried your coding, and somehow, i get a tiny SUBMIT button with no text on it. Is there something missing in the code?

On the submit button, do you see how it says....

Code: Select all

value=""

These empty quotations will cause the button NOT to display any text. Add the word submit in these quotes and it will display that. I use a background image instead of text for my button but you can do whatever you want.

You can style each of the form inputs by adding the following which will reference to your CSS file where you can style it accordingly.

Code: Select all

class="submit_button"

Your CSS might then look something like this. So your telling the input to reference the "class" submit_button.

Code: Select all

.sumbit_button {width:200px; height:30px; background:black;text-align:center;font-family:Arial; font-size:12px;color:white}

So this would then be what your submit button code might look like. (Notice how we added class="submit_button").

Code: Select all

<input type="submit" name="wp-submit" id="wp-submit" class="submit_button" value="SUBMIT" tabindex="100" />

Hopefully, that will point you in the right direction.

[theone]

but ... i am not getting it to work correctly yet:
- although i know i have the right username and password (because i can do it in the OTHER sidebar login), it does not seem to do anything
Want to have a look at it? If this worked, it would be a great combo with s2Member since i dont want members to navigate too far from the page they are on!

This code should work (though it might not look right as it needs to be styled). Try this code on a test page and see if you lets you login to your site.

I got this code off your site by going to http://digiscrapcampus.com/main/wp-login.php and right-clicking "view source" then I grabbed the form off the page.

Code: Select all

<form name="loginform" id="loginform" action="http://digiscrapcampus.com/main/wp-login.php" method="post">
   <p>
      <label>Username *<br />
      <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>

   </p>
   <p>
      <label>Password *<br />
      <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
   </p>
   <p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
   <p class="submit">

      <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
      <input type="hidden" name="redirect_to" value="http://digiscrapcampus.com/main/wp-admin/" />
      <input type="hidden" name="testcookie" value="1" />
   </p>
</form>


I'd also recommend changing this

Code: Select all

http://digiscrapcampus.com/main/wp-admin/

to this, which will take users to your homepage instead of the Wordpress Dashboard after login.

Code: Select all

http://digiscrapcampus.com/main/

[cassel]

Thanks for the information. The developper just worked on it this morning and i guess he figured it out (faster than me), as it is looking better.
http://digiscrapcampus.com/main
(on the bottom right)

Now, just to figure out how to get the logging out process a bit "nicer" (right now, it asks me to confirm that i want to log out and redirects me to the login screen, while i would prefer to send the user back to the main page).Since HE worked on it, i will direct him to this thread, instead of messing with it myself (one person at the time, unless i use a second test site - yeah!)