Skip to main content

How to Let Users Change Their Avatar

Let users upload and crop their own profile picture from the front end.

Requirements

Beaver Builder and Beaver Profile Builder active, plus the free Simple Local Avatars plugin, which the Avatar Edit module stores images through.

1. Install Simple Local Avatars

In your WordPress admin, go to Plugins > Add New, search for "Simple Local Avatars", then install and activate it.

2. Add the Avatar Edit module

Open your account or profile page in Beaver Builder and drag the Avatar Edit module (group Beaver Profile Builder) into a column.

3. Choose the trigger

On the Display Modal On tab, pick what users click to open the upload popup. A common setup: set it to Image Button, connect the image to User Picture (click the + on the photo field), and label the button "Change photo". Users then see their current avatar with a button beneath it.

4. Configure the popup

On the Modal Settings tab, adjust the popup title, screen subtitles, and button labels if the defaults don't fit your site's tone. Under Image Rating, choose whether users pick a content rating, confirm a suitability checkbox, or skip rating entirely with a default you set.

5. Save and test

Save the module and publish. As a logged-in test user: click the trigger, upload an image, crop it, and confirm.

Result

The new avatar appears everywhere the site shows that user's profile picture: comments, author boxes, and any trigger image connected to User Picture. The previous uploaded avatar is removed automatically.