Estilos do tema filho do WordPress não carregam
O style.css do seu tema filho não está carregando porque o WordPress não faz o enqueue dele para você. A folha de estilos do tema filho precisa ser registrada manualmente no
Publicado
O style.css do seu tema filho não está carregando porque o WordPress não faz o enqueue dele para você. A folha de estilos do tema filho precisa ser registrada na mão no functions.php do tema filho, e esse enqueue quase sempre tem um de dois problemas: ou ele simplesmente não está lá, ou carrega sem declarar a folha de estilos do tema pai como dependência, então suas regras caem no lugar errado da cascata e acabam sobrescritas. Conserte o enqueue e os estilos voltam. Aquele velho truque do @import que você provavelmente copiou de um tutorial de 2013 é a solução errada.
Por que isso acontece
Um tema filho clássico são dois arquivos obrigatórios: um style.css com um bloco de cabeçalho nomeando o tema pai, e um functions.php. A linha Template: do cabeçalho diz ao WordPress de qual tema pai herdar os templates. Essa é a única coisa que o WordPress faz automaticamente. Ele lê o cabeçalho, configura o fallback de templates e para por aí. Ele nunca faz o enqueue do style.css do seu tema filho no front-end.
O tema pai, por sua vez, faz o enqueue da sua folha de estilos a partir do seu próprio functions.php, no hook wp_enqueue_scripts. O functions.php do seu tema filho roda primeiro, depois o do pai, e então tudo que está nesse hook é disparado. Se o seu tema filho nunca chama wp_enqueue_style para o próprio arquivo, o navegador nunca o requisita. A página parece o tema pai puro porque é exatamente isso que ela é.
A segunda falha é mais sutil. Você faz o enqueue da folha de estilos do tema filho, ela carrega, mas suas sobrescritas não fazem nada. Isso é um problema de ordem de carregamento. Quando duas regras têm a mesma especificidade, vence a que carrega por último. Se o CSS do seu tema filho carrega antes do CSS do pai, o pai vence todos os empates. O array de dependências no wp_enqueue_style é o que força a ordem.
Mais uma coisa que as pessoas erram: get_template_directory_uri() aponta para a pasta do tema pai, e get_stylesheet_directory_uri() aponta para a pasta do tema ativo (o filho). Troque um pelo outro e você faz o enqueue do style.css do pai uma segunda vez e nunca toca no do filho.
A solução, passo a passo
Primeiro, confirme o que está de fato carregando. Abra a página com problema, veja o código-fonte e procure pelo nome da pasta do seu tema filho. O WordPress renderiza os estilos com enqueue como <link id="handle-css" href="..."> — o id é o seu handle mais -css. Se o style.css do seu tema filho não estiver no <head> de jeito nenhum, o enqueue não está rodando. Se ele estiver lá mas os estilos não se aplicam, é um problema de dependência/ordem. Essa única verificação te diz qual dos dois problemas você tem.
Segundo, descubra o handle real do tema pai. A maioria dos temas modernos (Astra, GeneratePress, os temas Twenty-*) já faz o enqueue da própria folha de estilos sob um handle específico — astra-theme-css, generate-style-css, twenty-twenty-four-style, e por aí vai. Você precisa dessa string exata. Faça um grep no tema pai, ou leia direto do <link id="...-css"> no código-fonte (tirando o -css do final).
Terceiro, escreva o enqueue. No caso comum, em que o tema pai já carrega a própria folha de estilos, você não faz o enqueue do pai de novo. Você faz o enqueue apenas do filho e lista o handle do pai como dependência, para que o seu carregue depois dele:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );
function child_enqueue_styles() {
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'astra-theme-css' ), // <-- the parent's REAL handle
wp_get_theme()->get( 'Version' )
);
}
Se o tema pai não faz o enqueue da própria folha de estilos (alguns temas mais antigos ou minimalistas dependem do @import), então faça o enqueue de ambos e faça o filho depender do pai:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );
function child_enqueue_styles() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'parent-style' ),
wp_get_theme()->get( 'Version' )
);
}
O argumento wp_get_theme()->get('Version') é o seu cache-buster. Suba a linha Version: no cabeçalho do style.css do tema filho e os navegadores baixam tudo de novo. Pule esse passo e você vai editar o CSS e jurar que nada muda, quando na verdade é só o cache.
Se o functions.php tiver um erro de sintaxe, o arquivo inteiro morre silenciosamente e nenhum dos seus enqueues roda — e isso se apresenta exatamente como “estilos não carregam”. Ative o WP_DEBUG, ou cole o seu debug.log no nosso decodificador de log de erros do WordPress para achar o erro crítico rápido.
O que não fazer
Não use @import. O conselho da época do Codex era colocar @import url("../parenttheme/style.css"); no topo do style.css do tema filho. Funciona, mas é lento — o navegador não consegue começar a baixar o CSS do pai enquanto não tiver terminado de interpretar o CSS do filho, então as duas requisições rodam em série em vez de em paralelo. O próprio handbook do WordPress recomenda não fazer isso há anos. Se o seu tutorial mandou fazer assim, é por causa dele que seus estilos estão travando.
Não deixe o handle 'parent-style' chumbado e faça o enqueue do arquivo do pai às cegas. O famoso snippet do Codex faz exatamente isso, e está errado para qualquer tema que já registre a própria folha de estilos sob um handle diferente. Você acaba carregando o CSS do pai duas vezes e a sua dependência aponta para um handle que talvez nem exista.
Não chame wp_enqueue_style no nível superior do functions.php. Ele precisa rodar dentro de uma função ligada ao hook wp_enqueue_scripts. Chamado cedo demais, ele não faz nada.
Não copie o functions.php inteiro do pai para o filho. Os dois carregam; o do filho roda primeiro. Copiar causa declarações de função duplicadas e um erro crítico.
Uma ressalva: tudo isso vale para temas clássicos (com templates PHP). Se o seu tema pai for um tema de blocos, a estilização flui na maior parte pelo theme.json e pelo Editor de Site, e as sobrescritas via style.css se comportam de forma diferente — eu confiaria menos nisso e testaria direto, em vez de assumir que esse enqueue é a solução.
Ainda travado?
Confirme que a linha Template: do cabeçalho do style.css do filho bate exatamente com o nome da pasta do pai, respeitando maiúsculas e minúsculas — não com o nome de exibição do pai. Depois, confira o código-fonte de novo: handle presente, carregando depois do pai, query string de versão atualizada. Se o <link> está lá, carregando por último, e o CSS ainda não se aplica, então não é mais um problema de enqueue — é especificidade, e a solução passa para as próprias regras.