Développer un thème WordPress n’est pas forcément chose facile. Mais ce n’est pas non plus sorcier si on sait par où commencer ! 🙂 Dans cet article, je vais vous détailler mon process pour développer un thème. Ce n’est pas forcément LA solution ni LA roadmap ultime, mais c’est un process qui fonctionne pour moi, et me permet de garder le cap, donc pourquoi pas vous ? Let’s go !

Pour qui développer le thème ?

La première question est de savoir pour quel type d’utilisateurs vous allez développer. Ça peut être des blogueurs, des photographes, des petits business, ou bien vous-même pour commencer. Si vous savez pour qui vous développez, alors vous aurez une idée plus claire des fonctionnalités à développer.

Attention, quand je parle de fonctionnalités, je ne parle pas forcément de fonctionnalités complexes. Je parle surtout de fonctionnalités d’affichage, car un thème WordPress n’est supposé s’occuper que de l’affichage de votre site. Vous n’êtes pas censé créer de type de contenu personnalisés dans vos thèmes, par exemple. C’est de l’ordre du “Plugin Territory”.

Donc oui, les thèmes “pro” achetés sur certaines grosses boutiques de thème (comme celle de la forêt, pour ne pas la nommer) ont tout faux. Ils fournissent un gros package bien lourd qui déclare trois types de contenus, le support pour telles ou telles extensions qu’il vous propose d’installer immédiatement, deux cent options et trente-sept démos différentes installables en un clic, qui vous allez innocemment faire et blinder votre site et base de donnée dés le départ.

Bref, je m’égare.

Pour résumer, un thème n’est pas censé complexifier l’administration de votre site. Ou du moins le moins possible. Un thème c’est pour s’occuper de l’affichage du site. Une extension ajoute une fonctionnalité.

Mais il faut quand même réfléchir à votre utilisateur cible et son besoin. Par exemple, un thème pour photographe va forcément s’occuper des images d’une certaine manière et va peut-être proposer quelques réglages concernant les images à la une et les galeries.

Pas besoin de penser à mille fonctionnalités. Une ou deux suffisent pour commencer à faire quelque chose d’intéressant. La question est donc : quelle est la fonctionnalité principale du thème ? Qu’a-t-il de particulier ?

Souvent, on commence par se servir soi-même, et on développe un thème pour son propre site. Du coup la question est un peu plus simple : de quoi ai-je besoin pour mon site ?

Par exemple, je ne suis pas doué pour les images. Cela me saoule un peu de devoir chercher des images à la une. Donc pour mon thème Kawi, je me suis arrangé pour qu’il soit agréable visuellement même sans image à la une. Et s’il y en a, le thème permet de les afficher en petit sur le blog pour des raisons de performance. Aussi, je compte bien développer une fonctionnalité d’image à la une par catégorie. Du coup, tous les articles de la même catégorie auront la même vignette. Cela fait moins d’image à choisir.

Le brouillon

Maintenant, vous pouvez prendre un papier et un crayon, et essayer de dessiner les mises en page que vous souhaitez créer. Sans aller dans le détail, tracez vos cadres, dessinez votre navigation, disposez votre contenu, le footer, etc…

Le but est juste d’itérer quelques idées de mise en page. Le papier est très pratique, car si on se trompe ou change d’avis, il suffit de gommer ou jeter la feuille. Ici, on est plus dans une démarche de brainstorming. Donc on n’hésite pas: on dépose notre idée sur le papier, si c’est bien on garde, sinon on jette.

Le prototype

Le but est maintenant de travailler sur une maquette de votre nouveau thème WordPress. Quelques pages clés suffisent, pas besoin de maquetter tout le site. La page d’accueil, une page article, une page standard, et une page de listing suffisent pour commencer.

Vous pouvez faire cela dans un logiciel de conception graphique comme Affinity ou Illustrator, ou directement en HTML/CSS.

Personnellement, je travaille direct en HTML/CSS. Ça me permet de gagner un peu de temps et d’avoir une bonne partie de l’HTML, du CSS et du JS déjà fait quand je passe sous WordPress.

Aussi, pensez à travailler par itérations, en allant du général vers le particulier. C’est-à-dire qu’il ne faut pas dans un premier temps passer trop de temps sur les ombres, ou les filtres CSS que vous allez appliquer sur les images.

Faites d’abord une passe simple ou vous codez l’HTML et le CSS basiques de mise en page. Puis on s’occupe d’ajuster la typographie, les espacements, les images. Puis on revient sur la typographie et on affine, on ajoute des ombres, etc… Le process de développement/création n’est pas linéaire, loin de là !

Du prototype statique vers le thème WordPress

Une fois votre prototype dans une forme satisfaisante, vous pouvez commencer le développement du thème à proprement parler. Vous avez juste besoin d’une installation locale de WordPress toute fraîche.

Pour commencer rapidement, voici une liste des premières tâches :

  • Créez un dossier pour votre thème
  • Copiez-y votre prototype pour l’avoir plus facilement sous le coude.
  • Créez un fichier style.css avec les informations nécessaires dans son entête pour que WordPress le reconnaisse.
  • Créez un fichier index.php et copiez-collez le contenu de votre page listing/blog.
  • Créez les fichiers header.php, footer.php et sidebar.php (si besoin), découpez votre index.php et ajoutez les fonctions indispensables wp_head() dans header.php et wp_footer() dans footer.php
  • Ajoutez les fonctions get_header(), get_footer(), et get_sidebar() qui vont bien dans index.php pour appeler ces templates.
  • Ajoutez un fichier functions.php, qui va charger votre feuille de style et les scripts correctement.

Maintenant il vous reste à remplacer votre contenu en dur par les templates tags de WordPress et à ajouter le support pour les fonctionnalités nécessaires.

Dans un second temps, vous créerez les différents templates utilisés par le thème: page.php, single.php, archive.php, etc…

L’objectif de cet article n’est pas de donner tous les détails de création mais de proposer une vue d’ensemble du process. Si vous voulez les détails, j’ai une série d’articles à ce sujet !

Les fonctionnalités du thème: coder ou ne pas coder ?

Une fois les templates de base mis en place, vous pouvez vous atteler aux différentes fonctionnalités spécifique au thème.

Mais pour certains aspects, on peut se poser la question de la nécessité de coder le support pour telle ou telle fonctionnalité.

Par exemple, si vous développez un thème pour votre site personnel, vous pouvez vous permettre de laisser le logo dans les fichiers du thème et de l’inclure en dur dans le header, sans ajouter le support pour les logos personnalisés de WordPress. Si vous devez changer de logo, vous pouvez toujours ouvrir les fichiers du thème et le changer directement.

Par contre, si vous voulez publier le thème sur le répertoire officiel de WordPress, alors il faut ajouter le support pour cette fonctionnalité. Les utilisateurs s’attendent à pouvoir changer leur logo, et WordPress a prévu une interface pour ce faire dans l’outil de personnalisation. Il faut donc prévoir cette fonctionnalité.

Autre exemple: sur votre page de listing des articles, vous affichez uniquement la date de publication et le titre des articles en entête. Pas de souci pour votre site ou celui d’un client, mais les utilisateurs téléchargeant votre thème sur le répertoire s’attendent surement à pouvoir afficher la catégorie quelque part. Il faut donc prévoir dans votre design l’affichage de toutes les métadonnées et taxonomies de WordPress.

On en revient à la question initiale : qui va utiliser ce thème ? Non seulement cette question informe les fonctionnalités spécifiques à votre thème à inclure, mais aussi celles plus générales liées à WordPress et son interface.

Vous pouvez parfaitement publier un thème sur le répertoire officiel de WordPress qui ne gère pas les images à la une. Il suffit de bien le spécifier. Mais vu que c’est une fonctionnalité de base de WordPress, cela risque de décevoir bon nombre d’utilisateurs.

C’est la raison pour laquelle il ne faut pas aller trop loin dans le prototype. Celui-ci va bouger et vous allez surement devoir ajuster le design à cause des contraintes spécifiques à WordPress.

Conclusion

Concevoir un thème commence par une question simple : pour qui suis-je en train de développer ? Cela va vous permettre de déterminer les fonctionnalités uniques du thème.

Aussi, un brouillon papier puis prototype rapide va vous permettre de mettre en forme vos idées, et de gagner du temps lorsque vous passerez au développement à proprement parler.

Le temps de développement du thème va se révéler plus ou moins long et complexe selon le type d’utilisateurs visés, et selon si le thème est à usage personnel, unique (pour un client) ou si vous désirez le publier sur le répertoire officiel.

Publier pour le répertoire officiel a ses propres contraintes, que je détaillerai dans un autre article, et cela peut-être une bonne idée de les prendre en considération le plus tôt possible.

Merci d’avoir suivi jusqu’au bout ! Si vous avez une question/remarque, n’hésitez pas à laisser un commentaire !

@+ !

PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !