Avatars for WordPress 2.5.1 and Fjords theme
by luc • 25 June, 2008 • Tech • 0 Comments
I recently volunteered to assist in the migration of a wordpress.com hosted blog to a self-hosted installation of the open source wordpress CMS. As far as the technical aspects were concerned all went pretty smooth. The challenge appeared to be to make the self-hosted site look exactly like the wordpress.com hosted blog.
WordPress.com uses a slightly modified version of the publicly available wordpress platform. Moreover wordpress.com also uses a slightly modified version of the Fjords04 theme, the theme the site was using, which needed to be ported exactly as-was. The differences were in the use of avatars. (1) Although wordpress as per version 2.5 has support for avatars built-in, the Fjords theme doesn’t support them. (2) Another difference was in the option that wordpress.com offers to select a default avatar when the user doesn’t have a registered gravatar from gravatar.com. (3) Finally a third nice touch in wordpress.com and not available in the public domain wordpress software, is the use of avatars in the Recent Comments.
After fiddling for more than a day with a number of wordpress plug-ins — each of which took care of 1 aspect of our challenge, but combined seemed to interfere with each other and not co-operate well with the built-in avatar functions of wordpress 2.5 — I found a posting in a forum by Jan Dembowski, pointing to a wordpress.com repository for their modified themes. That was the start. From there I discovered the availability of the bleeding edge version of the upcoming wordpress 2.6, which has the functionality under (2) built-in. After studying the differences between the wordpress.com version of the Fjords theme and the publicly available version of the same theme, and the differences between version 2.5.1 and 2.6 or the wordpress software, I started to figure out how it worked. I could have just used that theme and the latest 2.6 version, but since version 2.6 is still labeled as unstable and I had no time to figure out what differences there were with the publicly available version, I decided on the approach outlined below. Note that I have only 5 months exposure to the wordpress software as a user, and minimal knowledge of PHP, the language under the wordpress software, so my solution might be far from optimal. But it works!
Below I’ve outlined in as much detail as I can the steps I went through to include support for avatars in the Fjords theme, to include avatars with the Recent Comments widget, and to offer the same choice as wordpress.com for setting a default avatar if the user doesn’t have a registered gravatar. Note that quite a bit of the code was “borrowed” from the bleeding edge release of the upcoming WordPress version 2.6.
- Edit comments.php in the Fjords theme to insert the following
<?php echo get_avatar( $comment, 32 ); ?>on line 14, such that the complete line looks like this:<div class="comentarios"><?php echo get_avatar( $comment, 32 ); ?>The number 32 that you see is the size of the avatar that will be displayed. This will display the avatars in the comments. - In preparation of the modifications for the Recent Comments widget, edit style.css in the Fjords theme to add the following code at the end:
[code=’css’]
/* for avatars in comments */
.avatar { float: right; }
/* for avatars in recent comments */
.recentcomments img { float: left; margin: 0px 4px 0px -20px; }
.sidebar ul ul li.recentcomments { padding: 0px 0px 4px 20px; border-bottom: 0px; }
.sidebar ul ul#recentcomments { border-top: 0px; }
[/code] - Create a 1 x 1 blank pixel image in any graphics program you like, and save it as wp-includes/images/blank.gif. We will need this for the customizable default avatars control panel in the admin section.
- Edit wp-includes/functions.php to add the following code block at the end (before the “?>” symbol on the last line). These are support functions for the default avatar control panel in the admin section.
[code=’php’]
/**
* Determine if SSL is used.
* @since 2.6
* @return bool True if SSL, false if not used.
*/
function is_ssl() {
return ( ‘on’ == strtolower($_SERVER[‘HTTPS’]) ) ? true : false;
}/**
* Whether SSL login should be forced.
* @since 2.6
* @param string|bool $force Optional.
* @return bool True if forced, false if not forced.
*/
function force_ssl_login($force = ”) {
static $forced;
if ( ” != $force ) {
$old_forced = $forced;
$forced = $force;
return $old_forced;
}
return $forced;
}/**
* Whether to force SSL used for the Administration Panels.
* @since 2.6
* @param string|bool $force
* @return bool True if forced, false if not forced.
*/
function force_ssl_admin($force = ”) {
static $forced;
if ( ” != $force ) {
$old_forced = $forced;
$forced = $force;
return $old_forced;
}
return $forced;
}// return the site_url option, using https if is_ssl() is true
// if $scheme is ‘http’ or ‘https’ it will override is_ssl()
function site_url($path = ”, $scheme = null) {
// should the list of allowed schemes be maintained elsewhere?
if ( !in_array($scheme, array(‘http’, ‘https’)) ) {
if ( (‘login’ == $scheme) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ( force_ssl_login() || force_ssl_admin() ) )
$scheme = ‘https’;
elseif ( (‘admin’ == $scheme) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; force_ssl_admin() )
$scheme = ‘https’;
else
$scheme = ( is_ssl() ? ‘https’ : ‘http’ );
}
$url = str_replace( ‘http://’, “{$scheme}://”, get_option(‘siteurl’) );
if ( !empty($path) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; is_string($path) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; strpos($path, ‘..’) === false )
$url .= ‘/’ . ltrim($path, ‘/’);
return $url;
}function admin_url($path = ”) {
global $_wp_admin_url;
$url = site_url(‘wp-admin/’, ‘admin’);
if ( !empty($path) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; is_string($path) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; strpos($path, ‘..’) === false )
$url .= ltrim($path, ‘/’);
return $url;
}function includes_url($path = ”) {
global $_wp_includes_url;
$url = site_url() . ‘/’ . WPINC . ‘/’;
if ( !empty($path) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; is_string($path) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; strpos($path, ‘..’) === false )
$url .= ltrim($path, ‘/’);
return $url;
}
[/code] - Edit wp-admin/options-discussions.php to add the following code block at the end of the existing table, before the </table> statement. This and the following modification will insert the default avatar control panel in the admin section.
[code=’php’]< ?php _e('Default Avatar') ?> [/code]
- Edit the same wp-admin/options-discussions.php to replace the line starting with <input type=”hidden” name=”page_options” (near the end) with the line:
[code=’html’]
[/code] - Edit wp-includes/pluggable.php to replace 2 lines in the function get_avatar with a block as follows (at line 1243 and below). This will pick the default avatar, as selected in the default avatar control panel of the admin section, and display that wherever an avatar need to be displayed.
[code=’php’]
/** Replaced this original statement here with the block below from wp2.6
if ( empty($default) )
$default = “http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=$size”; // ad516503a11cd5ca435acc9bb6523536 == md5(‘unknown@gravatar.com’)
*/if ( empty($default) ) {
$avatar_default = get_option(‘avatar_default’);
if ( empty($avatar_default) )
$default = ‘mystery’;
else
$default = $avatar_default;
}if ( ‘custom’ == $default )
$default = add_query_arg( ‘s’, $size, $defaults[$avatar_default][1] );
elseif ( ‘mystery’ == $default )
$default = “http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s={$size}”; // ad516503a11cd5ca435acc9bb6523536 == md5(‘unknown@gravatar.com’)
elseif ( ‘blank’ == $default )
$default = includes_url(‘images/blank.gif’);
elseif ( !empty($email) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ‘gravatar_default’ == $default )
$default = ”;
elseif ( ‘gravatar_default’ == $default )
$default = “http://www.gravatar.com/avatar/s={$size}”;
elseif ( empty($email) )
$default = “http://www.gravatar.com/avatar/?d=$default&amp;amp;amp;amp;amp;s={$size}”;/** inserted the above block from wp2.6 */
[/code] - Edit wp-include/widgets.php to change 2 lines in the function wp_widget_recent_comments as follows. The first modification starts at line 966. Comment out the existing code (starting with $comments) and replace it with the one as shown below. After you’ve done that, the second modification starts at line 979. Comment out the original code line (starting with echo) and replace with the one as shown below. This modification displays the default avatar in the Recent Comments widget.
[code=’php’]
// $comments = $wpdb->get_results(“SELECT comment_author, comment_author_url, comment_ID, comment_post_ID FROM $wpdb->comments WHERE comment_approved = ‘1’ ORDER BY comment_date_gmt DESC LIMIT $number”);
// Hereafter is the modified statement to display the avatar together with the comment
$comments = $wpdb->get_results(“SELECT comment_author, comment_author_url, comment_author_email, comment_ID, comment_post_ID FROM $wpdb->comments WHERE comment_approved = ‘1’ ORDER BY comment_date_gmt DESC LIMIT $number”);
// End of modification
…
…
// echo ‘ - ‘ . sprintf(__(‘%1$s on %2$s’), get_comment_author_link(), ‘‘ . get_avatar(get_comment_author_email(),16) . sprintf(__(‘%1$s on %2$s’), get_comment_author_link(), ‘That’s it! You should now have an extra option in Settings>Discussions where you can pick a default avatar in case a user doesn’t have a registered gravatar (from gravatar.com). Moreover, the avatar will now appear in the single post comments (size 32, but you can change that in the code, see 1. above), and in the recent comments (size 16, but you can change that too in the code, see 8. above). For styling, all you want to change is done through the CSS (see 2. above). Please remember that the upcoming version 2.6 will implement this by default, except for the avatars in the recent comments.
DISCLAIMER: the usual disclaimer applies, if you decide to hack the wordpress code as I outlined above, I’m not responsible for any damage to your blog, your keyboard, your house, your family, your dog or anything else that you value. Proceed at your own risk. I will try to answer questions posed here in the comments though.