Francis Chouquet Lettering + Logo Design

Créez votre thème WordPress de A à Z

0

Update du 5 Octobre 2011: les tutoriels ont beau datés de 2007, ils sont en cours de modifications pour y ajouter les fonctionnalités des dernières versions de WordPress. Quoi qu’il en soit, ils sont toujours d’actualité et ont été mis à jour plusieurs fois.

Peut-être que vous aimeriez créer votre propre thème pour votre blog et que vous ne savez pas trop comment vous y prendre ? Et bien, dans les semaines qui vont venir, je vais vous expliquer les différentes étapes à suivre, pas à pas, pour que n’importe qui (ou presque) puisse créer son propre thème. On va voir l’installation de WordPress sur votre ordinateur, les différents types de fichiers, leurs hiérarchies, et les interactions entre eux. On va ensuite apprendre à créer un thème relativement simple avec Photoshop et comment l’intégrer dans les différents fichiers. Enfin, on verra comment mettre tout ça en ordre grâce aux fichiers CSS.

Quoi qu’il en soit, quelques petits prérequis seront nécessaires. Mieux vaut avoir quelques connaissances en CSS (Cascading Style Sheets), XHTML, voire php et mysql. Mais pour ces deux derniers, si vous suivez bien les différentes étapes, vous ne devriez pas avoir besoin de tout comprendre. Ce thème va nous mener sur pas mal de semaines, donc je vous demanderai d’être patient 😉 On va évoquer les différentes étapes et aborder aussi bien le design que l’intégration d’un thème sur WordPress. Cet article sera mis à jour au fur et à mesure des articles publiés. Si, au cours de cette thématique vous avez des questions précises, posez-les via les commentaires pour que tout le monde puisse en profiter.

Je ne dis pas que la méthode que je vais présenter est la meilleure mais en tout cas, elle est celle que j’utilise !

« Stay tuned! » comme disent nos amis anglosaxons, les prochains jours et prochaines semaines vont être chargés !

Articles déjà en ligne:

Leçon #1: Installer WordPress en local sur votre ordinateur

Leçon #2: Pourquoi créer son propre thème ?

Leçon #3: Présentation des Templates

Leçon #4: Hiérarchie des Templates

Leçon #5: Création des Templates

Leçon #6: Le Header

Leçon #7: Introduction au Loop WordPress

Leçon #8: Le Loop WordPress, 2ème partie

Leçon #9: Le Loop WordPress, 3ème et dernière partie

Leçon #10: La sidebar: le formulaire de recherche

Leçon #11: La sidebar: Calendrier, Catégories et Pages

Leçon #12: La sidebar: Suite et fin

Leçon #13: Widgetisez votre sidebar pour WordPress 2.2

Leçon #14: Le footer

Leçon #15: Création de « sous-templates »

Leçon #16: Insertion des commentaires

Leçon #17: Navigation, page non trouvée et validation XHTML du thème

Leçon #18: Présentation de la feuille de style (CSS)

Leçon #19: CSS: placement des différentes parties du thème

Leçon #20: CSS: customisation du header et du contenu

Leçon #21: CSS: customisation de la sidebar et du footer

Leçon #22: CSS: customisation des commentaires

Leçon #23: CSS: les liens

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Sources et références utilisées pour la création des différents tutoriels présentés ici:

Fran6

574 Commentaires

  • bonjour,

    j’ai fais mom site avec un thème de wordpress, (NGUYENNGA.COM)
    je souhaiterais avoir un thème personnalisé, quelqu’un pourrait -il me le faire
    Rémunéré
    merci

  • Bonjour Nguyen,

    Je peux me proposer pour réaliser ton thème WordPress.

    Si tu veux que l’on parle de ça plus en détails, n’hésite pas à m’envoyer un email sur mathieu.visiere@free.fr.

    Mathieu.

  • Merci pour le tuto, ca me donne envie de me mettre à wordpress 😉

  • c’est tellement pratique WordPress…mais bon avec ce type de site tout le monde se ressemble..dommage

  • Je débute avec WordPress mais j’ai toujours eu l’habitude de personnaliser au maximum le design de mon blog, alors ce tutoriel m’a sauvé la vie ! J’aurais pu modifier un template préfait, mais c’est vrai que l’avoir fait moi-même avec les étapes expliquées une à une est tout autre chose, et m’a fait gagné beaucoup de temps. Y’a encore beaucoup de boulot, mais je suis pas pressée. D’ailleurs, rien qu’à réfléchir aux heures que vous avez passé sur ce tuto’ me donne le tournis. Donc merci encore !

  • bonjour,
    j’ai créé mon thème il fonctionne parfaitement (presque) grâce à ce tuto. Cependant j’ai ajouté le plugin WP-Email mais celui ci ne fonctionne pas et uniquement avec mon theme 🙁
    j’ai cherché sur le site officiel du plugin mais je n’ai pas trouvé d’info.
    merci d’avance pour les informations.
    Franck

  • Franck > Peut-être oublié le wp_footer() ou wp_head() … ??

  • bonjour,
    a quel endroit j’aurais pu oublier ces fonctions?
    encore merci pour tout.
    Franck

  • @Franck

    C’est à placer dans les fichiers header et footer.php

  • @Anthony
    effectivement il manquait dans le footer.php 🙁
    merci pour le coup de main.
    Franck

  • Bonjour,

    Merci pour ces superbes tutos !
    J’ai quelques questions :
    Comment faire pour afficher un texte de bienvenue que sur la page d’accueil (je l’ai mis sur le index.php mais du coup ça ressort de partout).
    Dans mon design j’ai un pavé avec « Dernier tuto publié » (c’est un site de tuto), comment faire pour obtenir :

    Dernier tuto publié par … (quel appel php ?) sur : …. (titre du billet)…

    Par avance merci !

    encore merci !

    A+

  • J’ai un ami qui travail dans les vitres teintées auto et qui m’a recommandé cet article. Merci beaucoup en tout cas pour ces tuto, car depuis le temps que je cherche quelque chose de clair pour me guider, ca valait la peine d’attendre. Ceci dit, je pense que passer par un professionnel peut être un gain de temps car bien que cela n’a pas l’air très dure, il faut de la patience, chose rare lorsque l’on se lance dans la création d’un site…

    Entre le contenu et le design, c’est chaud !

  • Merci pour ces tutos et le temps passé à les créer, ça m’a pas mal éclairé!

  • trop bien igoogle marent les temes c’est trop bien parce que quand internet va pas ta igoogle qui va c’est tou

    le 14 fevrier 2011

  • moi je n’ai pas créer de thème, j’aime bien utilisé les standards, ce n’est pas important moi je trouve!

  • sébastien

    Bonsoir,

    J’ai une belle question à dix points.

    J’ai pour projet de réaliser un site wordpress dans un cadre de tableau comme vous pouvez le voir ici : http://www.bluespread.com/MULBERRY/test

    Je souhaiterais que mon content puisse être aux dimensions exactes de l’espace vide dans le cadre et que, même si le site est resizé, que tout colle ( fond et content).

    J’

  • sébastien

    zut, j’ai tapé sur ENTER sans faire gaffe… bref, donc, je pensais à un plug qui puisse permettre cela en mode visuel via le dash WP :

    On arrive sur la page en mode visuel, on a le content avec des poignées de resizing, on le fait coller aux dimensions que l’on veut, on applique et hop, emballé.

    Une telle option ou plug serait vraiment super et, à mon avis, aiderait plus d’une personne !!

    Rien à voir avec la choucroute : qqun connait-il un bon news rotator en widget? ( un widget qui prenne des catégories en source et affiche les dernières publications en slidant).

    Merci pour votre attention !

    Seb

  • Joce

    Bonjour Francis,
    D’abord merci pour ce tuto très bien expliqué. Merci de prendre du temps pour partager vos connaissances. Ca fait du bien car je galère depuis deux ans pour m’autoformer et quand je coince vraiment je suis obligée de m’adresser à un formateur qui me prend 50 € de l’heure à un prix d’ami.

    J’aurais quelques questions qui me bloquent. Mon projet est de réaliser un site et non un blog (j’ai donc laissé de côté les commentaires, les catégories, les articles…)
    J’ai créé toutes mes pages et après je me suis lancée dans la création d’un thème avec votre tuto.
    Après trois tentatives, ça y est j’ai l’image de fond de ma page d’accueil + les textes en enfilade.
    Le problème est que tous les textes que j’ai insérés dans ma page d’accueil sont à gauche. J’aurais aimé qu’un texte soit dans le contenu et un autre dans la sidebar à droite.
    et aussi la description du header à laquelle j’ai appliqué un css apparaît sous le header… alors que je n’ai pas demandé de marge haute.
    Dernière question : comment faire apparaître un menu horizontal dans le header des autres pages que l’accueil ?
    J’espère que vous voudrez bien m’aider. Et en attendant encore un grand merci pour tout…
    Joce

  • Je tenais à te remercier pour ce tuto, grâce à toi j’ai enfin pu me créer mon propre blog ! Je t’ai même fait un hommage dans mon tout premier article 🙂

  • Salut, d’abord merci pour ton super tutos, qui ma permis d’aprendre à faire mon propre thème wordpress en une journée. Par contre je rencontre un petit problème. a barre d’administration qui existe depuis la version 3.1, ne s’affiche pas sur le haut de mon thème lorsque je me connecte. Par contre lorsque je me connecte j’ai bien une marge de 28px qui s’ajoute en haut mais la barre ne s’affiche pas. Y a t-il une configuration spécial à faire. Tout les tutos que j’ai trouvé sur le web parle de comment désactiver cette barre mais pas comment l’afficher au cas où celle ci ne s’afficherait pas.

  • oui je suis d’accord avec ça

  • J’ai trouvé la solution à mon problème (la barre admin qui ne s’affiche pas).
    il suffit d’appeler la fonction wp_footer() juste avant la balise à la fin du template !!

  • Ana

    Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii!
    IN-DIS-PEN-SA-BLE!
    Merci merci merci, merci!

  • Bonjour, tout le monde! J’ai deux question un peu conne à poser!

    Tout d’abord, est-ce possible de changer la sidebar d’une section à l’autre?

    En suite, sommes-nous obligés (d’un point de vu légal) d’indiquer que le site a été réalisé sous WordPress?

  • Oui, tu peux changer la sidebar en créant des modèles de page et en incluant une autre sidebar. Il me semble que c’est expliqué dans les tutos. Concernant le fait de dire légalement que c’est un site sous WordPress, non, tu n’as pas besoin de le faire.

Success, your comment is awaiting moderation.