• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

Using Gravatar To Display Author Photo In WordPress Posts and Comments

Avatar of Noor Mustafa Raza Noor Mustafa Raza August 17, 2023

Image Courtesy: Hostinger.com
FacebookTweetPinLinkedInEmailPrint

Gravatar: Elevating Your Online Presence

Gravatar, an ingenious service developed by Automattic, empowers users to maintain a unified profile image across a wide range of websites and platforms. This article will provide you with updated information, improved content flow, enhanced hierarchy, and an assortment of Gravatar snippets to integrate into your WordPress site.

Table of Contents

  • Gravatar: Elevating Your Online Presence
    • Understanding the Mechanism
    • Avatars within WordPress
    • Expanding Gravatar’s Functionality
      • 1. Basic Gravatar Integration
      • 2. Gravatar with Rounded Corners
      • 3. Gravatar with Custom Size
      • 4. Gravatar Only (No Link)
      • 5. Gravatar of the Post Author
    • Conclusion

Understanding the Mechanism

  1. Begin by creating a Gravatar account using your preferred email address.
  2. Upload your desired image to serve as your profile picture on Gravatar.
  3. Ensure that the email address associated with your WordPress profile matches the one used for your Gravatar account. This synchronization guarantees a seamless connection between the two platforms.

Avatars within WordPress

WordPress offers a variety of Avatar options, including the default Gravatar logo and the recognizable “Mystery Man” image, alongside other alternatives. By navigating to the Discussion Settings in your WordPress dashboard, you can select the desired avatar display. The default Gravatar logo, denoted by a sideways “G,” is one popular option. Remember that these avatars are stored on Gravatar’s servers, saving you from the hassle of hosting them yourself.

Gravatar

Expanding Gravatar’s Functionality

Take advantage of the following code snippets to heighten the functionality and appeal of Gravatar on your WordPress site.

1. Basic Gravatar Integration

Provide visitors with an engaging visual representation of commenters’ profile pictures alongside their comments:

<?php echo get_avatar($comment, 80); ?>

Feel free to adjust the image size (in this example, it is set to 80 pixels) and customize the CSS styles as per your site’s design.

2. Gravatar with Rounded Corners

Add a touch of elegance to your avatars by giving them rounded corners:

<?php
    $avatar = get_avatar($comment, 80);
    $rounded_avatar = preg_replace('/<img(.*?)src=(.*?)alt=(.*?)>/i', '<img$1src=$2alt=$3 style="border-radius: 50%;">', $avatar);
    echo $rounded_avatar;
?>

The CSS property border-radius: 50%; is responsible for the rounded appearance. Adjust the pixel value to achieve the desired effect.

3. Gravatar with Custom Size

Sometimes, you may want to display avatars with a custom size. The following snippet allows you to specify the dimensions:

<?php echo get_avatar($comment, array('size' => 120)); ?>

By providing an array with size as a parameter, you can set the size according to your requirements (in this example, it is set to 120 pixels).

4. Gravatar Only (No Link)

If you prefer displaying the Gravatar image without a link to the user’s profile, use the following snippet:

<?php
    $avatar = get_avatar($comment, 80);
    $no_link_avatar = preg_replace('/<a(.*?)href=(.*?)>/i', '', $avatar);
    echo $no_link_avatar;
?>

This code removes the <a> tag that wraps the Gravatar image, thereby disabling the link to the user’s Gravatar profile.

5. Gravatar of the Post Author

To showcase the Gravatar image of the post author alongside their article, add the following code snippet to your single.php file:

<div class="gravatar">
    <?php echo get_avatar(get_the_author_meta('user_email'), 80); ?>
</div>

Ensure that you adjust the CSS rules to achieve proper alignment and styling.

Conclusion

Gravatar revolutionizes your online presence by allowing you to project a consistent profile image across numerous platforms. By incorporating the information provided in this updated article, configuring Gravatar to suit your preferences, and applying the suggested code snippets, you can seamlessly integrate this powerful service into your WordPress site. Enhance the visual appeal, personalization, and user engagement of your content with Gravatar today.

Related Tags: Author Photo Gravatar

FacebookTweetPinLinkedInEmailPrint

Related Stories

  • Best Twitter Tips and Tutorials for WebSites Marketing

  • How to Boost Facebook likes of your WordPress site

    How to Boost Facebook likes of your WordPress site

  • How to Troubleshoot Slow loading Site and WordPress blog

Avatar of Noor Mustafa Raza

Noor Mustafa Raza

Ex-Editor in chief

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Reader Interactions

Join the Discussion
  1. Avatar of AnkitAnkit says

    April 27, 2018

    Good article you write freely and happily. Great Post

    Reply

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

WordPress as a Twitter-style Blog

visual product designer

Visual Product Designer Review: Does it let customers customize products in real-time?

Recent Topics

  • 27 Top SEO Companies in the World
  • 12 Ways To Monetize Your WordPress Blog
  • Comparing the Best Employee Engagement Software in the Market
  • Stellar Converter for OST Review: Best Tool for OST to PST Conversion
  • How To Use WordPress as an eCommerce Store

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!