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 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 con el explorador de archivos de nuestro sistema justo antes de subirla. Si no hay imagen subida hasta el momento mostraremos una imagen transparente para crear espacio. Podemos mostrar con esta imagen algún icono que indique que se va a subir una imagen al server. Sería mucho más usable.
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');Para evitar que la foto que sube un autor ‘machaque’ la subida por otro (somos muy de nombrar nuestras fotos de perfil con nombres como ‘yo.jpg’) vamos a crear un nombre de archivo para nombrarlo en la carpeta /team. Este nombre estará compuesto por el nombre que ha usado para hacer login el usuario ($user_info->user_login, así nos aseguramos que será único) y el nombre del archivo y su extensión ($_FILES[‘user_pic’][‘name’]), separados por un guión.
Os recuerdo que cuando subimos un archivo al server mediante PHP éste va directamente a una carpeta temporal de la cual no necesitamos saber su nombre (que además es aleatorio). Lo normal es una vez subido inmediatamente llevarlo a una carpeta de nuestro sitio puesto que es el administrador del server y la configuración que tenga establecida la que determina cuánto tiempo estará este archivo en esta carpeta temporal. Por lo cual, puede darse el caso de que si no lo movemos inmediatamente lo perdamos.
Si miráis el código con detenimientos os daréis cuenta de que para formar la ruta del archivo y grabarla en la BBDD y para formar el nombre de archivo que tendrá el mismo en la carpeta /team he usado wp_upload_dir() que devuelve un array que contiene el directorio que usa WP para subir recursos (es decir, wp-content/uploads). Este array posee diversos elementos, como por ejemplo el path completo del directorio en el server (tipo file://…) accesible con el índice ‘basedir‘ o la URL absoluta del mismo accesible con el índice ‘baseurl‘. Pues bien, necesitamos el path completo para mover el archivo de una carpeta del server a nuestra carpeta local y la URL absoluta para grabarla en la BBDD y de esa forma que pueda ser resuelta en el front-end para poder visualizar la imagen en nuestro tema de WP.
Paso 4
Volvamos a la miniatura. Podemos hacer que cuando un usuario pulse el botón Subir Archivo en su perfil y mediante el explorador de archivos de nuestro sistema hagamos clic en una imagen, aparezca una miniatura de la misma en el perfil para cerciorarnos de que es la que queremos exactamente. Esto hay que hacerlo, como supondréis, con JavaScript. Teniendo en cuenta las etiquetas del botón del ejemplo, podríamos tener algo como:
window.addEventListener('load', () => {
const inputFile = document.getElementById('user_pic');
const previewImg = document.getElementById('previewImg');
inputFile.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
previewImg.src = e.target.result;
};
reader.readAsDataURL(file);
});
});
Obviamente tenemos que añadir este script de JS a nuestro admin-area usando el hook correspondiente (admin_enqueue_scripts).
Deja una respuesta