Elementor Auth Plugin

Custom WordPress plugin that provides Login and Registration forms as an Elementor widget.

Requirements

• WordPress 6.8.10
• PHP 8.2.29
• Elementor

Features

Elementor Widget

The plugin provides an Elementor widget with three form modes:

• Login Form
• Registration Form
• Login + Registration with tabs

Login

• Login with username or email
• Password authentication
• Remember Me
• Forgot Password link
• AJAX authentication
• Custom redirect after login
• Inline success and error messages

Registration

• First Name
• Last Name
• Email
• Username
• Password
• Confirm Password
• Username and email uniqueness validation
• Password confirmation validation
• Automatic login after registration
• Subscriber role
• Custom redirect after registration
• AJAX validation

Elementor Settings

The widget provides settings for:

• Form Type
• Redirect URL
• Login and registration tab text
• Form titles
• Field labels
• Button text
• Button colors

Additional Features

• Show / Hide password
• Login by username or email
• Success and error messages
• Responsive layout
• Elementor Style controls
• Translation-ready text domain

Installation

1. Install and activate WordPress 6.8.10.

2. Install and activate Elementor.

3. Upload the elementor-auth-plugin folder to:

   wp-content/plugins/

4. Activate Elementor Auth Plugin from WordPress → Plugins.

5. Create or edit a page with Elementor.

6. Search for the Auth Form widget.

7. Drag the widget onto the page.

8. Select the required form type.

9. Configure the labels, redirect URL and style settings.

Usage

Add the Auth Form widget to an Elementor page.

The widget supports:

• Login only
• Registration only
• Login + Registration

For the Login + Registration mode, users can switch between forms using tabs.

Security

The plugin uses WordPress APIs and security mechanisms including:

• WordPress Nonces
• wp_verify_nonce()
• sanitize_text_field()
• sanitize_email()
• sanitize_user()
• esc_html()
• esc_attr()
• esc_url_raw()
• wp_validate_redirect()
• wp_create_user()
• wp_signon()

No custom SQL queries are used. User creation and authentication are handled through the WordPress API.

Architecture

elementor-auth-plugin/
│
├── ajax/
│   └── class-auth-ajax.php
│
├── assets/
│   ├── auth.js
│   └── auth.css
│
├── classes/
│
├── includes/
│
├── widgets/
│   └── class-auth-widget.php
│
├── languages/
│
├── plugin.php
└── README.md

plugin.php

Main plugin entry point.

Responsible for:

• Loading the AJAX class
• Enqueuing CSS and JavaScript
• Passing the AJAX URL to JavaScript
• Registering the Elementor widget

widgets/

Contains the Elementor widget implementation.

class-auth-widget.php:

• Registers the widget
• Defines Elementor controls
• Renders Login and Registration forms
• Provides Style controls
• Adds WordPress nonces

ajax/

Contains AJAX handlers.

class-auth-ajax.php:

• Handles Login requests
• Handles Registration requests
• Validates input
• Verifies nonces
• Creates users
• Authenticates users
• Returns JSON responses

assets/

Contains frontend assets.

auth.js:

• Sends Login and Registration requests through AJAX
• Displays success and error messages
• Handles Login / Registration tabs
• Handles password visibility

auth.css:

• Form styling
• Responsive layout
• Tabs
• Buttons
• AJAX messages

languages/

Contains translation files for the plugin.

AJAX Flow

User submits form
        ↓
JavaScript intercepts submit
        ↓
AJAX request to admin-ajax.php
        ↓
WordPress AJAX handler
        ↓
Nonce verification
        ↓
Input validation and sanitization
        ↓
WordPress authentication / user creation
        ↓
JSON response
        ↓
Success/error message or redirect

Responsive Design

The plugin is designed to work across:

• Desktop
• Tablet
• Mobile

The layout, form width, password controls and tabs adapt to smaller screen sizes using responsive CSS media queries.

Translation Support

The plugin uses the text domain:

elementor-auth-plugin

Translatable strings are wrapped with WordPress translation functions such as esc_html__().

Translation files are stored in the languages/ directory.

License

This plugin was created as a technical test assignment.