Blog

03 Jun 2020

How to Design a Custom WordPress Login Page

Tutorials / 35 Comments

We’ve seemed to have covered a lot of ground with our foundational tutorials, but as we add more features and brand new modules, there’ll be even more awesome tutorials to come. This tutorial will cover how to best design a custom login page for your WordPress website, using Themify’s login module. In fact, check out our custom login module demo now for inspiration.

Login pages are important for WordPress websites, especially for those looking to run membership sites, online stores, or subscription services. A login page allows users to input their credentials in order to access a privileged part of your site and its contents. Login pages also allow users to contribute to your business’ community though posts, comments, and media attachments.

Login Demo

Customizing a WordPress login page is essential in ensuring the continuity of your website’s branding and image. Start creating a custom WordPress login page now with the login module and you’ll be able to customize all of the following:

• Log-in success message
• Redirect to a URL after successful login
• After a failed login: redirect to a URL, redirect to a custom page, or show a message
• Enter custom field labels for: username, password, log in button, forgotten password link, remember me checkbox
• Reset password form options
• Redirect to a URL after reset password is selected
• All of the above, including the container background, and buttons can be styled to your preferred colour, font, size, padding and more!

Let’s get started on how to use Themify's Login module to design a custom login page:

1. To create a new page with a fullwidth setting:

• Go to your site’s WP Admin Dashboard > Pages > Add New
• Enter a page name of your choice, scroll down to the Themify Custom Panel and select: ‘No Sidebar’ + ‘Fullwidth’
• Click ‘Publish’

2. To customize your row in the frontend:

• Select ‘View Page’, to view your page on the frontend
• Turn on the Builder and hover over the purple dot to open your row’s action bar
• Click the row’s gear icon > select ‘Row Options’ > enable ‘Fullwidth’ + ‘Full Height’

To add and customize your sub-row:

• Click the green plus icon on your row and select the 3-column row to add your sub-row
• To open the middle column’s styling panel double click the column or hover over the middle column’s small orange dot to open the action bar, then click the paint brush icon
• To add a white background in the styling panel, click Background > choose white
• To round the corners of your middle column, click Corners > add 15 pixels to all corners
• Click Done

To further style the look of what will be your login form’s container, add a shadow:

• Go to the column’s styling panel, select Shadow > add a 5 pixel Vertical Offset, 18 pixel blur, select a dark purple colour (#55386b) with a transparency of about 50%

3. To add a background image to your row:

• Hover over your row’s purple dot and click the paint brush to open the styling panel
• In the styling panel, select Background > in Background Type select ‘Image’ > for Background Image select and upload a background image
• Select ‘Fullcover’ from the list of Background Mode options
• Click Done

To further style the look of your row’s background image:

• On your row’s styling panel, click Row Overlay, select ‘Gradient’, and add a gradient colour and adjust the transparency to your liking
• We selected a light pink and light orange as our gradient colours with a transparency of about 50%

4. Drop in your logo or other image:

• Drag and drop the image module into your middle column, and upload or select your image file
• From your image module’s Image Style options, select the third icon for Image Center, in the Width enter a value of 100 pixels
• To give it some room, we’ll adjust the margin by opening up the styling panel > Margin > enter 35 pixels to the bottom margin field

5. Drop in the Login Module:

• Drag and drop the login module underneath your logo image, customize the settings to your preference, and style all the elements to your liking
• We’ve left the login module as is except for the submit button’s background colour (#73b2fa)

And that’s it! You’ve successfully created a sleek, minimal, and professional custom login page. If you want to learn how to create a complete site from scratch, Astra blog has a complete guide here.