WordPress: How to add a new custom default avatar

by Klaus Kjeldsen Posted on May 22, 2012

Do you find the default avatars options in WordPress inadequate?

Here is an example on how to add a new custom avatar to the default selection of avatars in WordPress – and it is actually quite simple :)

Default Avatar Selection

The below code should be added to your functions.php file in your theme folder – if you are using a child-theme, just add the code to the functions.php in the child folder. Upload a quadratic image that fits your needs in size, change the string PATH-TO-YOUR-CUSTOM-AVATAR to the path (url) of your avatar image. Give it a nice name by replacing the string NAME-OF-NEW-DEFAULT-AVATAR-OPTION. 

/**
 * Adding new default avatar option to WordPress
 */
if ( !function_exists('addCustomAvatar') ) {
	function addCustomAvatar( $avatar_defaults ) {
		$myavatar = 'PATH-TO-YOUR-CUSTOM-AVATAR';
		$avatar_defaults[$myavatar] = 'NAME-OF-NEW-DEFAULT-AVATAR-OPTION';
		return $avatar_defaults;
	}
	add_filter( 'avatar_defaults', 'addCustomAvatar' ); 
}

All done… Enjoy!

NOTE: This approach works in “WordPress 3.3.2″

Posted in Meta, User Experience, Web Development, WordPress | Leave a comment

CSS/Less: Truncate Text with CSS (ellipsis)

by Klaus Kjeldsen Posted on March 23, 2012

A cross-browser example of truncating a single line of text using only CSS.

Cross-Browser Support: IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+:

.truncate {
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   white-space: nowrap;
   overflow: hidden;
   width: 150px;
}

If you use a CSS pre-processor like Less, a mixin like this could be quite handy:

.truncate-line(@width: 100%) {
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   white-space: nowrap;
   overflow: hidden;
   width: @width;
}

Enjoy! :)

Posted in CSS3, Web Development | Leave a comment

Gmail: Filter Unread Mail

by Klaus Kjeldsen Posted on February 6, 2012

Did you even loose track of some your unread mail in your Gmail Account?

For some reason Google does not provide a visible button to filter or find unread mail in your mail box. In the desktop browser it can be done from the advanced search dropdown. However, in the mobile apps, e.g. on your iPhone or iPad there is no advanced search. But, you can still use the direct advanced search syntax to find your unread lost between the dozens of mails that you receive.

Unread mail does in fact have the label “unread” attached – though not visible besides the bold text. Therefore it possible to do a label search on the unread mail.

label:unread

If you want to search unread mail within one of your ordinary label, or e.g. only you inbox, simply combine the label search with another one:

label:inbox label:unread

Another search syntax that also do the trick is:

is:unread

Another tip is to bookmark the search result page on your mobile device, that way your will always have easy access to your new – and old – unread mail.

Enjoy!

Posted in Google, User Experience | Leave a comment