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 TinyMCE Rich Text Field for Biographical InfoWordPress 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:

/**
 *  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') ):
    ?>
    <script type="text/javascript">
    (function($){ 
        // Remove the textarea before displaying visual editor
        $('#description').parents('tr').remove();
    })(jQuery);
    </script>

    <table class="form-table">
        <tr>
            <th><label for="description"><?php _e('Biographical Info'); ?></label></th>
            <td>
                <?php 
                $description = get_user_meta( $user->ID, 'description', true);
                wp_editor( $description, 'description' ); 
                ?>
                <p class="description"><?php _e('Share a little biographical information to fill out your profile. This may be shown publicly.'); ?></p>
            </td>
        </tr>
    </table>
    <?php
    endif;
}
add_action('show_user_profile', 'kpl_user_bio_visual_editor');
add_action('edit_user_profile', 'kpl_user_bio_visual_editor');

/**
 * Remove textarea filters from description field
 */
function kpl_user_bio_visual_editor_unfiltered() {
    remove_all_filters('pre_user_description');
}
add_action('admin_init','kpl_user_bio_visual_editor_unfiltered');

That’s it!

Display a Rich Text User Bio in Your WordPress Theme

WordPress About The Author Box for author.php Theme Template

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.

<?php 
$description = get_the_author_meta( 'description', $post->post_author );
if ( $description ): 
?>
<div class="author-bio clearfix">
    <h2 class="caps-title">About The Author</h2>
    <?php if ( function_exists('get_avatar') ) echo get_avatar($author_id, '100'); ?>
    <div class="entry">
        <?php echo apply_filters('the_content', $description); ?>
    </div>
</div>
<?php endif; ?>

Making It Pretty With CSS

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

.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.