Chapitre 6.1 — Anatomie d’un thème classique

⏱️ TL;DR — Un thème classique minimal, c’est deux fichiers : style.css (avec un en-tête de commentaire qui déclare le thème) et index.php (le gabarit universel). En pratique on ajoute functions.php (le code du thème : supports, menus, enqueue) et des fichiers de template spécialisés (header.php, footer.php, single.php, page.php, archive.php…) suivant la template hierarchy (Partie 5). Le thème vit dans wp-content/themes/mon-theme/.

🎯 Objectifs

Créer un thème classique minimal et l’activer.
Comprendre le rôle de style.css, index.php, functions.php.
Découper un thème en templates (header, footer, single…).
Déclarer les supports de thème essentiels.

1. Le minimum vital

Un thème valide requiert deux fichiers dans wp-content/themes/mon-theme/ :

style.css — l’en-tête déclare le thème à WordPress :


/*
Theme Name: Mon Thème
Theme URI: https://exemple.com/mon-theme
Author: Vous
Description: Un thème classique de démonstration.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: mon-theme
License: GPL-2.0-or-later
*/
 
/* …vos styles… */

index.php — le gabarit universel (filet de sécurité, ch. 5.4) :


<?php get_header(); ?>
 
<main>
<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_content(); ?>
        </article>
    <?php endwhile;
else :
    echo '<p>Aucun contenu.</p>';
endif;
?>
</main>
 
<?php get_footer(); ?>

Avec ces deux fichiers, le thème apparaît dans Apparence → Thèmes et fonctionne. Ajoutez une capture screenshot.png (1200×900 recommandé) pour l’aperçu.

⚠️ Piège — L’en-tête de style.css n’est pas décoratif : sans Theme Name, WordPress ne reconnaît pas le dossier comme un thème. Et le Text Domain doit correspondre au slug pour l’internationalisation (Partie 7 : i18n).

2. `functions.php` : le cerveau du thème

functions.php est chargé au bootstrap (Partie 5) : c’est là qu’on branche les hooks du thème.


<?php
add_action( 'after_setup_theme', 'montheme_setup' );
function montheme_setup() {
    // Le thème gère le <title>
    add_theme_support( 'title-tag' );
    // Images mises en avant
    add_theme_support( 'post-thumbnails' );
    // HTML5 pour les éléments générés
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'gallery', 'caption' ) );
    // Styles de l'éditeur alignés sur le front
    add_theme_support( 'editor-styles' );
    add_theme_support( 'responsive-embeds' );
 
    // Emplacements de menu (ch. 2.4)
    register_nav_menus( array(
        'primary' => __( 'Menu principal', 'mon-theme' ),
        'footer'  => __( 'Menu du pied de page', 'mon-theme' ),
    ) );
}

⚠️ Piège — functions.php s’exécute globalement : une erreur fatale ici casse tout le site (et l’admin). Préfixez vos fonctions (montheme_…) pour éviter les collisions, et testez avec WP_DEBUG activé. Ne mettez ici que le code lié à l’apparence — le reste va dans un plugin (ch. 4.4).

3. Découper en templates

On factorise les parties communes avec get_header(), get_footer(), get_sidebar() et get_template_part() (ch. 6.2).


mon-theme/
├── style.css          ← en-tête + styles
├── functions.php      ← code du thème
├── index.php          ← gabarit universel
├── header.php         ← <head> + ouverture <body> + en-tête (get_header)
├── footer.php         ← pied + wp_footer (get_footer)
├── single.php         ← un article seul
├── page.php           ← une page
├── archive.php        ← listes (catégorie, tag, CPT…)
├── 404.php            ← page introuvable
└── screenshot.png     ← aperçu

header.php (essentiel) :


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); // ⚠️ OBLIGATOIRE ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</header>

footer.php :


<footer><!-- … --></footer>
<?php wp_footer(); // ⚠️ OBLIGATOIRE ?>
</body>
</html>

⚠️ Piège critique — wp_head() et wp_footer(). Ces deux appels sont obligatoires : c’est par eux que WordPress (et les plugins) injectent CSS, JS, balises SEO, la barre d’admin. Un thème qui les oublie casse la moitié des plugins et l’enqueue (ch. 6.4). Ne les supprimez jamais.

4. Le lien avec la template hierarchy

Chaque fichier de template correspond à une vue (Partie 5, ch. 5.4) : single.php pour un article, archive.php pour une liste, 404.php pour l’erreur. WordPress choisit automatiquement le bon fichier selon la cascade. Vous commencez minimal (index.php) puis spécialisez en ajoutant des fichiers.

💡 Pour un dev React — Un thème classique est un ensemble de templates serveur (comme des composants de page rendus côté serveur), avec get_header/get_footer = un layout partagé (<Layout>{children}</Layout>), et get_template_part = des partials/composants réutilisables. La différence : pas de props explicites, mais le contexte global du post (la Boucle, ch. 5.3). L’organisation en fichiers par type de vue vous parlera immédiatement.

5. Activer et tester

Déposez le dossier dans wp-content/themes/, activez dans Apparence → Thèmes (ou wp theme activate mon-theme).
Testez avec WP_DEBUG (ch. 4.5) : un thème propre ne génère aucune notice.
Vérifiez la présence de wp_head()/wp_footer() (sinon enqueue et plugins cassés).

✏️ Exercices

Quels sont les deux fichiers minimaux d’un thème classique, et à quoi sert l’en-tête de style.css ?
Pourquoi ne doit-on jamais oublier wp_head() et wp_footer() ?
Où placeriez-vous du code de « supports » (post-thumbnails, menus) et pourquoi pas dans index.php ?

✅ Solution

style.css (dont l’en-tête de commentaire déclare le thème : Theme Name, version, etc. — sans lui WordPress ne le reconnaît pas) et index.php (le gabarit universel qui affiche le contenu).
Parce que WordPress et les plugins injectent par ces hooks les CSS/JS (enqueue), balises SEO, la barre d’admin. Les omettre casse l’enqueue et de nombreux plugins.
Dans functions.php, branché sur after_setup_theme : c’est le fichier de code du thème, chargé une fois au bootstrap. index.php est un template de rendu, pas l’endroit pour la configuration.

🧠 Quiz de révision

1. Quels fichiers rendent un thème valide au minimum ?

style.css (avec son en-tête) et index.php.

2. À quoi sert functions.php ?

À contenir le code du thème : supports, menus, enqueue, hooks — chargé au bootstrap.

3. Quels appels sont obligatoires dans header/footer ?

wp_head() (dans <head>) et wp_footer() (avant </body>).

4. Comment le thème sait-il quel fichier afficher ?

Via la template hierarchy (Partie 5) : WordPress choisit le fichier le plus spécifique existant.

5. Où déclare-t-on le support des images mises en avant ?

Dans functions.php : add_theme_support( 'post-thumbnails' ) (sur after_setup_theme).

Chapitre suivant : Template tags & conditional tags.