Our "widget" for The Lodge in the sidebar of the site (shows on most pages, including homepage) has two states. One for when a user is logged out and one when a user is logged in. The logged out state has a login form right on it so current members have an easy way to jump in.

We used to be using the built in function wp_login_form(), which is pretty cool for WordPress to provide, but we want to snag some control over the markup. This will allow us to add classes and whatnot to style it how we want.

There are a number of situations, though, in which our custom login form won't work and we'll need to use the default WordPress login view. That is, what you see when you visit /wp-login.php. For instance, if you submit an incorrect password, you'll be redirected to this page. Or if you want to register for the site (without going through Restrict Content Pro), or even reset your password, you'll do this through this /wp-login.php page. So I think it would be best if we style this page up so it feels, you know, like a professional operation rather than just "some WordPress site." Plus we can use our branding stuff here, namely our snowy cabin.

In order get control, we use a couple of WordPress "hooks" in our functions.php file in order to load up a custom CSS file. That's all we need to snag design control.

We spend the rest of the time utilizing that CSS file to brand up the login page. We make the cabin rather blurry, which is a cool looking effect I think. It kind of says "The cabin is back there! Log in and all will become clear!". As a nice bonus, blurry photos as JPGs can be set to pretty low quality, which is good, because we're using it rather large as a full page background image.


  1. Ulic
    Permalink to comment#

    Why not use text elements for “The Lodge” instead of the image? Just because you didn’t want to tweak more html/php?

    • Chris Coyier
      Permalink to comment#

      The design has the text kind of disappearing behind the trees. That effect could be done I supposed with transparent PNG’s, but then we’re looking at three layers, extra HTTP requests and extra code complication. The way it’s done here looks good and is accessible, so I think it’s the way to go.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.