If you’re managing a WordPress membership site, especially one powered by Paid Memberships Pro (PMPro), you probably collect profile data from your members — such as their biography, credentials, or personal statement.
By default, these profile fields are just plain text boxes. This limits what your members can do. Wouldn’t it be better if they could format their bios like a blog post? Add bold text, bullet points, or even a link to their clinic website?
The good news is: you can add a WYSIWYG editor (TinyMCE — the same one WordPress uses for posts) to any member profile field. This tutorial will show you how — safely, cleanly, and with no loss of existing data.
Why Use a WYSIWYG Editor for Member Profiles in Paid Memberships Pro?
Let’s start with why this matters.
Most WordPress user profile fields are either:
- Simple input boxes (for short values like city or phone number)
- Textareas (for longer fields like a biography)
But neither of these support formatting. That means if your users want to:
- Emphasize credentials (e.g., Board-Certified Naturopathic Doctor)
- Add links to their clinic websites
- Format their bio with bullet points or lists
…they simply can’t.
By adding TinyMCE (What You See Is What You Get) support, you allow users to format their content using bold, italics, lists, links, and more. This helps users present themselves professionally and improves your site’s appearance and SEO.
Requirements
Before you begin, you should have:
- WordPress installed and working
- Paid Memberships Pro plugin installed
- A child theme (such as Memberlite Child) with access to
functions.php - Admin access to your WordPress site
No third-party WYSIWYG plugins are needed — we’ll use WordPress’s built-in TinyMCE.
Step 1: Create the Biography Field Using PMPro User Fields API
Paid Memberships Pro provides a powerful User Fields API which lets you add custom user fields to the profile or checkout forms.
Here’s how to register a custom bio field using this API:
function custom_register_pmpro_bio_field() {
if (!function_exists('pmpro_add_user_field')) return;
$field = new PMPro_Field(
'bio',
'textarea',
array(
'label' => 'Biography',
'size' => 80,
'profile' => true,
'required' => false,
'memberslistcsv' => true,
'sanitize' => 'wp_kses_post', // allow safe HTML tags
'admin' => true,
)
);
pmpro_add_user_field('custom_bio_group', $field);
pmpro_add_field_group('custom_bio_group', 'Biography Group');
}
add_action('init', 'custom_register_pmpro_bio_field');
This adds a plain textarea called “Biography” to the member profile edit screen (frontend and admin). It is saved in the usermeta table under the meta key bio.
Step 2: Enable TinyMCE on Admin Member Edit Page
Next, we replace the plain textarea with WordPress’s built-in TinyMCE editor — but only in the admin area.
add_action('admin_footer', function () {
if (
is_admin() &&
isset($_GET['page'], $_GET['pmpro_member_edit_panel']) &&
$_GET['page'] === 'pmpro-member'
) {
?>
<script src="<?php echo includes_url('js/tinymce/tinymce.min.js'); ?>"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const textarea = document.querySelector('#bio');
if (!textarea) return;
setTimeout(() => {
if (typeof tinymce === 'undefined') return;
tinymce.init({
selector: '#bio',
height: 300,
menubar: false,
plugins: 'link lists paste',
toolbar: 'undo redo | bold italic underline | bullist numlist | link',
branding: false
});
}, 300);
});
</script>
<?php
}
});
Now, when an admin edits a member’s profile in WP Admin (Users > Edit Member), they’ll see a rich text editor instead of a plain box.
Step 3: Display the Bio with Formatting
Now let’s display the saved bio on the frontend — fully formatted with paragraphs and links intact.
add_action('pmpro_member_profile_after', function ($user) {
if (empty($user) || !isset($user->ID)) return;
$bio = get_user_meta($user->ID, 'bio', true);
if (empty($bio)) return;
echo '<div class="pmpro_member_profile_field pmpro_member_profile_field-bio custom-bio">';
echo '<div class="pmpro_member_profile_field_label">Biography</div>';
echo '<div class="pmpro_member_profile_field_data">';
echo wpautop($bio);
echo '</div></div>';
});
The wpautop() function automatically adds paragraph tags and line breaks, just like WordPress does in posts.
To prevent duplicate output from PMPro’s default bio logic, you can disable it:
add_action('init', function () {
remove_action('pmpro_member_profile_after', 'pmpro_member_profile_show_bio');
});
Need Help Customizing Paid Memberships Pro?
From WYSIWYG fields to advanced membership logic, Codeable connects you with vetted WordPress developers who can build exactly what you need.
Database Behavior: Will I Lose Existing Data?
No — this method is safe for existing data.
Here’s how it works behind the scenes:
- The field data is stored in the WordPress
usermetatable under the keybio - Switching from a plain
textareato a WYSIWYG editor doesn’t change the storage format - Even if some users have existing plain-text bios, their content remains intact
Bonus: The sanitize parameter is set to 'wp_kses_post', which allows safe HTML (bold, italics, links). This prevents malicious code but still lets users format their content.
If you ever remove the TinyMCE editor later, the raw HTML will still remain stored — but it won’t break anything. The content just won’t render as rich text.
Final Code: Copy and Paste into functions.php
Here’s the complete working solution to register the WYSIWYG bio field, load TinyMCE in the admin, and display the content properly:
// 1. Register the 'bio' field
function custom_register_pmpro_bio_field() {
if (!function_exists('pmpro_add_user_field')) return;
$field = new PMPro_Field(
'bio',
'textarea',
array(
'label' => 'Biography',
'size' => 80,
'profile' => true,
'required' => false,
'memberslistcsv' => true,
'sanitize' => 'wp_kses_post',
'admin' => true,
)
);
pmpro_add_user_field('custom_bio_group', $field);
pmpro_add_field_group('custom_bio_group', 'Biography Group');
}
add_action('init', 'custom_register_pmpro_bio_field');
// 2. Load TinyMCE in admin
add_action('admin_footer', function () {
if (
is_admin() &&
isset($_GET['page'], $_GET['pmpro_member_edit_panel']) &&
$_GET['page'] === 'pmpro-member'
) {
?>
<script src="<?php echo includes_url('js/tinymce/tinymce.min.js'); ?>"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const textarea = document.querySelector('#bio');
if (!textarea) return;
setTimeout(() => {
if (typeof tinymce === 'undefined') return;
tinymce.init({
selector: '#bio',
height: 300,
menubar: false,
plugins: 'link lists paste',
toolbar: 'undo redo | bold italic underline | bullist numlist | link',
branding: false
});
}, 300);
});
</script>
<?php
}
});
// 3. Output bio with formatting
add_action('pmpro_member_profile_after', function ($user) {
if (empty($user) || !isset($user->ID)) return;
$bio = get_user_meta($user->ID, 'bio', true);
if (empty($bio)) return;
echo '<div class="pmpro_member_profile_field pmpro_member_profile_field-bio custom-bio">';
echo '<div class="pmpro_member_profile_field_label">Biography</div>';
echo '<div class="pmpro_member_profile_field_data">';
echo wpautop($bio);
echo '</div></div>';
});
// 4. Remove default PMPro bio
add_action('init', function () {
remove_action('pmpro_member_profile_after', 'pmpro_member_profile_show_bio');
});
Final Thoughts
Upgrading your member profiles with WYSIWYG editing gives your users more freedom and improves the presentation of your site. Whether you’re listing naturopathic doctors, coaches, students, or professionals — rich formatting adds credibility and clarity.
It’s easy to implement, safe for your database, and leverages WordPress’s native editor without installing extra plugins.
Customizing Paid Memberships Pro?
Need help extending PMPro with custom fields, shortcodes, or frontend logic? Codeable’s vetted developers are ready to jump in.
