La manera correcta de añadir código CSS personalizado en WordPress

CSS es un lenguaje potente para personalizar el diseño de tu página web en WordPress. Se corresponde con las siglas de “Cascading Style Sheets” (hojas de estilo en cascada). De hecho, si inspecciones el código fuente de cualquier web de internet, siempre tiene 3 tipos de código: HTML (estructura), JavaScript (funcionalidad) y CSS (diseño).

El añadir CSS personalizado es un método que hoy en día se usa mucho para añadir instrucciones de estilo adicionales a tu sitio web. Por ejemplo, puedes usarlo para indicar el color de un encabezado o la fuente de un contenido.

Si quieres personalizar un poco más el aspecto de tu página web y aplicar mejores decisiones de diseño, hoy aprenderás a añadir código CSS personalizado en WordPress de la manera correcta. Hay varias formas de hacerlo.

Cómo añadir código CSS personalizado en WordPress paso a paso

A continuación, vemos cómo añadir código CSS personalizado en WordPress de 4 maneras distintas.

Opción 1: para temas normales (Ej: Blocksy)

La forma clásica de añadir código CSS es la siguiente:

• Desde Apariencia > Personalizar > CSS adicional.

Es muy fácil y rápido. Simplemente tienes que buscar el botón de Apariencia en el menú y llegar hasta CSS adicional. Ahí podrás añadir las líneas que necesites para personalizar tu web a tu manera.

Es un método que funciona bien en themes normales de WordPress, como Blocksy, que por cierto es un theme que recomiendo por su versatilidad, funcionalidad y alto rendimiento. Además, es compatible con varios constructores de páginas como Elementor (aunque no lo recomiendo).

Opción 2: para temas de bloques (Ej: Twenty Twenty-Five)

En el caso de themes de WordPress de bloques, como Twenty Twenty-Five, puedes añadir código CSS personalizado desde el propio editor del sitio.

Sigue estos pasos:

• Ve al menú de WordPress en Apariencia > Editor.
• Selecciona la Vista Previa.
• Clic en el icono Estilos.
• Pincha en los tres puntos debajo de Estilos – Te dejo captura de pantalla para que lo veas más abajo.
• Entra en CSS adicional y añade desde ahí el código CSS que quieras.

Desde ahí podrás añadir el código CSS que quieras, para personalizar el tema más a medida. Cuando termines, guarda los cambios y listo.

Opción 3: en el functions.php, insertándolo «inline»

Otra forma de añadir código CSS personalizado en WordPress es mediante el functions.php.

Este es un ejemplo de código que puedes añadir a tu archivo functions.php:

function custom_css() {
    echo '<style>
        body { background-color: #f0f0f0; }
        h1 { color: red; }
    </style>';
}
add_action('wp_head', 'custom_css');

Lo que hace la función es añadir código CSS personalizado en la cabecera de tu sitio WordPress en línea (inline en inglés). Puedes añadir las líneas de código que quieras para cambiar colores, tamaños de letra, tipografías, etc., siempre dentro de las etiquetas <style>.

Cualquiera de estas tres opciones va bien para añadir CSS de forma global. Es decir, lo que se añada, WordPress lo pondrá en todas las páginas, afectando a todas las cabeceras del sitio o H1, por ejemplo.

Opción 4: en el functions.php, insertándolo desde un archivo aparte

La opción más interesante de las cuatro -en términos de rendimiento– es esta.

Hacemos lo mismo: en el functions.php añadimos más código, pero esta vez para llamar a una archivo a parte que se llame, por ejemplo, custom-style.css:

function enqueue_custom_styles() {
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Y dentro del archivo custom-style.css, que crearemos justo en el mismo directorio donde el functions.php se encuentra, es donde pondremos nuestro CSS.

¿Por qué es la mejor opción en cuanto a rendimiento? Porque llamando a un archivo a parte, le damos la posibilidad al navegador de que lo almacene en caché para próximas visitas, que es justo lo que no se puede hacer si se añade inline.

¿Cuál es mejor opción para añadir CSS personalizado en WordPress?

Las tres primeras opciones insertan el CSS inline, por tanto, es mejor opción la cuarta. Va mejor para el rendimiento de la web, porque ese archivo nuevo se podrá almacenar en la caché del navegador y reutilizar en próximas visitas.

En el caso de que necesites añadir un código CSS muy pequeño, ni te compliques. En cosas pequeñas la diferencia no se nota. Pero ojo, porque para más cantidad de CSS sí se puede notar. Podrías ver lastrado el rendimiento de tu página web, debido a que CSS inline se carga de nuevo para cada visita a la página.

En resumen:

• Si vas a añadir poco código CSS personalizado, cualquiera opción es válida. La más rápida probablemente sea la uno o la dos, según el theme que tengas instalado.
• Si vas a añadir bastante código personalizado, elige siempre la cuarta opción.

¿Cómo añadir CSS a una sola página en concreto?

Otra cuestión que nos puede interesar a la hora de personalizar la web, es añadir cambios en el CSS pero sólo de una determinada página o post. Esto lo podemos hacer fácilmente con el plugin Blocks CSS. Es la opción más rápida y recomendada, aunque hay otras también.

1- Con el plugin de Blocks CSS

Este plugin es muy fácil de usar. Nada más descargarlo y activarlo, verás que te aparece una nueva funcionalidad desde el editor de Gutenberg.

Al lado del documento, verás una opción de «Bloque«, tal y como te muestro en la siguiente imagen. Lo verás cada vez que selecciones un bloque de la página o entrada que estés editando.

Desde ahí puedes añadir tu CSS personalizado, para modificar el bloque de la página en cuestión como quieras, totalmente a medida. Está muy bien porque sólo cambiará lo que quieras, con la comodidad de hacerlo directamente desde el editor.

Además, puedes previsualizar rápidamente los cambios en el mismo editor y guardar cuando quede 100% como quieres. Al ser una forma muy visual de hacerlo, facilita mucho las cosas.

2- Mediante el functions.php

Aunque el plugin es la forma más rápida y cómoda de añadir el código CSS a páginas concretas, otra opción es tocando el functions.php, que al final sigue siendo mejor para el rendimiento de la web porque no hace falta instalar ningún plugin.

Hay dos formas de hacerlo, para página y para entradas:

Para página

Ejemplo de código a incluir en el functions.php para una página en concreto. Fíjate en la línea del mismo código dónde tendrás que indicar la página:

function custom_css_for_specific_page() {
    if (is_page(42)) { // Reemplaza el 42 con el numero de ID de pagina que quieras
        echo '<style>
            body { background-color: lightblue; }
        </style>';
    }
}
add_action('wp_head', 'custom_css_for_specific_page');

Para post

Ejemplo de código a incluir en el functions.php para una determinada entrada del blog. Fíjate en el mismo código dónde tendrás que indicar el post:

function custom_css_for_specific_post() {
    if (is_single(99)) { // Reemplaza el 99 con el numero de ID de entrada que quieras
        echo '<style>
            h1 { color: green; }
        </style>';
    }
}
add_action('wp_head', 'custom_css_for_specific_post');

En ambos casos, el código se insertará inline en la cabecera de la página o entrada en cuestión.

No obstante, para optimizarlo y que no lastre el rendimiento, puedes hacer lo mismo que te recomendé arriba en la cuarta opción: Insertar un archivo aparte con la función wp_enqueue_style. Es lo mejor. Por ejemplo, para la entrada con ID 99 quedaría así:

function custom_css_for_specific_post() {
    if (is_single(99)) { // Reemplaza el 99 con el numero de ID de entrada que quieras
        wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom-style-for-post-99.css');
    }
}
add_action('wp_head', 'custom_css_for_specific_post');

¿Te ha quedado alguna duda a la hora de añadir código CSS personalizado en WordPress? Pregúntame lo que necesites.