¿Cómo obtener la primera letra del nombre y apellido en WordPress?

¿Cómo obtener la primera letra del nombre y apellido en WordPress y mostrarlos en el menú sin plugins ni teniendo que modificar la plantilla? Claro, para esto estamos aquí, para ayudarte en todo lo que necesites hacer con WordPress.

Para obtener la primera letra del nombre y apellido de un usuario de WordPress y mostrarlos en el menú, se requiere de alguna función de PHP, algo de código CSS y un shortcode que permita mostrar esas iniciales con el formato, tamaño y colores que le demos con nuestras hojas de estilo. Vamos por partes, en pocos minutos lo tendrás funcionando. Al final también tienes el código completo.

Obtener la primera letra del nombre y apellido de WordPress:

Lo primero que vamos a hacer es habilitar la posibilidad de que los shortcodes se puedan ejecutar en el menú de WordPress que, por defecto, está deshabilitado. Esto es muy importante ya que, si no habilitas esta opción, en el meú se mostrará el shortcode y no se ejecutará.

Para conseguirlo tienes que añadir estos filtros en el archivo functions.php de tu plantilla o theme.

Habilitar shortcodes en menú de WordPress:

Este código habilita la ejecución de shortcodes en los menús de WordPress.

/*
 * Woofreelance.academy - Permite que se ejecuten shortcodes en el menú.
 */
if ( ! has_filter( 'wp_nav_menu', 'do_shortcode' ) ) {
    add_filter( 'wp_nav_menu', 'shortcode_unautop' );
    add_filter( 'wp_nav_menu', 'do_shortcode', 11 );
}

Después de esto, lo que vamos a crear es la función que obtiene la primera letra del nombre y la primera letra del apellido.

Código que permite obtener primeras letras:

Este código lo que hace es obtener la primera letra del nombre (first_name) y la primera letra del apellido (last_name).

/*
 * Woofreelance.academy - Permite obtener primera letra el nombre y apellido.
 */
function uwp_get_user_initials() {
    $user = wp_get_current_user();
    $first_name = $user->first_name;
    $last_name = $user->last_name;

    $initials = '';

    if ($first_name) {
        $initials .= strtoupper(substr($first_name, 0, 1));
    }

    if ($last_name) {
        $initials .= strtoupper(substr($last_name, 0, 1));
    }

    return $initials;
}

Código que permite mostrarlo con un shortcode:

Y finalmente, creamo el shortcode que ejecuta la función anterior. Ojo, hemos añadido una etiqueta con la clase user-primeras que nos permitirá darle estilos desde la hoja de estilos CSS de nuestra plantilla.

/*
 * Woofreelance.academy - Permite mostrarlos en con un shortcode.
 */
function uwp_display_user_initials_shortcode() {
    $initials = uwp_get_user_initials();

    if ($initials) {
        return '<span class="user-primeras">' . $initials . '</span>';
    }

    return '';
}
add_shortcode('uwp_primeras', 'uwp_display_user_initials_shortcode');

Código completo:

Si no quieres ir pegando código a código, aquí lo tienes completo, para añadirlo todo al funtions.php de tu plantilla WordPress.

/*
 * Woofreelance.academy - Código completo para mostrar iniciales.
 */
if ( ! has_filter( 'wp_nav_menu', 'do_shortcode' ) ) {
    add_filter( 'wp_nav_menu', 'shortcode_unautop' );
    add_filter( 'wp_nav_menu', 'do_shortcode', 11 );
}

function uwp_get_user_initials() {
    $user = wp_get_current_user();
    $first_name = $user->first_name;
    $last_name = $user->last_name;

    $initials = '';

    if ($first_name) {
        $initials .= strtoupper(substr($first_name, 0, 1));
    }

    if ($last_name) {
        $initials .= strtoupper(substr($last_name, 0, 1));
    }

    return $initials;
}


function uwp_display_user_initials_shortcode() {
    $initials = uwp_get_user_initials();

    if ($initials) {
        return '<span class="user-primeras">' . $initials . '</span>';
    }

    return '';
}
add_shortcode('uwp_primeras', 'uwp_display_user_initials_shortcode');

Paso final: utilizar el shortcode:

Y ahora solamente tendrías que añadir el shortcode [uwp_primeras] donde quieres que se muestren esas iniciales. En el ejemplo del vídeo, lo hemos añadido en el menú, como un elemento más, para que se muestre al lado del carrito.

Customizando el CSS para las iniciales de WordPress:

Finalmente te faltaría añadir el código CSS que añade estilos al con clase .user-primeras, que en nuestro ejemplo tiene un fondo circular de color azul y letras blancas.

/* Woofreelance.academy - Da formato a la clase  .user-primeras */
.user-primeras {
	display:block;
	background-color:#223344;color:#fff;
line-height:35px;width:35px;
	text-align:center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius:  50%;}

Videotutorial para obtener primeras letras del usuario de WordPress:

¿Te pareció útil? Si es así, recuerda suscribirte a nuestro nuevo canal de YouTube donde iremos publicando más tutoriales WordPress como este.