How to Display Custom User Profiles in WordPress

Johan T. Jan 12, 2025 User Profiles
How do I show a special profile for users on my WordPress site?
What are the steps to create and display custom user profile fields in WordPress, including necessary hooks and shortcodes for effective implementation?
Andy answered Jan 12, 2025

Creating Custom User Profiles in WordPress

Basic Approach

There are two main ways to implement custom user profiles:

  1. Using WordPress built-in user meta functions
  2. Creating custom tables (for complex profile systems)

Method 1: Using User Meta

Step 1: Add Custom Fields to User Profile

Add custom fields to the user profile edit screen:

function add_custom_user_fields($user) {
    ?>
    <h3>Additional Profile Information</h3>
    <table class="form-table">
        <tr>
            <th><label for="phone">Phone</label></th>
            <td>
                <input type="text" name="phone" id="phone" 
                       value="<?php echo esc_attr(get_user_meta($user->ID, 'phone', true)); ?>" 
                       class="regular-text" />
            </td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'add_custom_user_fields');
add_action('edit_user_profile', 'add_custom_user_fields');

Step 2: Save Custom Fields

Save the custom field values when profile is updated:

function save_custom_user_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    
    if (isset($_POST['phone'])) {
        update_user_meta($user_id, 'phone', sanitize_text_field($_POST['phone']));
    }
}
add_action('personal_options_update', 'save_custom_user_fields');
add_action('edit_user_profile_update', 'save_custom_user_fields');

Step 3: Display Custom Profile

Create a shortcode to display user profiles:

function display_user_profile($atts) {
    $atts = shortcode_atts(array(
        'user_id' => get_current_user_id()
    ), $atts);
    
    $user = get_userdata($atts['user_id']);
    if (!$user) {
        return 'User not found.';
    }
    
    $output = '<div class="user-profile">';
    $output .= '<h2>' . esc_html($user->display_name) . '</h2>';
    $output .= '<p>Email: ' . esc_html($user->user_email) . '</p>';
    $output .= '<p>Phone: ' . esc_html(get_user_meta($user->ID, 'phone', true)) . '</p>';
    $output .= '</div>';
    
    return $output;
}
add_shortcode('user_profile', 'display_user_profile');

Security Considerations

  1. Always sanitize input data
  2. Validate user permissions
  3. Escape output data
  4. Use nonces for form submissions

Common Pitfalls

  • Not checking user capabilities
  • Storing sensitive information in user meta
  • Not sanitizing input/output
  • Not considering scalability for large user bases

Recommended Plugins

  1. Profile Builder (Link)

    • Easy-to-use interface
    • Frontend forms
    • Custom fields support
  2. Ultimate Member (Link)

    • Complete profile solution
    • Role-based content restriction
    • Profile templates

Best Practices

  1. Use appropriate field types for data
  2. Implement proper validation
  3. Follow WordPress coding standards
  4. Cache profile data for better performance
  5. Use template parts for profile displays

Example Usage

To display a user profile in your posts/pages:

[user_profile user_id="123"]

To display current user's profile:

[user_profile]

Advanced Implementation

For custom profile pages, add this to your theme's functions.php:

function register_profile_page() {
    add_rewrite_rule(
        'profile/([^/]+)/?$',
        'index.php?profile_user=$matches[1]',
        'top'
    );
    add_rewrite_tag('%profile_user%', '([^&]+)');
}
add_action('init', 'register_profile_page');

function profile_template($template) {
    if (get_query_var('profile_user')) {
        $template = locate_template('template-profile.php');
    }
    return $template;
}
add_filter('template_include', 'profile_template');

Remember to flush rewrite rules after adding these rules by visiting Settings > Permalinks.