📌 What You’ll Learn
- How to create a custom login page using the built-in page creator
- How to use the login form shortcode manually
- How to customize login page styling and layout
- How to test your custom login page
✅ Before You Begin
- Attributes User Access plugin installed and activated
- Basic understanding of WordPress pages
- Access to WordPress page editor
Why Use Custom Login Pages?
Custom login pages offer several advantages:
- Branding: Match your site’s look and feel
- User Experience: Seamless integration
- Security: Hide standard WordPress login URL
- Flexibility: Add custom content or instructions
Method 1: Automatic Page Creator
Step 1: Access Login Settings
- Go to User Access → Login Settings
- Click “Create Login Page”
Step 2: Configure Page
- Page Title: “Member Login” or “Sign In”
- Page Slug: “login” or “member-login”
- Template: Choose from theme options
Step 3: Create and Publish
- Click “Create Page”
- Login form shortcode added automatically
- Page published and ready
Method 2: Manual Shortcode
Add login form to any page:
With custom parameters:
Available Parameters
| Parameter | Description | Default |
|---|---|---|
redirect |
Post-login redirect URL | Dashboard |
remember |
Show “Remember Me” | true |
form_id |
Custom form ID | attributes_login_form |
Customizing Your Login Page
Adding Custom CSS
/* Login Form Container */
.attributes-form-wrapper {
max-width: 400px;
margin: 50px auto;
padding: 30px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Input Fields */
.attributes-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 15px;
}
/* Submit Button */
.attributes-submit {
width: 100%;
padding: 12px;
background: #0073aa;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.attributes-submit:hover {
background: #005177;
}Adding Your Logo
- Edit your login page
- Add Image block above shortcode
- Upload and center your logo
- Adjust size as needed
Setting as Default Login
- Go to User Access → Login Settings
- Enable “Redirect wp-login.php”
- Select your custom page
- Save changes
⚠️ Important: Test login before enabling redirection!
Testing Checklist
- ✅ Form displays correctly
- ✅ Login works with valid credentials
- ✅ Failed login shows errors
- ✅ Redirect works properly
- ✅ Mobile display looks good
Need Help?
- 📖 Documentation
- 💬 Forum