Primeiramente gostaria de esclarecer, que na minha opinião existem diversas maneiras de realizar o carregamento de CSS e Javascript, desde colocar a tag de forma literal a utilizar funções “Enqueue”, ou seja, de enfileiramento. Benefícios podem ser observados nesta segunda forma. Imagine se cada plugin que utilizássemos colocasse seus scripts de forma aleatória, sem declarações de dependências. Por exemplo, sabemos que para o “bootstrap.js” funcionar temos que chamar primeiro o “Jquery”. Através das funções que veremos, temos como estabelecer tais dependências.

1º Onde iremos chamar nossos script?

                A maioria dos tutoriais relacionados ao desenvolvimento de temas, coloca o “wp_head();”, antes de terminar a tag </head> , e “wp_footer();” antes de terminar o </body>. Já parou para pensar a utilidade

Bem, uma das responsabilidades é justamente “disparar o gancho” que é responsável pela inclusão tanto do css, quanto do JS. Mas onde isso ocorre? Sabemos que temos um arquivo functions.php, e é justamente lá que iremos configurar nosso CSS e Javascript e entender porque colocamos neste.

2º Arquivo functions.php

No functions.php iremos adicionar uma ação para ser disparada quando o wordpress for enfileirar os scripts, através do “wp_enqueue_scripts”, e disparar nossa função, que iremos chamar de “theme_fonts_url”.

 

Pronto, já temos nossa função que será responsável por enfileirar, definir dependências, versões e local onde o css e javascript deverá ser chamado. Iremos fazer este carregamento através de duas funções: wp_enqueue_style() e wp_enqueue_script().

Função “wp_enqueue_style()” e “wp_enqueue_script()”

Esta função espera como parâmetros de entrada os seguintes dados:

Fonte: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Sendo assim, iremos colocar: o identificador, local do css, dependências, versão e o tipo de media, simples assim (mais abaixo um exemplo prático).

A de script é idêntica a esta, alterando apenas o $media, para o $in_footer (caso deseje que o arquivo, por ser um script, só seja carregado no footer).

Fonte: https://developer.wordpress.org/reference/functions/

Para finalizar, um exemplo completo onde iremos carregar o css com bootstrap pronto para você utilizar.


Obs: Preze sempre por olhar a documentação.