¿Cómo agregar un archivo CSS personalizado en el tema?

Usar @import en WordPress para añadir CSS personalizado ya no es la mejor práctica, aunque todavía puedes hacerlo con ese método.

La mejor práctica es usar la función wp_enqueue_style() en functions.php.

Ejemplo:

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

Activa el tema hijo y añade el siguiente código de ejemplo en el function.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

Mi propuesta sería utilizar temas hijos. Es muy fácil de implementar y todas las modificaciones que realices (incluyendo estilos) están completamente aisladas del tema original.

Para evitar sobrescribir el CSS principal del tema u otros archivos, SIEMPRE deberías usar un tema hijo en WordPress... no hacerlo solo te causará grandes dolores de cabeza y problemas en el futuro.

https://codex.wordpress.org/Child_Themes

... y con lo fácil que es configurar un tema hijo, no hay razón para no usar uno.

Usar un tema hijo te permitirá sobrescribir cualquier archivo del tema padre que desees, simplemente copiándolo del padre a tu hijo o creando un nuevo archivo con el mismo nombre.

En cuanto al archivo custom.css, hay muchas formas en que los desarrolladores de temas manejan esto... muchos lo hacen simplemente para intentar evitar que los clientes que no quieren usar un tema hijo editen el archivo principal style.css...

De cualquier manera, no deberías preocuparte por eso, siempre y cuando uses un tema hijo no tendrás que preocuparte por actualizar tu tema más adelante y perder tus cambios... acostúmbrate a siempre usar temas hijos, me lo agradecerás más tarde, te lo prometo.

Si deseas mantener tu html intacto, puedes agregar esto a tu archivo css. Creo que esto es mejor.

@import url("../mycustomstyle.css");

Dependiendo de tu tema también funcionará con temas hijo y padre.

-- Ten en cuenta que el css funciona de manera secuencial (cuando se usa el mismo nivel de identificador, ya utilizado), por lo que lo último en tu archivo sobrescribirá. Así que coloca la importación de tu estilo personalizado al final si deseas sobrescribir elementos.

Usa un tema hijo. Es tu mejor opción. De esta manera, si el tema se actualiza, no sobrescribirás las hojas de estilo que has creado.

https://codex.wordpress.org/Child_Themes

Elige este camino, te lo agradecerás más tarde.

La mejor manera es combinar todos los estilos en cola en una sola función y luego llamarlos usando la acción wp_enqueue_scripts. Agrega la función definida en el archivo functions.php de tu tema, debajo de la configuración inicial.

Bloque de Código:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Nota Importante:

El tercer parámetro es el arreglo de dependencias, que indica si esta hoja de estilo depende de otra. En nuestro código anterior, custom.css depende de style.css.

|
Conceptos Básicos Adicionales:
La función wp_enqueue_style() puede tener 5 parámetros:
de esta forma -
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
En el desarrollo real para WordPress, usualmente también agregamos archivos JavaScript/librerías jQuery dentro de esa función de esta manera:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

El 5to parámetro true/false es opcional (el 2do, 3ro y 4to también lo son) pero muy importante, ya que nos permite colocar nuestros scripts en el footer cuando usamos el parámetro booleano como true.

Ve a Apariencia > Editar CSS desde tu Escritorio de WordPress.

Aquí está la pantalla con el editor CSS básico.

Ahora pega tu CSS directamente en el texto por defecto. Puedes eliminar el texto por defecto para que sólo aparezca tu CSS en el editor. Luego guarda la hoja de estilos y tu CSS estará activo.

Si quieres evitar problemas de caché en el navegador web, necesitas incluir la versión del archivo, como se muestra en este ejemplo.

wp_enqueue_style ('theme-style', get_template_directory_uri().'/ruta/al/css/style.css?v=' . filemtime(get_template_directory() . '/ruta/al/css/style.css'));

En este caso, escribo la última fecha de modificación en tiempo unix como un parámetro de consulta.