WordPress: come caricare per ultimo il CSS del tema figlio

Wordpress e CSS In WordPress è importante utilizzare i temi figli, cioè dei temi personalizzabili derivati da un tema genitore dal quale ereditano tutte le caratteristiche (layout, CSS, ecc).
L’utilizzo di un tema figlio permette di personalizzare il layout agendo sui template e sul CSS senza modificare in alcun modo il tema genitore.
Il metodo corretto per generare un tema figlio è descritto in questo articolo.

Il problema che può capitare è che talvolta (dipendentemente da come è stato scritto il tema padre) il caricamento del foglio stile (CSS) del tema figlio non avvenga in cascata a quelli del tema padre. Dunque le regole impostate nel CSS del tema figlio vengono sovrascritte da quello del padre e le personalizzazioni non vengono eseguite se non con il deprecabile uso intensivo della direttiva !important.
La soluzione a questo problema è di de-registrare ed eliminare dalla coda di caricamento il CSS del tema figlio con alta priorità, caricare il CSS del tema padre ed infine con bassissima priorità (in fondo alla coda di caricamento) far caricare il CSS del tema figlio.
Utilizzeremo le funzioni WordPress: wp_deregister_style() e wp_dequeue_style() e l’hook add_action() per intercettare il caricamento dei fogli stile.

Ecco il codice da inserire nel file functions.php del tema figlio:

1
2
3
4
5
6
7
8
9
10
11
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 0 );
function enqueue_parent_theme_style() {
    wp_dequeue_style(get_stylesheet_directory_uri().'/style.css');
	wp_deregister_style(get_stylesheet_directory_uri().'/style.css');	
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 999999 );
function enqueue_child_theme_style() {
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css' );
}

credits immagine: https://www.flickr.com/photos/abinash/12101405813