WordPress Challenge #3 - Login Page

Welcome to the WordPress Challenge #3.

In this challenge, we will focus on enhancing the login experience.

See these challenges as exercises.

Hopefully, we’ll get subscribers who’ll send back their solutions and thus, if anyone is stuck, they’ll be able to learn from the provided solutions.

If none are sent, I’ll provide my own solutions to such in the upcoming month.

Junior Challenge: Customize the default login form

Points: 1

Task:

Customize the default login form that you get with WordPress with more fields and a different style.

Requirements:

1. Create a plugin for the customization,

2. Use hooks to enqueue styles conditionally on the login page

3. Use the hooks to add a new field: Reverse username

4. Before logging the user, check if the reverse username field is entered and check if it’s correctly entered

5. If not, display a message that such field is not correct

Starting Tips:

1. Codex: https://codex.wordpress.org/Customizing_the_Login_Form

2. wp-login.php to check available hooks on the login form. Starts here: https://core.trac.wordpress.org/browser/tags/6.5/src/wp-login.php#L1274

Medior Challenge: Create a Custom Login Page

Points: 2

Task:

Create a custom login template

Requirements:

1. Plugin to have the template file

2. Create a settings field under WordPress Settings > Reading or Permalinks submenu. A dropdown of all current pages. Store the page ID.

3. Use the hook template_include to show your template file on that selected page

4. Create your own validation functions for errors and display errors under each field

5. Use WordPress core functions for logging the user

Starting Tips:

1. Hook: template_include - https://developer.wordpress.org/reference/hooks/template_include/

2. Custom Login page tips from Codex: https://codex.wordpress.org/Customizing_the_Login_Form

3. Adding custom fields on Settings pages: https://mehdinazari.com/add-settings-field-wordpress/

Senior Challenge: Google Login

Points: 3

Task:

Use hooks from the previous 2 tasks, custom and/or the default login page.

Requirements:

1. Add a “Login with Google” button

2. Login the user with the email from Google if it exists

3. Create a new user with the Google account info if it doesn’t exist & log it

4. Once logged-in, if the ‘redirect’ parameter exists in the posted fields, redirect the user there

Starting Tips:

1. Check the plugin: https://wordpress.org/plugins/login-with-google/ for code help

Happy Coding!