Upload profile picture from front-end in WordPress

When creating a custom profile page, you might face the need to allow the user upload a profile picture right from front-end in your WordPress site to improve overall experience on this page.

By default, WordPress uses a per-defined profile picture for all users. Therefore, the only way to change this picture, without installing any 3rd party plugins, is to use a Gravatar service.

However, using this service might not be an ideal solution when building a custom profile page for your users. Simply because it requires to leave your site, and use Gravatar image uploader to set a profile picture.

Alternatively, you can install a 3rd party plugin to change profile picture on your WordPress site but most of these plugins allow to upload user profile image from WordPress dashboard.

Today, I would like to share with you a solution on how to upload a profile picture from front-end in WordPress.

Upload a profile image in front-end without using code

The easiest way allow your users control their profile pictures on your WordPress site is to use a plugin which provides functionality of uploading a custom image.

In this case, you do no need to write any custom code. All heavy work will be done by the plugin.

WP User Profile Avatar

This plugin comes with functionality which allows to use any photos uploaded into Media Library or set image URL as an avatar instead of using Gravatar.

You can freely download WP User Profile Avatar from a WordPress plugins directory.

Install plugin

Alternatively, you can install the plugin using default options in your dashboard.

In WordPress dashboard:

1. Go to Plugins and click Add New to open the Add Plugins screen.
2. Search for the plugin by entering WP User Profile Avatar in the search field located at the top of the page. Note, the searched plugin might not appear first in the list, so you will need to scroll down to find it.
3. Once you locate the plugin, click Install Now within the plugin box.

Activate plugin

To use the plugin on your WordPress site, you need to activate it after installation process. Otherwise, you will not be able to use its functionality on your site.

In WordPress dashboard:

1. Go to Plugins and click Installed Plugins to view your plugins.
2. Find WP User Profile Avatar in a list.
3. Click Activate under the plugin name.

After activation, you can start improving your profile page by adding a profile image uploader.

Note, support for the plugin will not be provided in the comments on this page. If you experience any issues with the plugin, or have plugin specific questions, feel free to use a dedicated support forum for the plugin.

Display profile picture uploader on a page

To demonstrate this plugin in action and teach you how to upload profile picture from front-end, I am going to use Fortune which is one of our WordPress themes for professionals. However, you can use the plugin and its functionality in any theme of your choice.

The beauty of this plugin that it provides a special shortcode — [user_profile_avatar_upload] — allowing you to display a simple form for uploading a profile picture.

And yes, there is no need to add any custom code to your site. However, you may need to add a custom CSS in case you want to make styling changes to the form.

To display profile picture uploader on a page:

1. Create or open existing page in dashboard.
2. Add Shortcode block to the content area. Note, I am using the Block editor for creating content for my page.
3. Insert [user_profile_avatar_upload] to newly added Shortcode block.
4. Publish or update your page.

Now, your page should display a form with options to modify a profile picture of a logged in user.

If you visit this page as an unregistered user then the form will show an error message, stating that you do not have enough privilege to access the page. In order to see the form, you need to login.

Moreover, it is also possible to output the form using PHP.

A WordPress core provides a function called do_shortcode(). With a help of this function, you can output shortcodes in PHP files.

However, it seems like it is not possible to use this profile picture uploader when creating a custom registration form. Since the form is only shown for already registered users.