How to Create a Nice Login Page

David Bullock — 

The standard WordPress login page isn’t terribly attractive, or compatible with theme and brand design. It’s not uncommon to want to improve the login experience.

Creating a New Login Page

Memberium provides a way to generate standard WordPress login forms on your site on any page you wish. It’s important to note that these are created by WordPress, and aren’t custom Memberium forms so they behave identically to WordPress’s normal behavior. You can use the following shortcode to insert the login form exactly where you want it:

Testing the Login Form

The login form doesn’t normally display unless you’re logged outA common mistake new admins make is to add the shortcode, and then immediately view the page while logged in as admin and wonder why it’s not showing up.

The best way to test your site as you’re building it is to open a 2nd browser and use that to see how your page looks to your visitors. For example if your primary browser is Chrome, then opening Firefox, Safari or Opera would be a great alternative. If your browser supports “Incognito Mode”, that’s a great option as well.

Why doesn’t it display if they’re logged in?

When site visitors see a login form, their immediate assumption is that they are not logged in. Having the login form automatically hide itself removes that false visual cue to your users who are already logged in. You can override this behavior but we don’t recommend it.

Ewww, My Login Form is UGLY!

When WordPress outputs the login form, it’s unstyled form, meaning that it only is the simple functionality without colors, design or branding. What often happens is that your theme has it’s own styles and those may apply to your form in an unflattering way. You can verify this by changing your theme and watching how your login form appearance changes to match as well. This is outside of Memberium’s control.

A common mistake is for people to copy/paste the [memb_loginform] shortcode and accidentally surround it with <pre> tags which throw off the styling as well. Make sure that you haven’t done this.

The solution here is to use some CSS to apply your own styling to the form. It’s beyond what we can do in a simple guide to teach you how to solve this for every theme since they’re all different, but we can go over the concepts so that you can hire someone from Fiverr or have a VA who knows CSS help you with this.

Basic CSS Concepts

CSS works with your HTML. HTML is the structure or “skeleton” of your page, while CSS provides the look of it. You can think of CSS as like a skin.

CSS Styles are the codes that define how your HTML tags look. Here’s some example CSS that makes your paragraph text color black:

CSS Styles can be applied to your HTML using “ID’s”, or “Classes”.

CSS ID’s are a way to pick a single tag on the page and apply the CSS to that tag.

CSS Classes are a way to pick a multiple tags on the page and apply the CSS to any of those matching tags.

Applying CSS to Login Forms

When WordPress generates the login form, the parent form has a unique CSS ID, which can be used to apply CSS not only to the form itself, but to the inputs inside the form. The CSS ID’s for your form will be unique to your page. Here’s an example form, your CSS ID’s will vary:

You can target your CSS to these individual pieces by using CSS Classes and ID’s. For example to change the appearance of the submit button you would use the CSS ID for “wp-submit”.

CSS ID’s Used by the WordPress Login Form

  • loginform
  • user_login
  • user_pass
  • rememberme
  • wp-submit

CSS Classes Used by the WordPress Login Form

  • input
  • login-submit
  • button-primary

Changing Login Form Behavior

The [memb_loginform] shortcode has several parameters you can use to control it’s behavior, including whether or not it’s hidden to logged in users. Please view our documentation page for [memb_loginform] here.