Building a member site

I am so pleased with the
WordPress System that I decided to base our new Taekwondo Club site on this system as well.

Having said that, I realized there were going to be a few things I needed to change in order to support a large list of members, not necessarily very interested in the intricacies of WordPress or even interested in entering the Admin Interface. What I needed was a club logo login screen and control over where the members were taken after log on.

I realize that the ideal solution would be to build a plug-in handling what I was looking for – but as I am still quite a newcomer to the WordPress world, I just cannot figure out how to work all the action & hooks yet. Maybe someday.

Instead, I have tweaked the official WordPress 1.5.1 installation and fearing the nightmare implications upgrading in the future without written reference, I decided to publish everything here for my own benefit, but I sincerely do hope that some of you might find it useful as well.

>Note that this example is based on WordPress release 1.5.1, it might be very different in future releases.

 

Step 1 – Backup these files

wp-admin/wp-admin.css
wp-login.php

Step 2 – Modify the log in dialog

I needed to have a club like log in facility and wanted to reflect that on the login pages. It turns out that it’s quite easy to replace the WordPress graphics and make the dialog boxes appear somewhat different.

screenshot - new club login dialog

In this example I am going for a much smaller font, less space in the input fields, a smaller submit button and of course my own club logo instead of the WordPress logo.

wp-admin.css

Replace the following block starting at line 370:

    #login {
       background: #fff;
       border: 2px solid #a2a2a2;
       margin: 5em auto;
       padding: 1.5em;
       width: 25em;
    }

with this new block referring to your own logo instead of the one used by default:

    #login {
       background: url(../wp-images/ltk-small.gif) no-repeat;
       border: 2px solid #a2a2a2;
       margin: 5em auto;
       padding: 65px 10px 10px 35px;
       width: 265px;
    }

Now remove the WordPress graphics from the login and password retrieval dialog boxes by deleting these two blocks starting in line 388:

    #login h1 {
       background: url(../wp-images/wp-small.png) no-repeat;
       margin-top: 0;
    }

    #login h1 a {
       display: block;
       text-indent: -1000px;
    }

Now lets get rid of the large font, spacing and let’s slim the submit button.
Change the following chapter (starting line 398) from:

    #login input {
       padding: 3px;
    }

To:

    #login input {
       padding: 1px;
       font-size: 1em;
    }

    #login #submit {
       font-size: 1em;
    }

That’s all the changes I needed to apply in this file. Save and ftp to web server and let’s move on to the wp-login.php file.

wp-login.php

Change the title in line 41 to something else, e.g. from this:

    <title>WordPress » <?php _e('Lost Password') ?></title>

To this:

    <title>LTK » <?php _e('Lost Password') ?></title>

Delete the header in line 60:

    <h1><a href="http://wordpress.org/">WordPress</a></h1>

Change the layout of the password retrieval form (starting line 67) from this:

    <form name="lostpass" action="wp-login.php" method="post" id="lostpass">
    <p>
    <input type="hidden" name="action" value="retrievepassword" />
    <label><?php _e('Username:') ?><br />
    <input type="text" name="user_login" id="user_login" value="" size="20" tabindex="1" /></label></p>
    <p><label><?php _e('E-mail:') ?><br />
    <input type="text" name="email" id="email" value="" size="25" tabindex="2" /></label><br />

    </p>
    <p class="submit"><input type="submit" name="submit" id="submit" value="<?php _e('Retrieve Password'); ?> »" tabindex="3" /></p>
    </form>

To this:

    <form name="lostpass" action="wp-login.php" method="post" id="lostpass">
 
    <input type="hidden" name="action" value="retrievepassword" />
    <table>
    <tr><td width="100px"><?php _e('Username:') ?></td><td><input type="text" name="log" id="user_login" value="" size="25" tabindex="1" /></td></tr>
    <tr><td width="100px"><?php _e('E-mail:') ?></td><td><input type="text" name="email" id="log" value="" size="25" tabindex="2" /></label><br /></td></tr>
    </table>
    <p class="submit">
       <input type="submit" name="submit" id="s117" value="<?php _e('Retrieve Password'); ?> »" tabindex="3" />
    </p>

    </form>

I think that is a better looking lost password box for my needs. Now, repeat that procedure for
the login form (starting line 230).

Delete the header in line 244:

    <h1><a href="http://wordpress.org/">WordPress</a></h1>

And change the code from:

    <form name="loginform" id="loginform" action="wp-login.php" method="post">
    <p><label><?php _e('Username:') ?><br /><input type="text" name="log" id="log" value="" size="20" tabindex="1" /></label></p>
    <p><label><?php _e('Password:') ?><br /> <input type="password" name="pwd" id="pwd" value="" size="20" tabindex="2" /></label></p>

    <p class="submit">
       <input type="submit" name="submit" id="submit" value="<?php _e('Login'); ?> »" tabindex="3" />
       <input type="hidden" name="redirect_to" value="&lt?php echo $redirect_to; ?>" />
    </p>
    </form>

To:

    <form name="loginform" id="loginform" action="wp-login.php" method="post">
    <table>
    <tr><td width="100px"><?php _e('Username:') ?></td><td><input type="text" name="log" id="log" value="" size="25" tabindex="1" /></td></tr>
    <tr><td width="100px"><?php _e('Password:') ?></td>>td><input type="password" name="pwd" id="pwd" value="" size="25" tabindex="2" /></td></trglt;
    </table>
    <p class="submit">
       <input type="submit" name="submit" id="submit" value="<?php _e('Login'); ?> »" tabindex="3" />
       <input type="hidden" name="redirect_to" value="<?php echo $redirect_to; ?>" />
    </p>
    </form>

Remove inline style spec that we already added to the other file. I.e. remove line 215-219,or this block of code:

    <style type="text/css">
    #log, #pwd, #submit {
       font-size: 1.7em;
    }
    </style>
Step 3: Make sure users are taken to the front page I wanted my users to be taken directly to the front page of the member site after login, instead of having to explain the intricacies of the admin interface to each and every one. Fortunately that is an easy additional change. (Except for level 0 members - for some reason they will not be taken there, so I had to upgrade all new members to level 1 for this to work.) Change the redirect parameter in wp-login.php (line 165) from:
 $redirect_to = 'wp-admin/';

To:

    $redirect_to = 'index.php';

That is it. Now save the file, ftp to server and you are ready to do some testing.

This entry was posted in WordPress. Bookmark the permalink.

11 Responses to Building a member site

  1. Torben says:

    This works fine when you upgrade to version 1.5.1.3 – just note that the line numbering have changed slightly

  2. Brance says:

    great mod. thanks. I’ve got one question though. did you, and if so how, mod the admin portion of the site that is shown to level 0 users? I’d like to mod it so that they see different info in the dashboard than I do when I log in as the admin. if you have done this please let me know how/what you did.

    thanks,

    Brance

  3. james flynn says:

    excellent mod – many thanks, saved a lot of time. good karma sent your way.

  4. Roo says:

    Around line 183 there is the code that checks level zero users and usually directs them to ./wp-admin/profile.php — so a simple change (some comments) will send them to the main page.

    if ($user_login && $user_pass) {
    $user = get_userdatabylogin($user_login);
    if ( 0 == $user->user_level )
    $redirect_to = get_settings(‘siteurl’); /* . ‘/wp-admin/profile.php’; level zero users directed to the main page */

  5. Roo says:

    user_level )
    return ”;
    return $string;
    }

    add_filter(‘register’, ‘register_refusal’);

    ?>

  6. David says:

    I ran into this excellent explanation looking for this exact solution. Later I found
    http://carthik.net/blog/vault/2005/05/12/registered-only-plugin-reworked/

    This coupled with you’re ‘mods’ might be just the answer to and easily ‘upgradeable’ wordpress.

  7. monkeypup says:

    YOU ROCK! I’ve been looking for some of these solutions, and I am sooo happy to see them all here.
    Thanks!

  8. Brian says:

    Excellent walkthrough! Thanks for sharing this, and to everybody who commented with additional tips. Just what I have been searching for.

  9. Kate says:

    Brilliant step by step! Just amended my site – now it has that homey feel to the login section. Thanks so much for your incredible tutorial!

    Keep up the good work!

  10. Pingback: Sine Alcedonia » links for 2005-12-15

  11. Pingback: Vidablog | desde México » Personalizar el login de WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>