Instructions on how to put a front-end avatar upload feature to S2Member with a shortcode

This will work in any Bootstrap theme with the current code.

Requirements:

  1. Simple Local Avatars
  2. Make sure the Simple Local Avatars plugin is installed and enabled,
  3. Edit the functions.php file in child theme and add the following code
<?php

///SIMPLE LOCAL AVATAR
function upload_avatar_shortcode_callback() {
    // Make sure the user is logged in
    if ( ! is_user_logged_in() ) {
        return 'You must be logged in to upload an avatar.';
    }
    // Get current user's ID
    $user_id = get_current_user_id();

    // Output the form for uploading an avatar
    ob_start();
    ?>
    <form method="post" enctype="multipart/form-data">
        <?php
        // Display the current user's avatar
        echo get_avatar( $user_id, 128, null, null, array('class' ='rounded-circle shadow p-3 mx-auto d-block'));
        ?>
		 <br>
		<div class="d-grid gap-1 col-6 mx-auto">
        <input type="file" id="avatar" name="avatar" accept="image/*" style="display:none;">
       <label for="avatar" class="btn btn-primary btn-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path>
                <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"></path>
            </svg>
          </label>
	
        <input type="submit" class="btn btn-primary btn-sm mt-2" name="update_avatar" value="<?php _e('Update Avatar') ?>">
        <?php wp_nonce_field( 'update_avatar_' . $user_id ); ?>
        <input type="hidden" name="action" value="update_avatar">
		</div>
    </form>
    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode( 'upload_avatar', 'upload_avatar_shortcode_callback' );
    //shortcode
function handle_upload_avatar_form_submission() {
    if ( isset( $_POST['update_avatar'], $_POST['action'] ) && $_POST['action'] === 'update_avatar' ) {
        // Verify nonce
        $user_id = get_current_user_id();
        if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'update_avatar_' . $user_id ) ) {
            return;
        }

        // If a new avatar is uploaded, update the user's avatar
        if ( isset( $_FILES['avatar'] ) && ! empty( $_FILES['avatar']['name'] ) ) {
            // Load the Simple Local Avatar plugin's class
            if ( ! class_exists( 'Simple_Local_Avatars' ) ) {
                require_once( ABSPATH . 'wp-content/plugins/simple-local-avatars/simple-local-avatars.php' );
            }

            // Get the ID of the image just uploaded
            $attachment_id = media_handle_upload( 'avatar', 0 );
            if ( ! is_wp_error( $attachment_id ) ) {
                // Get the URL of the uploaded image
                $avatar_url = wp_get_attachment_url( $attachment_id );

                // Update the user's avatar
                $sla = new Simple_Local_Avatars();
                $sla->assign_new_user_avatar( $avatar_url, $user_id );
            }
        }
    }
}
add_action( 'init', 'handle_upload_avatar_form_submission' );

The last step is to post this shortcode to where you like in your theme: [upload_avatar]

Have fun and enjoy!

PS I cant seem to get this post to show the code as 1 snippet :angry:

1 Like

Thank you for sharing it!

PS I cant seem to get this post to show the code as 1 snippet

I fixed it for you. For blocks it’s better to enclose with the three backticks. https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

:slight_smile:

1 Like