Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Adding a Blog to a WordPress Theme Coding the Blog Homepage

Rob Stinson
Rob Stinson
1,406 Points
Posted by Rob Stinson
Rob Stinson
1,406 Points

How did you achieve the circle styling of your avatar?

I'm following along with the tutorial using my own HTML and CSS template. All ok so far. I want to achieve a round avatar, which is simple enough by applying a css class to an <img> tag, yet I can't seem to find away to access the output <img> of the get_avatar function to apply the custom css class. I tried wrapping it in a <span>, as you have done and applying the class there, but no luck. I was wondering how you achieved it?

1 Answer

Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Hi Rob,

get_avatar() simply outputs an image element (http://codex.wordpress.org/Function_Reference/get_avatar)

<img alt="" src="http://0.gravatar.com/avatar/0d6a758a8b9cb117c5cfcc7bab655a1d?s=96&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D96&amp;r=G" class="avatar avatar-96 photo" height="96" width="96">

with 3 default css classes

class="avatar avatar-96 photo"

So you can now hook into one of these classes and do whatever you need :)

.avatar {
   border-radius: 50%;
}

OR

.avatar-96 { // this will change according to img size you specified with get_avatar('mail@example.com', 96) second parameter.
   border-radius: 50%;
}

OR

.photo {
   border-radius: 50%;
}
Rob Stinson
Rob Stinson
1,406 Points
Rob Stinson
Rob Stinson
1,406 Points

Muhammad Mohsen

Legend! I knew it was going to be something simple.

Cheers