Respuesta corta: crea un archivo custom-style.css dentro de tu tema hijo, por ejemplo en assets/css/, y cárgalo desde functions.php con wp_enqueue_style() enganchado a wp_enqueue_scripts. Así tu CSS no se pierde al actualizar el tema y lo tienes ordenado en un solo sitio.
Cuando un cliente me pide «cambiar un color» o «subir un poco ese botón», lo fácil es pegar el CSS en el primer cuadro que encuentras. Funciona el primer día. Al cabo de un año hay reglas repartidas entre el personalizador, Elementor, un plugin de snippets y el propio tema, y nadie sabe cuál manda. Por eso en las webs que mantenemos el CSS propio va en un archivo, dentro del tema hijo, cargado como WordPress manda.
Te cuento cómo lo hacemos nosotros, paso a paso, y al final qué otras opciones tienes si no quieres tocar archivos.
Contenido
Antes de empezar: trabaja siempre sobre un tema hijo
Si añades el archivo al tema principal, la próxima actualización lo borra. El tema hijo hereda todo del tema padre y guarda tus cambios aparte, así que puedes actualizar sin miedo. Si tu web ya usa uno (por ejemplo, «Hello Elementor Child» o «Astra Child»), lo verás en Apariencia → Temas.
Y antes de tocar functions.php, haz una copia del archivo. Un punto y coma de menos ahí deja la web en blanco, y con la copia lo arreglas en un minuto.
Paso 1: entra en la carpeta del tema hijo
Conéctate por FTP (yo uso FileZilla, que es gratuito) o abre el administrador de archivos de tu hosting. La carpeta está en wp-content/themes/nombre-del-tema-hijo/.
Paso 2: crea la carpeta y el archivo CSS
Dentro del tema hijo crea la ruta assets/css/ y, dentro, un archivo vacío llamado custom-style.css. No es obligatorio usar esa carpeta, pero cuando mañana añadas JavaScript o imágenes propias lo agradecerás.
tu-tema-hijo/
├── style.css
├── functions.php
└── assets/
└── css/
└── custom-style.css
Ese archivo es el que vas a editar a partir de ahora. Para comprobar que todo funciona, pon una regla que se note, como esta, y bórrala después:
body {
outline: 4px solid red;
}
Paso 3: carga el archivo desde functions.php
Abre el functions.php del tema hijo y pega este código al final:
/* CSS propio del tema hijo. Soluciones Web 365 */
add_action( 'wp_enqueue_scripts', 'sw365_estilos_propios', 20 );
function sw365_estilos_propios() {
$ruta = '/assets/css/custom-style.css';
wp_enqueue_style(
'sw365-custom-style',
get_stylesheet_directory_uri() . $ruta,
array(),
filemtime( get_stylesheet_directory() . $ruta )
);
}
Tres detalles que marcan la diferencia con el código que verás en muchos tutoriales:
- get_stylesheet_directory_uri() apunta al tema hijo. Su prima get_template_directory_uri() apunta al tema padre, y es el error más típico: el archivo existe, pero WordPress lo busca en otra carpeta.
- filemtime() usa la fecha de modificación del archivo como versión. Cada vez que guardas cambios, la URL cambia (?ver=…) y el navegador descarga la versión nueva en lugar de servirte la de la caché.
- La prioridad 20 hace que la función se ejecute después de la mayoría de estilos del tema, que se registran con la prioridad por defecto (10). Así tus reglas suelen ganar sin tener que llenar el archivo de !important.
Paso 4: comprueba que se carga
Recarga la web con Ctrl + F5. Si ves el borde rojo, ya está. Si no:
- Abre el inspector del navegador (F12), pestaña Red, y busca custom-style.css. Si sale un 404, la ruta o el nombre del archivo no coinciden.
- Si usas un plugin de caché u optimización (LiteSpeed Cache, WP Rocket…), vacía la caché. Si combina o minifica CSS, prueba también a desactivar esa opción un momento.
- Si el archivo carga pero tus reglas no se aplican, es un tema de especificidad: el tema usa un selector más concreto que el tuyo. Copia el selector que ves en el inspector y úsalo tal cual.
¿Y si no quieres tocar archivos? Otras formas de añadir CSS en WordPress
El archivo en el tema hijo es lo que recomiendo para una web profesional, pero hay más opciones:
CSS adicional del personalizador (temas clásicos)
En Apariencia → Personalizar → CSS adicional. Vista previa en directo y se guarda en la base de datos, así que sobrevive a las actualizaciones del tema. Está bien para pocos cambios. Cuando pasa de unas decenas de líneas, se vuelve difícil de mantener.
CSS adicional en los temas de bloques
En los temas de bloques (Twenty Twenty-Four, por ejemplo) no hay personalizador. El CSS adicional está en Apariencia → Editor → Estilos, en el menú de opciones del panel de estilos.
CSS personalizado de Elementor
Con Elementor Pro puedes añadir CSS a un elemento concreto o a todo el sitio desde los ajustes. Es cómodo para retocar un widget, pero si repartes CSS por cientos de elementos, luego cuesta encontrarlo.
Errores típicos al añadir un CSS adicional
- Editar el style.css del tema padre: la siguiente actualización se lo lleva por delante.
- Cargar el archivo con get_template_directory_uri() estando en un tema hijo.
- Olvidar la caché: el cambio está hecho, pero tu navegador o el servidor siguen sirviendo la versión anterior.
- Abusar de !important. Funciona hoy y te complica la vida mañana.
Preguntas frecuentes sobre el CSS adicional en WordPress
¿Dónde está el CSS adicional en WordPress?
En temas clásicos, en Apariencia → Personalizar → CSS adicional. En temas de bloques, en Apariencia → Editor → Estilos. Si quieres un archivo propio, sigue los pasos de este artículo.
¿Se pierde mi CSS al actualizar el tema?
Si lo has puesto en un archivo del tema padre, sí. En el tema hijo, en el CSS adicional del personalizador o en el editor de estilos, no.
¿Puedo cargar el CSS solo en una página?
Sí. Dentro de la función, envuelve el wp_enqueue_style() en una condición, por ejemplo if ( is_page( 'contacto' ) ) { … }. Así no cargas estilos en páginas que no los necesitan.
¿Y para añadir JavaScript?
El proceso es casi idéntico, con wp_enqueue_script(). Lo explico en cómo añadir tu propio JavaScript al tema hijo de WordPress.
¿Prefieres que nos encarguemos nosotros?
Si tu web acumula parches de CSS por todas partes, o no quieres arriesgarte con el functions.php, en nuestro mantenimiento WordPress nos ocupamos de los cambios, las actualizaciones y las copias de seguridad. Y si necesitas un rediseño completo, mira cómo trabajamos el diseño web en Valencia.
