Añadir una hoja de estilos CSS a un tema o plugin WordPress

Cuando trabajamos desarrollando para WordPress, no debemos incluir ficheros CSS de la forma tradicional (usando las etiquetas <style> o <link>), sino que debemos utilizar una función creada para tal efecto, que nos asegura una forma segura y correcta de hacerlo.

La idea es la siguiente:

• Registrar la hoja de estilos (wp_register_style)
• Encolarla para que se haga efectivo su uso (wp_enqueue_style)

Para ello usaremos una función que se encargue de ello y la llamaremos según nos convenga, en nuestro caso, la asociaremos a una acción. Veamos el código en cuestión:

function carga_estilos_theme()
{
  wp_register_style( 'estilos',
    get_template_directory_uri() . '/css/estilos.css',
    array(),
    '1.1',
    'all' );

  wp_enqueue_style( 'estilos' );
}
add_action('wp_print_styles', 'carga_estilos_theme');

¿Qué significa cada parámetro en cada una de las funciones? Empecemos por la que tiene más, wp_register_style:

• “estilos”: es el manejador de la hoja de estilos, una vez se registra, éste será el identificador que usemos para encolarlo o cualquier otra operación que queramos.
• La URL de la hoja de estilos, por compatibilidad debemos usar la función get_template_directory_uri() que nos devuelve la URI del tema.
• Un array con las posibles dependencias que tenga la hoja de estilos.
• Versión de la hoja de estilos.
• Medio en el que se aplica la hoja (tenéis la lista completa de medios posibles definida en el W3C).

Una vez la hoja está registrada, pasamos a añadirla con wp_enqueue_style y el identificador que acabamos de proveer.

Para añadir código de scripts JavaScript, la operación es similar.