Como añadir ‘Subir una foto’ de perfil a nuestro perfil de autor en WordPress
Publicado el 17 - Mar - 2026
Podemos hacer que nuestros autores en WordPress puedan subir una foto personalizada, más allá de su avatar, que podremos visualizar después en su plantilla de autor.
Paso 1
El primer problema que nos encontramos es que el formulario que contiene en el back-end todos los campos del usuario no tiene atributo enctype, necesario para hacerlo funcional a la hora de poder subir archivos al servidor. Por lo tanto, lo primero que tenemos que hacer es inyectar este atributo a la etiqueta form de la siguiente manera:
Cómo añadir el atributo ‘enctype’ al form con los campos de perfil de usuario en el back-end
Paso 2
Una vez solventado este problema debemos hacer aparecer en el perfil del autor el botón de Subir Archivo. Esto lo hacemos añadiendo un nuevo campo <input type=»file»> al formulario en la función de callback asociada a los hooks ‘show_user_profile‘ y ‘edit_user_profile‘.
function add_custom_profile_picture( $user ) {
// Draw the form fields for skills and profile picture with HTML tags
if( !empty( get_user_meta( $user->ID, 'user_pic', true ) ) ) {
$src = get_user_meta( $user->ID, 'user_pic', true );
} else {
$src = get_template_directory_uri().'/assets/images/team/transparente.png';
}
?>
<h3>User profile picture</h3>
<div class="flex-profile-pic">
<input type="file" name="user_pic" id="user_pic"><br />
<img src="<?php echo $src;?>" name="previewImg" id="previewImg" height="150">
<p>Ruta: <?php echo get_user_meta( $user->ID, 'user_pic', true );?> </p>
</div>
}
add_action('show_user_profile','add_custom_profile_picture');
add_action('edit_user_profile','add_custom_profile_picture');Como podemos ver en el código de ejemplo hemos usado como nombre de campo para la ruta de la imagen de perfil ‘user_pic‘. Lo primero que hacemos es comprobar si ya hay o no una foto de perfil para ese usuario. En caso de que la haya vamos a usar una etiqueta <img> para mostrarla como una miniatura. También vamos a usar más tarde esta etiqueta para mostrar mediante JS la imagen seleccionada justo antes de subirla. Si no hay imagen subida hasta el momento mostraremos una imagen transparente para crear espacio.
También he establecido una etiqueta párrafo para visualizar la ruta de esa imagen y así poder comprobar que todo va correctamente.
Paso 3
Con el siguiente paso debemos conseguir guardar la ruta de la foto en el campo de la BBDD ‘user_pic’ y la foto propiamente dicha en alguna carpeta local de nuestro sitio web. Esa carpeta es wp-content/uploads. Es recomendable crear una subcarpeta para tener bien ordenado el sitio, ya que esta carpeta se usa para guardar las imágenes de los posts del blog. Por ejemplo podemos crear la carpeta team para guardar las fotos de perfil de los usuarios dentro de la carpeta uploads.
function save_custom_profile_picture ( $user_id ) {
// Save user profile pic
$user_info = get_userdata( $user_id );
$user_name = $user_info->user_login;
// Check if the picture file is correctly upload
if ( $_FILES['user_pic']['error'] == UPLOAD_ERR_OK ) {
// Picture have been upload correctly
$upload_dir = wp_upload_dir();
$subdir = '/team/';
$upload_path = $upload_dir['basedir'].$subdir;
$file_name = $user_name.'-'.$_FILES['user_pic']['name'];
$file_destiny = $upload_path.$file_name;
$file_origin = $_FILES['user_pic']['tmp_name'];
// Take the picture from limbo folder and send it to the uploads/team folder in our WP
if ( move_uploaded_file( $file_origin, $file_destiny) ) {
// Save picture url in BBDD
$upload_dir = wp_get_upload_dir();
$file_url = $upload_dir['baseurl'].$subdir.$file_name;
update_user_meta( $user_id, 'user_pic', $file_url );
} else {
// Save error msg in BBDD - Something wrong happened
update_user_meta( $user_id, 'user_pic', $_FILES['user_pic']['name'] );
}
}
}
add_action('personal_options_update', 'save_custom_profile_skills');
add_action('edit_user_profile_update', 'save_custom_profile_skills');
Deja una respuesta