Alphabet Avatars

Display attractive letter-based avatars for users without profile pictures. Each user gets their initials on a colorful background, making your site look more polished and helping users identify each other quickly.

Use Cases#

• Replace the boring “mystery person” default avatar with something visually appealing
• Help users quickly identify commenters by their unique avatar colors
• Create a cohesive visual style across comment sections and user lists
• Avoid external Gravatar requests while still having attractive avatars

How It Works#

1. Module intercepts WordPress avatar requests
2. Extracts user initials based on your settings (first+last name, username, etc.)
3. Generates a unique background color for each user
4. Creates an SVG avatar with initials on the colored background
5. Displays the avatar anywhere WordPress shows user images

Where to Find It#

Alphabet avatars appear automatically wherever WordPress displays user avatars:

• Comment sections on the frontend
• Author boxes in posts
• User lists in the admin area
• Admin bar profile area

Settings#

Letter Source Options#

• First + Last Name Initials - Uses first letter of first name + first letter of last name (e.g., “John Smith” → “JS”). Falls back to username if names aren’t set.
• Username - First 2 letters of the username (e.g., “johnsmith” → “JO”)
• Display Name - First 2 letters of the display name (e.g., “John Smith” → “JO”)

Color Modes#

• Random Colors - Each user gets a unique color based on their user ID. Colors are consistent - the same user always gets the same color.
• Custom Color - All avatars use the same background color you choose. Great for brand consistency.

Preview#

When you open the module settings, you’ll see a live preview showing your own avatar with the current settings. Changes appear after you save.

Styling#

Alphabet avatars are generated as inline SVG data URIs, so they inherit size from whatever’s requesting them. The avatars include the CSS class avatar like standard WordPress avatars.

To style all avatars including alphabet avatars:

/* Add a subtle shadow */
.avatar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Adjust size in specific contexts */
.comment-author .avatar {
    width: 48px;
    height: 48px;
}

Color Palette#

When using random colors, the module cycles through 25 carefully chosen colors that look great with white text:

• Teals and greens: #1abc9c, #2ecc71, #16a085, #27ae60, #00b894
• Blues: #3498db, #2980b9, #0984e3, #74b9ff
• Purples: #9b59b6, #8e44ad, #6c5ce7
• Warm colors: #f1c40f, #e67e22, #e74c3c, #f39c12, #d35400, #c0392b, #e17055, #fdcb6e
• Neutrals: #34495e, #2c3e50, #95a5a6, #7f8c8d
• Pink: #fd79a8

Each user ID maps to a specific color based on their ID modulo 25. Colors are consistent — the same user always gets the same color.

FAQ#