Add an Author Image in WordPress

How to Add an Author Image in WordPress without a Plugin

Are you looking for How to Add an Author Image in WordPress without a Plugin? Stay with me. I will teach you how to add an image upload field and change the default avatar in this article.

On the internet, Most of the articles preferred a plugin for the author’s image. Because there is a needed Image upload button and for Image upload button needed some JS scripts. But I was trying to provide free resources about WordPress.

So that case, Let’s create an image upload field for the author profile.

Create an Image Upload Field

Before creating an image upload field. There is needed to create JS scripts. Otherwise, Only HTML will not work. 

Don’t worry I will provide you with Scripts for the image upload field. You can use it anywhere.

Save this JS code into a file named img-upload.js:

jQuery(function($){
    $('body').on('click', '.wpk_image_upload_button', function(e){
        e.preventDefault();
        wpk_uploader = wp.media({
            title: 'Custom image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            var attachment = wpk_uploader.state().get('selection').first().toJSON();
            $('#wpk_profile_img').val(attachment.url);
        })
        .open();
    });
});

Oh! Then you have to need to enqueue them into the admin panel using the admin_enqueue_scripts hook.

Copy and paste this code into function.php

function wpk_image_upload_admin_script() {
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
    wp_enqueue_script( 'wpk_image_upload_script', get_template_directory_uri() .'/assets/js/img-upload.js', array('jquery'), '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'wpk_image_upload_admin_script' );

Note: Use your own location of the Js file.If you are using a child theme you can use get_stylesheet_directory_uri() instead of get_template_directory_uri().

Now you have to add HTML field code to create a field for the user profile.

Use this code into function.php

add_action( 'show_user_profile', 'wpk_user_profile_pic_fields' );
add_action( 'edit_user_profile', 'wpk_user_profile_pic_fields' );

function wpk_user_profile_pic_fields( $user ) {
	$wpk_profile_img = get_the_author_meta( 'wpk_profile_img', $user->ID );
	 ?>
    <h3><?php _e("wpknifer.com User information", "blank"); ?></h3>

    <table class="form-table">
     <tr>
     	<img src="<?php echo esc_url($wpk_profile_img) ?>" alt="wpk-profile-img" >
     </tr>	
    <tr>
        <td><a href="#" class="wpk_image_upload_button button button-secondary"><?php _e('Upload Image'); ?></a>
        <td>
            <input type="text" name="wpk_profile_img" id="wpk_profile_img" value="<?php echo esc_url( $wpk_profile_img ); ?>" class="regular-text" /><br />
        </td>
    </tr>   
    </table>
<?php }

When you have come to this level. It seems you can see already an image field added at the end of the user profile page in the admin panel.

Save The Field Value

The Field was added. But if you try to use those fields. That field value cannot save. To save field value, We need to use the update_user_meta function.

Save this code into function.php for the save Image Upload field.

add_action( 'personal_options_update', 'wpk_save_image_buttom' );
add_action( 'edit_user_profile_update', 'wpk_save_image_buttom' );

function wpk_save_image_buttom( $user_id ) {
    if ( empty( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'update-user_' . $user_id ) ) {
        return;
    }
    
    if ( !current_user_can( 'edit_user', $user_id ) ) { 
        return false; 
    }
    update_user_meta( $user_id, 'wpk_profile_img', $_POST['wpk_profile_img'] );
}

However, The image upload field is ready to use. It’s a saved image now. You can use it by calling

get_user_meta($user_id, 'wpk_profile_img', true); 

But if you want this image as your default avatar then follow the next section. 

Change Default Avatar

WordPress has a default avatar for every user. We recently added an image upload field. It saves an image and we can use that image as an Avatar. 

Peste this code into function.php

add_filter('get_avatar_data', 'wpk_change_avatar', 100, 2);
function wpk_change_avatar($args, $user_data) {
    if(is_object($user_data)){
        $user_id = $user_data->user_id;
    } else{
        $user_id = $user_data;  
    }
    if($user_id){
        $author_pic = get_user_meta($user_id, 'wpk_profile_img', true);
        if($author_pic){
            $args['url'] = $author_pic;
        } else {
            $args['url'] = 'registerd user default img url';
        }
    } else {
        $args['url'] = 'guast user img url';
    }
    return $args;
} 

If you have completed all steps properly. You will see, If You save an image it will change the default avatar automatically. 

Conclusion

I hope You have successfully added an Author Image in WordPress without a Plugin. Whatever, You do not need to use a plugin for such a small job. 

I hope you like this article. If you have any problem, Please leave a comment. 

See More:

How to Create a Custom Author Page in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *