Formation « Développer un thème WordPress sur-mesure (Classique) »

Créer la base de son thème WordPress

Lecture : 4 minutes • 17

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.

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.
le dossier de notre premier thème et les deux fichiers obligatoires
Le dossier contenant les bases de notre thème

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 :

CSS
styles.css

On indique le nom du thème, son auteur, une description et le numéro de version.

Attention

Ne mettez pas d’espace avant les deux points « : », sinon ça ne fonctionnera pas !

Dans le fichier index.php

Puis, dans le fichier index.php on va se contenter du minimum syndical :

PHP
index.php

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 :

PHP
functions.php

Attention

Dans les fichiers qui contiennent exclusivement du PHP, comme functions.php, on ne referme pas la balise PHP à la fin du fichier.

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 :

l'interface d'ajout d'une image mise en avant dans WordPress
Vous pourrez alors choisir une image mise en avant pour chacun de vos articles

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.

Conseil

En laissant la gestion du titre à WordPress, il pourra être dynamique et différent pour chaque page. Une extension SEO comme Yoast pourra du coup venir écrire des titres optimisés pour le référencement.

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 :

Le titre du site ainsi que le slogan s'affichent dans l'onglet du navigateur.
Le titre et le slogan, affichés dans l’onglet via la balise <title>

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 :

Notre thème apparaît dans l'interface d'administration de WordPress
Votre nouveau thème devrait apparaître dans la liste

Si vous n’avez pas fait d’erreur, le thème devrait être listé. Cliquez sur Activer.

En cas d’erreur

Si le thème n’apparaît pas dans la liste, vérifiez :
– que vous avez bien enregistré vos fichiers ;
– dans le bon dossier ;
– dans style.css, il ne faut pas mettre d’espace avant les deux points « : » ;
– que vous avez correctement écrit les commentaires « /* */ ».

Si tout est bon, rendez-vous sur le site afin de voir le résultat :

Le thème est activé mais pour l'instant, il n'affiche pas grand chose, à part Coucou !
Que c’est beau !

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 !

Conseil

Afin d’éviter des allers-retours incessants entre l’admin WordPress et le site, je vous propose d’ouvrir en permanence 2 onglets dans votre navigateur : un pour l’interface d’administration, et l’autre pour afficher la partie publique.


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.

17

Questions, réponses et commentaires

  1. 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

    1. 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 !

  2. 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.

    1. 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 ?

  3. 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.

    1. Maxime BJ

      Le 11 mai 2020

      Elle devrait apparaitre. Tu as testé sur les pages et les articles ?

      1. 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.

        1. 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).

      2. 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é.

  4. 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

    1. Maxime BJ

      Le 30 juin 2020

      On voit ça justement dans les prochains cours ! (Charger les scripts et styles).

  5. 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 !

    1. 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.php the_post_thumbnail(); (dans la boucle WordPress). Normalement ça suffit pour la faire afficher.

  6. 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.

    1. 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.

  7. 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

    1. 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.

Laisser un commentaire