{"id":23189,"date":"2015-01-28T18:01:31","date_gmt":"2015-01-28T10:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23189"},"modified":"2025-04-04T02:02:21","modified_gmt":"2025-04-03T18:02:21","slug":"wordpress-gravatar-image-url","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/","title":{"rendered":"How to Retrieve Your Gravatar Image URL"},"content":{"rendered":"

Having a profile picture also known as \u201cavatar image\u201d is pretty essential online. We upload our best profile picture on websites and social sites for legitimacy, credibility and for people to better recognize our online presence.<\/p>\n

WordPress has its own service to deliver user profile pictures, and it is called Gravatar<\/a>. We can also incorporate this into our own customized themes. This post will walk you through a couple of approaches on how you can retrieve the profile image from Gravatar.<\/p>\n

Using Gravatar<\/h2>\n

Let\u2019s start from the basics. WordPress has a special integrated function, get_avatar<\/code>, which allows us to retrieve the gravatar image. This function requires two parameters: the user ID or email, and the size of the image to display. Here is an example.<\/p>\n

\r\n$user_id = get_the_author_meta('ID');\r\necho get_avatar($user_id, 80);\r\n<\/pre>\n
If you prefer using a user email, fill the get_the_author_meta()<\/code> function with user_email<\/code>:<\/p>\n
\r\n$user_id = get_the_author_meta('user_email');\r\necho get_avatar($user_id, 80);\r\n<\/pre>\n
Both examples will output the same result: a user avatar image with the size of 80px<\/code>. In my case, I will see my picture.<\/p>\n
\"The<\/figure>\n
Yet, the problem that I once encounter with this function is that the function generates the whole image; a full <img><\/code> tag. Inspect the code source, and you should find it as follows:<\/p>\n
\"\"<\/figure>\n
This makes things a little bit tricky for us, for example, to insert additional classes or an ID into the <img><\/code>.<\/p>\n
Alternatively, we can retrieve only the image URL, instead of the <img><\/code> element in full. Once we got the URL, we can add it to the <img><\/code> with the custom classes or ID added.<\/p>\n
How To Retrieve The Image URL<\/h2>\n
First, we will need to create a new PHP function in functions.php<\/b> of the WordPress theme you are using. Let\u2019s name the function as follows:<\/p>\n
\r\nfunction get_avatar_img_url {\r\n\t\r\n}\r\n<\/pre>\n
Retrieving the Gravatar image requires the user email; make sure that the email has been registered in Gravatar in order to see the output. Call the author user email, like so.<\/p>\n
\r\nfunction get_avatar_img_url {\r\n\t$user_email = get_the_author_meta( 'user_email' );\t\r\n}\r\n<\/pre>\n
The Gravatar image URL is specified with http:\/\/gravatar.com\/avatar\/<\/code> and followed by md5 hash<\/b> (encoded value) of the email address. To return the email addrress into an \u201cmd5 hash\u201d value, we can use the PHP built-in function, md5()<\/code>. Hence we set out the Gravatar image URL this way:<\/p>\n
\r\nfunction get_avatar_img_url {\r\n\t$user_email = get_the_author_meta( 'user_email' );\t\r\n\t$url = 'http:\/\/gravatar.com\/avatar\/' . md5( $user_email );\r\n}\r\n<\/pre>\n
Next we need to include a couple of required parameters into the URL which are the image size and the default fallback image if the image is not registered in Gravatar. To do so, we will use a WordPress function called add_query_arg<\/a>.<\/p>\n
\r\nfunction get_avatar_img_url() {\r\n\t$user_email = get_the_author_meta( 'user_email' );\r\n\r\n\t$url = 'http:\/\/gravatar.com\/avatar\/' . md5( $user_email );\r\n\t$url = add_query_arg( array(\r\n\t\t's' => 80,\r\n\t\t'd' => 'mm',\r\n\t), $url );\r\n\treturn esc_url_raw( $url );\r\n}\r\n<\/pre>\n
This add_query_arg<\/code> function will add parameters at the end of the URL. In our case, it will output ?s=80&d=mm<\/code> which sets the image size to 80pixels and sets the default avatar to mm<\/code> (Mystery Man<\/a>).<\/p>\n
Now just use the PHP echo<\/code> to output the URL within the <img><\/code> element, like so:<\/p>\n
\r\n$avatar_url = get_avatar_img_url();\r\necho '<img src=\" ' . $avatar_url . ' \">';\r\n<\/pre>","protected":false},"excerpt":{"rendered":"
Having a profile picture also known as \u201cavatar image\u201d is pretty essential online. We upload our best profile picture on websites and social sites for legitimacy, credibility and for people to better recognize our online presence. WordPress has its own service to deliver user profile pictures, and it is called Gravatar. We can also incorporate…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[4663],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Retrieve Your Gravatar Image URL - Hongkiat<\/title>\n<meta name=\"description\" content=\"Having a profile picture also known as "avatar image" is pretty essential online. We upload our best profile picture on websites and social sites for\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Retrieve Your Gravatar Image URL\" \/>\n<meta property=\"og:description\" content=\"Having a profile picture also known as "avatar image" is pretty essential online. We upload our best profile picture on websites and social sites for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-28T10:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:02:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-gravatar-image-url\/gravatar-output.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Retrieve Your Gravatar Image URL\",\"datePublished\":\"2015-01-28T10:01:31+00:00\",\"dateModified\":\"2025-04-03T18:02:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/\"},\"wordCount\":449,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-gravatar-image-url\\\/gravatar-output.jpg\",\"keywords\":[\"ad-divi\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/\",\"name\":\"How to Retrieve Your Gravatar Image URL - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-gravatar-image-url\\\/gravatar-output.jpg\",\"datePublished\":\"2015-01-28T10:01:31+00:00\",\"dateModified\":\"2025-04-03T18:02:21+00:00\",\"description\":\"Having a profile picture also known as \\\"avatar image\\\" is pretty essential online. We upload our best profile picture on websites and social sites for\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-gravatar-image-url\\\/gravatar-output.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-gravatar-image-url\\\/gravatar-output.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-gravatar-image-url\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Retrieve Your Gravatar Image URL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Retrieve Your Gravatar Image URL - Hongkiat","description":"Having a profile picture also known as \"avatar image\" is pretty essential online. We upload our best profile picture on websites and social sites for","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/","og_locale":"en_US","og_type":"article","og_title":"How to Retrieve Your Gravatar Image URL","og_description":"Having a profile picture also known as \"avatar image\" is pretty essential online. We upload our best profile picture on websites and social sites for","og_url":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-01-28T10:01:31+00:00","article_modified_time":"2025-04-03T18:02:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-gravatar-image-url\/gravatar-output.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Retrieve Your Gravatar Image URL","datePublished":"2015-01-28T10:01:31+00:00","dateModified":"2025-04-03T18:02:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/"},"wordCount":449,"commentCount":12,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-gravatar-image-url\/gravatar-output.jpg","keywords":["ad-divi"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/","url":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/","name":"How to Retrieve Your Gravatar Image URL - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-gravatar-image-url\/gravatar-output.jpg","datePublished":"2015-01-28T10:01:31+00:00","dateModified":"2025-04-03T18:02:21+00:00","description":"Having a profile picture also known as \"avatar image\" is pretty essential online. We upload our best profile picture on websites and social sites for","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-gravatar-image-url\/gravatar-output.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-gravatar-image-url\/gravatar-output.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-gravatar-image-url\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Retrieve Your Gravatar Image URL"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-621","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23189"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23189\/revisions"}],"predecessor-version":[{"id":73725,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23189\/revisions\/73725"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23189"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}