Template Customization Guide

Overview

Attributes User Access uses a WordPress-style template system that lets you completely customize login form structure and layout. Override plugin templates in your theme for full control.

Understanding Template Hierarchy

How Templates Load

WordPress checks for templates in this order: 1. Active Theme Directory (Highest Priority)

/wp-content/themes/your-theme/attributes/front/

2. Child Theme Directory (If using child theme)

/wp-content/themes/your-child-theme/attributes/front/

3. Plugin Default Templates (Fallback)

/wp-content/plugins/attributes-user-access/templates/front/

Available Template Files

Core Form Templates

Template File	Purpose	Location
login-form.php	Main login form	templates/front/forms/
register-form.php	Registration form (Pro)	templates/front/forms/
lost-password-form.php	Password reset request	templates/front/forms/
reset-password-form.php	New password entry	templates/front/forms/
two-factor-form.php	2FA verification (Pro)	templates/front/forms/

Partial Templates

Template File	Purpose	Location
form-header.php	Form header section	templates/front/partials/
form-footer.php	Form footer section	templates/front/partials/
error-messages.php	Error display formatting	templates/front/partials/
success-messages.php	Success message display	templates/front/partials/

Creating Theme Template Overrides

Step-by-Step Process

Step 1: Create Directory Structure

In your theme, create this folder structure:

/wp-content/themes/your-theme/

attributes/

front/

forms/

partials/

Via FTP/File Manager:

• Navigate to your theme folder

• Create folder: attributes

• Inside attributes, create: front

• Inside front, create: forms and partials

Via Terminal (if SSH access):

cd wp-content/themes/your-theme
mkdir -p attributes/front/forms
mkdir -p attributes/front/partials

Step 2: Copy Template File

Copy the template you want to customize:

From:

/wp-content/plugins/attributes-user-access/templates/front/forms/login-form.php

To:

/wp-content/themes/your-theme/attributes/front/forms/login-form.php

Step 3: Edit Your Template

• Open the copied file in a code editor

• Make your customizations

• Save the file

• Upload if editing remotely

Step 4: Clear Cache and Test

• Clear all caching:

– Browser cache (Ctrl+F5)

– WordPress cache plugins

– Server cache (if applicable)

• View your login page

• Verify changes appear

• Test form functionality thoroughly

Template Customization Examples

Example 1: Add Logo to Login Form

Edit: login-form.php <strong>Add before form:</strong> <pre><code class="language-php"> <div class="login-logo"> <img src="/%3C?php%20echo%20get_stylesheet_directory_uri();%20?%3E/images/logo.png" alt="<?php bloginfo('name'); ?>"> </div> <div class="attributes-login-form"> <!-- Existing form code --> </div> Add CSS:

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo img {
    max-width: 200px;
    height: auto;
}

Example 2: Custom Field Labels

Edit: login-form.php <strong>Find:</strong> <pre><code class="language-php"> <label for="user_login"><?php _e('Username or Email', 'attributes-user-access'); ?></label> Change to:

<label for="user_login">Your Email Address</label>

And:

<label for="user_pass"><?php _e('Password', 'attributes-user-access'); ?></label>

Change to:

<label for="user_pass">Your Account Password</label>

Example 3: Add Help Text

Edit: login-form.php <strong>After password field:</strong> <pre><code class="language-php"> <p class="login-help-text"> First time logging in? Check your email for temporary password. </p> CSS:

.login-help-text {
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-top: -10px;
    margin-bottom: 15px;
}

Example 4: Social Login Buttons

Edit: login-form.php <strong>After the main form:</strong> <pre><code class="language-php"> <div class="social-login-separator"> <span>Or login with</span> </div> <div class="social-login-buttons"> <a href="/" class="social-btn google-btn"> <img src="/path/to/google-icon.png" alt="Google"> Login with Google </a> <a href="/" class="social-btn facebook-btn"> <img src="/path/to/facebook-icon.png" alt="Facebook"> Login with Facebook </a> </div> CSS:

.social-login-separator {
    text-align: center;
    margin: 30px 0 20px;
    position: relative;
}

.social-login-separator:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    z-index: 1;
}

.social-login-separator span {
    background: white;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    color: #666;
}

.social-login-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 4px;
    text-decoration: none;
    color: white;
    font-weight: 500;
}

.google-btn {
    background-color: #db4437;
}

.facebook-btn {
    background-color: #4267B2;
}

Example 5: Two-Column Layout

Edit: login-form.php <strong>Wrap form in columns:</strong> <pre><code class="language-php"> <div class="login-page-container"> <div class="login-left-column"> <h2>Welcome Back</h2> Login to access your dashboard and manage your account. <div class="login-features"> <div class="feature"> <span class="icon">✓</span> <span>Secure Access</span> </div> <div class="feature"> <span class="icon">✓</span> <span>24/7 Support</span> </div> <div class="feature"> <span class="icon">✓</span> <span>Member Benefits</span> </div> </div> </div> <div class="login-right-column"> <div class="attributes-login-form"> <!-- Existing form code --> </div> </div> </div> CSS:

.login-page-container {
    display: flex;
    max-width: 1000px;
    margin: 50px auto;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.login-left-column {
    flex: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 40px;
}

.login-left-column h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.login-features {
    margin-top: 40px;
}

.login-features .feature {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 16px;
}

.login-features .icon {
    font-size: 24px;
}

.login-right-column {
    flex: 1;
    background: white;
    padding: 60px 40px;
}

@media (max-width: 768px) {
    .login-page-container {
        flex-direction: column;
    }
}

Using PHP Hooks in Templates

Available Hooks

Before Login Form:

do_action('attrua_before_login_form');

After Login Form:

do_action('attrua_after_login_form');

Adding Custom Content via Hooks

In your theme’s functions.php:

// Add welcome message before login form
add_action('attrua_before_login_form', 'my_custom_login_header');
function my_custom_login_header() {
    ?>
    <div class="custom-login-header">

<h2>Welcome to <?php bloginfo('name'); ?></h2>
        Please login to continue
    </div>
    <?php }

// Add support links after login form
add_action('attrua_after_login_form', 'my_custom_login_footer');
function my_custom_login_footer() {
    ?>
    <div class="custom-login-footer">
        Need help? <a href="/support/">Contact Support</a>
    </div>
    <?php <p>}

Mobile Responsive Templates

Best Practices

1. Use Flexible Layouts:

.attributes-login-form {
    max-width: 400px;
    width: 100%;
    padding: 20px;
}

2. Stack Columns on Mobile:

@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
    }
}

3. Touch-Friendly Buttons:

.attributes-login-form input[type="submit"] {
    padding: 15px; /<em> Minimum 44px touch target </em>/
    font-size: 16px; /<em> Prevents zoom on iOS </em>/
}

4. Mobile Font Sizes:

@media (max-width: 768px) {
    .attributes-login-form input {
        font-size: 16px; /<em> Prevents auto-zoom </em>/
    }
}

Testing Your Templates

• Visual test: Check appearance on login page
• Functional test: Submit form and verify login works
• Error test: Enter wrong password, check error display
• Mobile test: Test on phone and tablet
• Browser test: Check Chrome, Firefox, Safari, Edge
• Cache test: Clear all caches and retest

Troubleshooting

Template Changes Not Showing

Form Broken After Customization

Template in Wrong Location

Pro Tips