Anteriormente habíamos visto cómo Insertar javascript en WordPress de forma correcta, de manera similar ahora veremos diferentes formas de cómo agregar CSS en WordPress de manera correcta para no perder tus modificaciones cuando actualices WordPress.
Generalidades
Es probable que si estas trabajando en un sitio web quieras hacer algunos cambios de diseño, si las opciones de configuración del theme que usas (o plugins ) son limitadas, estos cambios en diseño lo puedes hacer a través de los estilos CSS, sin embargo ¿en donde es conveniente insertar este código CSS adicional?, ya que no queremos perder los cambios en una actualización.
Opción 1 – Usando el Personalizador del Tema
Las versiones recientes de WordPress incluyen en Apariencia > Personalizar, una opción para agregar código CSS, tal como se ve en la siguiente imagen.

Al igual que todas las otras opciones de esta pantalla se pueden ver los cambios realizados inmediatamente en la parte derecha de la pantalla, para tener los cambios de manera permanente se tienen que guardar usando el botón publicar.

Opción 2 – Usando un Child Theme para agregar CSS
Si tienes un theme al cual quieres hacer modificaciones que no sólo implican cambios en diseño a través de CSS, podrías evaluar hacer un tema hijo o child theme, y tener la flexibilidad de cambiar incluso archivos .php.
Te sugiero revisar el artículo: Crear un Child Theme en WordPress de manera correcta
Opción 3 – Usando un archivo CSS adicional
Si tu theme usa algún Framework como Genesis, en el cual los themes ya son temas hijos, y quieres agregar código CSS a través de un archivo, lo recomendable en este caso sería agregar un archivo CSS personalizado adicional a tu theme.
Puedes usar el siguiente código en tu archivo functions.php.
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles');
function custom_enqueue_styles() {
wp_enqueue_style( 'custom-style',
get_stylesheet_directory_uri() . '/css/custom.css',
array(),
wp_get_theme()->get('Version')
);
}
En el código anterior
- Usamos el hook wp_enqueue_scripts para poner en cola un nuevo script
- Dentro de la función a la que hace referencia el hook usamos wp_enqueue_style
- Usamos el texto custom-style como identificador
- Hacemos referencia al archivo custom.css que esta dentro de la carpeta css
- El parámetro array(), indica si hay alguna dependencia, en caso de haberla la dependencia se cargará antes
- Finalmente definimos la versión, que será la versión del theme
Opción 4 – Usando un plugin
Como opción final tenemos el uso de un plugin para agregar CSS, hay varios que podrías evaluar sin embargo uno de los más livianos es: Simple Custom CSS. Tras instalarlo verás en el menú de Apariencia un enlace adicional de CSS Personalizado, también aparecerá la misma opción en el Personalizador del theme (similar a lo que vimos en la opción 1).

Conclusión
Como verás existen diferentes formas de agregar estilos CSS a tu sitio web, selecciona la que más te convenga, lo principal es no perder los cambios CSS que agregas cuando realices actualizaciones del theme o de WordPress.
Muy buen articulo, gracias por la info.
para un javascript el proceso es el mismo?
Hola, varía un poco, te sugiero revisar: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/
Como puedo agregar diferentes archivos css usando media queries en functions.php? Es decir, quiero separar mobile.css de tablet.css y desktop.css
Hola
El functions.php no te sirve para eso, allí sólo colocas código PHP, las medias queries van directamente en un archivo .css, y no es necesario igual que lo tengas en archivos separados, pueden ir en un mismo archivo, de hecho tenerlo en archivos separados te complicaría.