Thursday, November 21, 2024
HomeWordPress TutorialsWordPress Profile Picture Without Gravatar (+ Add It to Posts)

WordPress Profile Picture Without Gravatar (+ Add It to Posts)


Luckily, there’s a fairly easy way to sidestep this, and in this tutorial I’m going to show you how. Afterwards, I’ll demonstrate how you can add your new avatar picture to your posts in two different ways (depending on the type of theme you’re using). Let’s get started.

Easy way to set your WordPress avatar without Gravatar

As is often the case with WordPress workarounds, the fastest way to get from point A to point B is by using a plugin. In this case, that plugin is called Basic User Avatars:

First, install the plugin via the WordPress dashboard like you would any other plugin:

  1. Go to PluginsAdd New Plugin.
  2. Then search for “basic user avatars.”
  3. Once it populates, click on InstallActivate.

Afterwards, using the same WordPress dashboard menu, find Users and click on All Users. Locate your user profile on the list and tap on Edit:

Next, scroll all the way to the bottom of your user profile until you see the Upload Avatar section. Then click on Choose File. This will open up the usual popup window that’s linked to your hard drive. Find the photo you’d like to use for your avatar and upload it.

Uploading avatar image file from the user profile.

Extra: What size and dimensions should my avatar image be? 🤔

Here are some guidelines to help you upload a good avatar photo:

  • Aspect ratio: Most avatar images are displayed as circles, but they are typically uploaded as squares. A 1:1 aspect ratio (where the width and height are equal) is ideal.
  • Size: A common recommendation is to use an image that is at least 96×96 pixels. This size ensures that the avatar looks good on most devices and scales well. However, for even better quality on high-resolution displays (like Retina displays), consider using a larger image, such as 192×192 pixels or 256×256 pixels. These sizes can be scaled down as needed without losing clarity.
  • File size: While the dimension of the avatar is important, keeping the file size reasonably small (ideally under 100 KB) helps ensure that pages load quickly, especially on mobile devices or slower internet connections.

Once you’ve done so, the part that says No file chosen (next to Choose File) will change to whatever the file name of your photo is:

Showing file name of selected avatar image.

Click the Update User button at the very bottom of the page and the blank placeholder will change to your image:

Showing the uploaded avatar image.

You’ll notice that it will also update the placeholder image in the Profile Picture section, which is where the Gravatar link would be if you weren’t using the Basic User Avatars plugin.

Not too bad, right?

How to add your new avatar image to posts

Now that you have your avatar picture all set up, you’re probably wondering how you can add it to your posts.

Unfortunately, this is one of those scenarios where the answer is “it depends.”

To be specific, it depends on the theme you are using. This is because the theme is going to control how you can customize your page layout, which includes where and how you can add author information.

To help get you moving in the right direction, I will show you how to do it in Neve, using the WordPress Customizer. Afterwards, I will give you a rundown of how to do it using Neve FSE, using the full site editor (FSE).

The rationale behind this is that Neve is a classic WordPress theme, while Neve FSE is a newer block theme. Classic themes and block themes function a bit differently from each other. By showing you an example of each, you should be able to figure it out even if you’re using a different classic theme or block theme.

How do I know if I’m using a classic theme or a block theme? 🤔

To check whether you are using a classic theme or a block theme, go to Appearance in the WordPress dashboard. If you see an option for Editor, then you are using a block theme. If not, you’re on a classic theme.

Showing what a block theme looks like in the WordPress dashboard.
“Editor” = you are using a block theme.

Example of how to do it using a classic theme

To begin, from the WordPress dashboard, go to AppearanceCustomize.

Next, click on Layout:

Click on Layout in the WordPress Customizer.

Then tap Single Post:

Click on Single Post in the WordPress Customizer.

This will bring you into the area where the magic happens.

Scroll down until you see POST META. Then look for the section that says Author. Tap on the eyeball to make it visible. Below that you will see a toggle option that says Show Author Avatar. Make sure it’s on.

Toggling the settings in the Customizer to display the author avatar and to adjust the size of the photo scaled

Just underneath that, you’ll be able to adjust the size of the avatar image. In the example above, I made mine 50 pixels. Note that you can also customize the size on tablet and mobile devices separately.

When everything looks the way you like, click the Publish button at the top of the lefthand side menu. You can then check any posts that you are the author on and you should see your new avatar profile picture there:

Checking the avatar profile picture on the front end.

Example of how to do it using a block theme

From the WordPress dashboard, go to AppearanceEditor. This will bring you into the full site editor (FSE). Click on Templates:

Showing the navigation menu inside Neve FSE.

Select Single Posts. Then tap the three little dots to the right of it and choose Edit:

Showing the Single Posts template in FSE.

Here’s where things might seem intuitive at first, but are actually a bit tricky. So pay close attention.

There is an Author block you can add to the template. This block will show the display name of the author assigned to the post. That Author block also happens to have a toggle that says Show avatar. If you’re thinking “perfect, let’s turn it on,” I wouldn’t blame you. It seems like the logical next step to take. But alas, it is not.

Showing the Author block and the Show avatar toggle in the full site editor.

As of the time of this writing, there appears to be a strange bug with the feature, which causes an extreme gap between the author name and the avatar profile photo when viewed on the frontend.

But there’s no need to worry. You can still make it work by using a separate Avatar block:

Finding the avatar block in the full site editor.

Once you add it to where you want it to go, you need to assign your user profile to it. You can do that on the righthand side menu, where you’ll also find the option to adjust the size of the image:

Assigning user profile to avatar block and adjusting size of avatar image.

When you are ready, click Save on the top right and check one of your posts to make sure everything looks good:

Checking the frontend of the site to see how the avatar profile picture looks.

Final thoughts

In the grand scheme of things, being coerced into using Gravatar to change your avatar user photo is a relatively minor issue. Nonetheless, it can feel annoying. At least I happen to think so. I’m assuming that if you’ve read this far then you agree with me. But, if you have read this far, then you now have a quick and simple workaround: the Basic User Avatars plugin.

Do you have any questions about what I covered here? Let me know in the comments below. I’ll be glad to help you if I can.



Source link

RELATED ARTICLES
Continue to the category

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Most Popular

Recent Comments