Allowing users to upload profile pictures or avatars to their profile on your website is an important functionality. Even if you’re not running a membership website but allow user registrations, you must make sure that they are able to upload profile pictures.
Don’t you just love how the user below has a profile picture? Here’s how to create a frontend user profile page.
Let us explain in detail how to allow your users to upload a profile picture to their profile on your WordPress website.
Profile and Cover Image Settings
Before you jump into creating and customizing a functionality for your users to upload profile pictures, you may want to check out the profile and cover image settings. You can customize these settings the way you want, depending on your user preferences and other factors.
Click on the ProfilePress menu on your WordPress dashboard. Next, click on the Profile & Cover Photo tab.
You can set the maximum file size, upload file size, as well as height and width for both the cover photo and profile picture. For changing the maximum file size, you simply need to put the max file size you want in the field. By default, the max file size is set to 1024000 KB, or 1 GB, for both the cover photo and profile picture.
However, this is different from the max upload file size, which you can choose by dragging the slider below the file size field. This should be the max upload file size allowed by your website’s hosting server.
Now, if you want the profile pictures uploaded on your website to have a specific size dimension, click on the Resize avatars on the upload checkbox.
This not only allows you to choose a specific width and height but also crop the uploaded pictures to these exact dimensions if you want.
Now, as you scroll down the page, you will also find the settings to help you control the use of Gravatar profile pictures by your users.
You can choose to entirely disable the use of the Gravatar profile picture by ticking the checkbox you see at the top in the above image. The next set of options allow you to choose a generic profile picture for users who do not upload a profile picture themselves and also do not have a Gravatar profile linked to the email they used to sign up on your website.
Once you’re done choosing the settings you want, click on the Save Changes button at the bottom of the page.
How to Allow Users to Upload a Profile Picture
ProfilePress comes with built-in functionality to let registered users on your WordPress website manage their profile, including the ability to upload a profile picture.
All they need to do is log in to the WordPress dashboard on your site using their login credentials and they will be able to access all the customization options related to their profile on the default profile page.
They will also find the option to upload/update a profile and cover image as they scroll down the page.
Allowing Users to Upload a Profile Picture from the Frontend
While the ability to upload a profile picture using the backend works just fine and is also very easy like we explained above, but you can also allow users to upload a profile picture from the frontend. This can not only be an essential functionality for WordPress websites where access to the WordPress dashboard of the website is completely blocked, but also a good feature in general as it adds to the overall user experience for your users.
To enable this functionality, you need to create a post or a page with the profile picture uploader shortcode provided by ProfilePress. You can find the shortcodes on the same settings page for the profile and cover picture page that we discussed above.
The [avatar_upload] shortcode would allow you to create the functionality for your users to upload their profile picture right from the frontend of your website. You can just create a new page with this shortcode, and your users would be able to upload their profile picture from that page.
The users would just need to click on the Choose Image button, select an image saved on their computer, and then click on the Update Profile button.
In addition to creating a new post or page, you can also add the functionality to upload a profile picture right on your sidebar.
You just need to create a widget with the same shortcode we used above and add it as a sidebar. Let us break this down in a few easy steps below.
- Click on the Widgets option under the Appearance menu
- Click on the “+” icon under the Sidebar section to create a new sidebar element
- Scroll down until you find the Shortcode option under Widgets
- Paste the [avatar_upload] shortcode
- Click on the Update button at the top
When you finish performing the steps listed above, you will see the option to update a profile picture in the sidebar of your website. Just like what you see below.
Displaying User Profile Pictures
ProfilePress also lets you display user profile pictures in a couple of simple steps. As you could see in the image we posted above, you just need to use the other avatar shortcode to create this functionality on your WordPress website.
Just like the ability to upload a profile picture, you can also create the ability to display user profile pictures anywhere on your website, be it a post, page, sidebar, widget, or any other area of your website.
You need to simply copy the shortcode and paste it where you want to display the user profile pictures. We just did this in a post and here’s what we got.
When a user doesn’t have a profile picture uploaded, you will see a generic logo like the one you see above in our case.
Allowing users to upload profile pictures and even a cover photo is surprisingly easy with ProfilePress. In addition, you can also just as easily display the user profile pictures.
And you can add these functionalities anywhere you want on your website. Furthermore, you also have full control over all the settings and can use a lot of customizations.