On va maintenant créer la structure de code minimale qui va nous permettre de déclarer notre thème afin de l’activer dans l’interface d’administration de WordPress.
Sommaire du cours
Minimum pour déclarer son thème
Allez c’est parti ! C’est le moment de s’équiper de son éditeur de code favori. Comme je disais dans le cours sur les outils, j’aime beaucoup VSC, mais pour coder PHP Storm est pas mal non plus.
En tout premier lieu, on va se rendre dans le dossier wp-content/themes
de notre site WordPress et créer un nouveau dossier qui va accueillir les fichiers de notre thème.
Je l’appelle capitaine
puis je l’ouvre avec mon éditeur de code. On va créer quelques fichiers :
- index.php, requis, qui contiendra pour l’instant l’unique page de notre thème ;
- style.css , requis, qui va contenir nos styles mais aussi déclarer notre thème à WordPress ;
- functions.php, dans lequel on va pouvoir activer et ajouter des fonctionnalités ;
- screenshot.png qui permet d’afficher un aperçu du thème dans l’interface d’administration de WordPress et qui doit faire 880×660 pixels. Téléchargez le mien ici.

Oui vous avez bien lu : c’est style.css
qui permet à WordPress de savoir que c’est un thème, grâce aux quelques commentaires que l’on va insérer dedans.
En fait WordPress considère qu’un thème aura toujours a minima une feuille de style, d’où le fait qu’il ait choisi le fichier CSS pour déclarer les informations du thème.
Dans le fichier Style.css
Dans la feuille de style j’ajoute :
On indique le nom du thème, son auteur, une description et le numéro de version.
Dans le fichier index.php
Puis, dans le fichier index.php
on va se contenter du minimum syndical :
Pour l’instant on reste simple, on va juste afficher « Coucou ».
Dans le fichier functions.php
Ce fichier est essentiel puisque c’est ici que l’on va activer toutes les fonctionnalités nécessaires de WordPress, mais également ajouter nos propres fonctions sur mesure.
Pour le moment, on va simplement demander à WordPress 2 choses :
En effet, cela pourrait laisser trainer un espace à la fin, ce qui enclencherait prématurément le rendu de la page alors que WordPress n’est pas encore totalement initialisé, générant ainsi des erreurs PHP comme Headers already sent
.
Activer la gestion des images mises en avant
La première chose que l’on demande, c’est d’activer la prise en charge des images mise en avant pour le blog. Ce sont les visuels qui accompagnent l’article et son résumé, anciennement appelés « image à la une » et en anglais les post thumbnails.
Cela aura pour rôle d’ajouter la metabox suivante dans votre éditeur de contenu :

Les images mises en avant seront abordées plus tard, dans un cours qui leur seront dédié.
Activer la gestion automatique du titre de la page
On lui demande également de créer automatiquement la balise <title>
dans l’en-tête. C’est le titre qui apparaît dans l’onglet du navigateur, il est d’ailleurs important pour le référencement naturel.
Par défaut WordPress va simplement afficher à la suite les valeurs Titre du site et Slogan définies dans Réglages > Général. À terme on aura ça :

Tous les préparatifs sont terminés, il ne nous reste plus qu’à…
Activer le thème
On a fait le minimum syndical pour notre thème, mais cela suffira amplement pour le moment. On va donc aller l’activer. Pour cela rendez-vous dans la rubrique Apparence / Thèmes de votre interface d’administration :

Si vous n’avez pas fait d’erreur, le thème devrait être listé. Cliquez sur Activer.
Si tout est bon, rendez-vous sur le site afin de voir le résultat :

Ohlala ! Un truc de fou ! Bon déçu(e) ? Je vous comprend, pour l’instant notre thème ne fait pas grand chose… En plus il n’affiche même pas le titre du site, pour l’instant. Mais patience, ça prendra forme dès le prochain cours !
Et voilà, les bases sont posées ! Dans les prochains cours on va ajouter de l’interactivité et du design à ce thème qui fait pour le moment pâle figure.
Michèle
Le 26 juin 2019
Bonjour Maxime alias Capitaine ! Une question : vous parlez du screenshot de thème à concenvoir en 880×660 px. J’ai lu sur d’autres tutos : 1200×900 px, donc un rapport de 1,33. Est-ce rapport à respecter pour le visuel ou bien les dimensions exactes ? Merci de votre réponse. Michèle
Maxime BJ
Le 26 juin 2019
Ca doit être les nouveaux formats retina. Je vais essayer et mettre à jour mon texte ! Mais oui tant que le ratio est respecté c’est bon !
Maëva BARÉ
Le 1 avril 2020
Bonjour, j’ai un problème je n’arrive pas à activer mon thème, j’ai pourtant vérifier chaque feuille créée ici, ça fait 2 jours que je cherche, pouvez-vous m’aider s’il vous plait ?
Quand je vais dans appareance>themes> c’est écrit en bas :
Broken Theme:
The following themes are installed but incomplete.
Name
Description :
maevabaretheme
Stylesheet is missing.
Maxime BJ
Le 1 avril 2020
D’après le message d’erreur il manque la feuille de style (avec les bonnes informations dedans). Tu as bien vérifié le nom du fichier CSS ? Tu as bien mis les bonnes instructions dedans en commentaire CSS ?
Emmanuel
Le 11 mai 2020
Bonjour Maxime
Je ne retrouve pas la metabox « image mise en avant » qui , si j’ai bien compris devrait se trouver dans réglages et avant permaliens.
J’ai pourtant bien le même fichier functions.php que vous.
Qu’en pensez vous ?
Merci pour cette formation dont j’attends la formule premium avec impatience.
Maxime BJ
Le 11 mai 2020
Elle devrait apparaitre. Tu as testé sur les pages et les articles ?
Serain
Le 26 mars 2021
J’ai le même soucis pour les articles. Je n’ai pas la possibilité de mettre une image en avant.
Maxime BJ
Le 26 mars 2021
Tu as bien ajouté add_theme_support( ‘post-thumbnails’ ); dans ton functions.php ? Normalement c’est tout ce qu’il y a à faire. vérifie que c’est le bon thème activé, et que WordPress exécute bien ce fichier (en essayant de mettre un var_dump(‘coucou’); par exemple).
Emmanuel
Le 11 mai 2020
J’ai trouvé, je ne la cherchais pas au bon endroit, je suis désolé pour le temps perdu.
Merci encore pour cette formation rarissime et de qualité.
Lolo
Le 30 juin 2020
Bonjour,
J’ai développé un site en dur et pour des raisons techniques nous devons le passer sur WordPress.
Il fonctionnait très bien mais une fois sur WordPress, impossible de faire fonctionner la fiche css (qui est bien à la racine). Je pense que le problème viens de mon code dans mon fichier functions.php mais je ne trouve pas ..
Quel code dois-je mettre pour que le css fonctionne ?
Merci
Maxime BJ
Le 30 juin 2020
On voit ça justement dans les prochains cours ! (Charger les scripts et styles).
William
Le 2 novembre 2020
Bonsoir, et tout d’abord un immense merci pour cette formation de très grande qualité ! J’ai un problème avec l’image mise en avant qui n’apparait pas sur une page de mon thème (mais qui apparait bien lorsque j’active l’un des autres thèmes par défaut de WordPress). J’ai pourtant le même fichier functions.php que vous et j’ai bien inséré dans mon fichier page.php… Au secours !
Maxime BJ
Le 3 novembre 2020
Vérifies que tu aies bien
add_theme_support( 'post-thumbnails' );
dans ton functions.php. Puis ensuite dans page.phpthe_post_thumbnail()
; (dans la boucle WordPress). Normalement ça suffit pour la faire afficher.Yann
Le 21 décembre 2020
Bonjour et tout d’abord merci pour ce travail! Apres avoir lu une bonne partie de la formation et avoir essayé quelques tests, j’ai un problème avec ma feuille de style, peu importe ce que je met dedans, rien n’affecte les pages php… merci d’avance si tu peux m’aider.
Maxime BJ
Le 21 décembre 2020
Si tu suis les cours dans l’ordre, c’est normal : on n’a pas encore appelé les ressources (scripts, styles). On le verra dans un prochain cours.
hugogogo
Le 18 septembre 2021
salut maxime, merci encore pour ce cours, c’est vraiment trop bien j’ai galéré avant de le trouver !
il y a deux choses qui m’ont interrogés sur ce chapitre :
1 – d’abord quand tu presentes la possibilité d’ajouter la prise en charge des images mises en avant, tu n’explique pas bien ce que c’est, je ne comprenais pas j’ai donc été cherché l’info et j’ai trouvé ce site qui explique bien, mais je pense que ce serait super si tu ajoutais un paragraphe d’explication.
2 – et quand tu montres le texte a rajouter dans le fichier style.css tu n’expliques pas les deux lignes d’URI, pour moi ce n’etait pas clair du tout leur role, j’ai donc trouvé l’info sur ce site et j’ai vu aussi qu’elles n’étaient pas obligatoires.
par contre, j’ai vu aussi que tu ne mettais pas 5 entrées qui sont apparement obligatoires (‘Tested up to’, ‘Requires PHP’, ‘License’, ‘License URI’, et ‘Text Domain’), comment ca se fait ? au final quelles sont les infos obligatoires a mettre dans ce fichier css et pourquoi elles sont obligatoires ? c’est pas très clair pour moi
Maxime BJ
Le 18 septembre 2021
Concernant les images mises en avant, il y a un cours dédié à ce sujet plus tard. Chaque chose en son temps ! J’ajoute une phrase dans le cours pour l’indiquer aux plus impatients.
Les informations du thème ne sont pas très importantes lorsque tu fais un thème maison. Elles le sont par contre si tu créées un thème destiné à être publié sur le répertoire officiel, car celui-ci se basera sur les informations présentes dans le CSS.
C’est pour cette raison que je ne vais pas plus dans les détails : c’est inutile ici. Mais si tu veux en savoir plus, tu peux consulter la documentation officielle de WordPress.