Add TinyMCE to WordPress User Profile Pages in WordPress  3.3

**This has been released as the Visual Editor Biography Plugin in the WordPress Plugin repository.**

WordPress has a basic profile setup that allows you to store settings about authors. In your journey as a WordPress theme developer you may find that it’s quite handy to have a rich text biography field included in your user profiles.
I frequently come across situations where an author’s biography needs to be visible in a theme (think author templates and sidebar widgets). Here’s a solution I use quite often, hopefully it makes your next WordPress web project easier!

### The Functions

This bit of code will automatically turn the **Biographical Info** textarea field into a TinyMCE editor using the new wp_editor() function added to WordPress 3.3.

Add this to your functions.php file:

“`php
/**
* Add TinyMCE editor to the “Biographical Info” field in a user profile
*/
function kpl_user_bio_visual_editor( $user ) {
// Requires WP 3.3+ and author level capabilities
if ( function_exists(‘wp_editor’) && current_user_can(‘publish_posts’) ):
?>

	ID, ‘description’, true); wp_editor( $description, ‘description’ ); ?>

Display a Rich Text User Bio in Your WordPress Theme

I commonly use this bit of code in the author.php theme file to display a nice rich text author bio and image above the list of posts.

### PHP/HTML for `author.php`

First let’s check to see if a user has entered a bio. If they have then we’ll display an **About The Author** box above the list of posts.

“`
post_author );
if ( $description ):
?>

“`

Making It Pretty With CSS

Here’s a basic bit of CSS to get you started with styling your **About The Author** box.

“`css
.author-bio {
background:#fff;
border:1px solid #ccc;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:14px 18px;
margin:0 0 20px;
}
.author-bio .caps-title {
font-size:18px;
line-height:1.3em;
text-transform:uppercase;
letter-spacing:1px;
margin:0 0 5px;
}
.author-bio img {
float:left;
width:100px;
height:100px;
margin:4px 10px 4px 0;
}
.author-bio .entry {
margin:0 0 0 118px;
color:#666;
}
“`

That’s it! You should now have a nice TinyMCE editor on your WordPress profile editor along with an understanding of how to add a nice **About The Author** box to your theme.

Let me know if you have any trouble implementing this, I’m happy to help out where I can.