How do I create a custom user profile page in WordPress?

Creating a Custom User Profile Page in WordPress

Overview

Creating a custom user profile page allows your users to view and edit their information in a tailored interface that matches your site's design and requirements.

Basic Approach

1. Create a Custom Page Template

First, create a new page template in your theme:

Create a new template file (e.g., 'template-user-profile.php'):

<?php
/*
Template Name: User Profile
*/

// Redirect if user is not logged in
if (!is_user_logged_in()) {
    wp_redirect(wp_login_url());
    exit;
}

get_header();

// Get current user data
$current_user = wp_get_current_user();
?>

<div class="user-profile-container">
    <!-- Your profile content will go here -->
</div>

<?php get_footer(); ?>

2. Display User Information

Add this code to show user details:

<div class="user-info">
    <h2>Profile: <?php echo esc_html($current_user->display_name); ?></h2>
    <p>Email: <?php echo esc_html($current_user->user_email); ?></p>
    <?php 
    // Display custom user meta
    $website = get_user_meta($current_user->ID, 'website', true);
    $bio = get_user_meta($current_user->ID, 'description', true);
    ?>
    <p>Website: <?php echo esc_url($website); ?></p>
    <p>Bio: <?php echo wp_kses_post($bio); ?></p>
</div>

3. Create Update Form

Add this profile update form:

<form method="post" action="" class="profile-form">
    <?php wp_nonce_field('update_user_profile', 'profile_nonce'); ?>
    
    <div class="form-group">
        <label for="display_name">Display Name</label>
        <input type="text" name="display_name" id="display_name" 
               value="<?php echo esc_attr($current_user->display_name); ?>">
    </div>
    
    <div class="form-group">
        <label for="user_email">Email</label>
        <input type="email" name="user_email" id="user_email" 
               value="<?php echo esc_attr($current_user->user_email); ?>">
    </div>
    
    <div class="form-group">
        <label for="website">Website</label>
        <input type="url" name="website" id="website" 
               value="<?php echo esc_url($website); ?>">
    </div>
    
    <div class="form-group">
        <label for="bio">Bio</label>
        <textarea name="bio" id="bio"><?php echo esc_textarea($bio); ?></textarea>
    </div>
    
    <button type="submit" name="update_profile">Update Profile</button>
</form>

4. Handle Form Submission

Add this code to process form submissions:

<?php
// Place this at the top of your template file
if (isset($_POST['update_profile']) && wp_verify_nonce($_POST['profile_nonce'], 'update_user_profile')) {
    $user_id = get_current_user_id();
    
    // Update core user data
    $user_data = array(
        'ID' => $user_id,
        'display_name' => sanitize_text_field($_POST['display_name']),
        'user_email' => sanitize_email($_POST['user_email'])
    );
    
    $user_update = wp_update_user($user_data);
    
    if (!is_wp_error($user_update)) {
        // Update custom meta fields
        update_user_meta($user_id, 'website', esc_url_raw($_POST['website']));
        update_user_meta($user_id, 'description', sanitize_textarea_field($_POST['bio']));
        
        echo '<div class="notice notice-success">Profile updated successfully!</div>';
    } else {
        echo '<div class="notice notice-error">Error updating profile.</div>';
    }
}
?>

Security Considerations

• Always use nonce verification
• Sanitize input data
• Validate user permissions
• Escape output
• Use appropriate capability checks

Common Pitfalls

1. Forgetting to check if user is logged in
2. Not sanitizing input data
3. Missing nonce verification
4. Inadequate error handling
5. Not escaping output

Recommended Plugins

If you prefer a plugin solution:

1. Profile Builder

• Features: Custom fields, front-end forms, user registration
• Link: https://wordpress.org/plugins/profile-builder/

2. Ultimate Member

• Features: Complete user profile system
• Link: https://wordpress.org/plugins/ultimate-member/

Styling Tips

Add these CSS rules to style your profile page:

.user-profile-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
}

.notice {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.notice-success {
    background: #d4edda;
    color: #155724;
}

.notice-error {
    background: #f8d7da;
    color: #721c24;
}

Remember to test thoroughly and maintain compatibility with your theme's styling.