Add a Custom Shortcode for User Profiles in WordPress

Lukas M. Dec 23, 2024 Shortcodes
How can I create a special code that shows user profiles on my website?
What PHP code can I use to create a custom shortcode in WordPress that fetches and displays user profile information dynamically?
Andy answered Dec 23, 2024

Creating a Custom User Profile Shortcode

Custom Code Solution

This solution creates a shortcode [user_profile] that displays user information. Place this code in your theme's functions.php file or in a site-specific plugin:

Register the shortcode and define the display function:

add_shortcode('user_profile', 'display_user_profile_shortcode');

function display_user_profile_shortcode($atts) {
    // Parse shortcode attributes
    $atts = shortcode_atts(array(
        'user_id' => get_current_user_id(),
        'show_avatar' => 'true',
        'show_bio' => 'true',
        'avatar_size' => 150
    ), $atts);

    // Get user data
    $user = get_userdata($atts['user_id']);
    if (!$user) return 'User not found.';

    // Start output buffering
    ob_start();
    
    echo '<div class="user-profile-container">';
    
    if ($atts['show_avatar'] === 'true') {
        echo get_avatar($user->ID, $atts['avatar_size']);
    }
    
    echo '<div class="user-info">';
    echo '<h3>' . esc_html($user->display_name) . '</h3>';
    
    if ($atts['show_bio'] === 'true' && $user->description) {
        echo '<div class="user-bio">' . wp_kses_post($user->description) . '</div>';
    }
    
    echo '<p class="user-email">' . esc_html($user->user_email) . '</p>';
    echo '</div></div>';

    return ob_get_clean();
}

Add basic CSS styles for the profile display:

add_action('wp_head', 'add_user_profile_styles');

function add_user_profile_styles() {
    ?>
    <style>
        .user-profile-container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
        }
        .user-profile-container img {
            display: block;
            margin: 0 auto 15px;
            border-radius: 50%;
        }
        .user-info {
            text-align: center;
        }
        .user-bio {
            margin: 15px 0;
        }
    </style>
    <?php
}

Usage

Use the shortcode in posts or pages like this:

  • Basic usage: [user_profile]
  • With parameters: [user_profile user_id="2" show_avatar="true" show_bio="true" avatar_size="200"]

Parameters

  • user_id: ID of the user to display (default: current user)
  • show_avatar: Show/hide user avatar (true/false)
  • show_bio: Show/hide user biography (true/false)
  • avatar_size: Size of avatar in pixels (default: 150)

Plugin Alternative

If you prefer a plugin solution, consider:

These plugins offer additional features like frontend profile editing and custom fields.