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

  • Darick

    Alors la bravo enfin un tuto complet qui permet de comprendre (en français) le fonctionnement d’un thême de blog WordPress.En tout cas bravo pour ton boulot et merci tu m’as beaucoup aidé en fesant cela. En effet je doit développer un espace Web 2.0 qui sera un mix entre CMS,blog et forum donc un grand merci.

  • seb

    Salut,

    Excellent ce tuto merci mais j’ai un enorme probleme qui est entrain de me faire peter les plombs …. >:(
    J’ai tout bien fait comme c’est expliqué dans le tuto,j’ai créé dans le dossier « themes » un nouveau dossier « Perso01 » dans lequel j’ai créé un dossir « images » et mes fichiers head.php,index.php,sidebar.php,footer.php et style.css.

    Mais avec rien ne s’affiche (juste la petite croix rouge) alors qu’avec des liens externes genre là l’image correspondante s’affiche ???
    J’ai essayé en mettant toute l’adresse C:/…../test.jpg mais ça change rien…

    Help !!!! ça me fout les nerfs !!! depuis hier que je suis là dessus et que je cherche partout sans succès et là je suis sur de pas m’etre planté dans la syntaxe …
    Merci d’avance

    PS:je travaille en local pour l’instant,avec EasyPhP et WordPress 2.2.1

  • seb

    Ooops désolé les codes html sont effacés apparement.
    Je parlais de la balise IMG et avec comme adresse src= »images/test.jpg » versus src= »http://www.site.fr/image.jpg ».

  • Seb > Le problème provient sûrement de ton installation en local…

  • Encore mes felicitations pour cette série de tuto vachement bien réalisée.

    Bonne continuation cher francis

  • Merci VymDiesel, c’est super sympa ! 😉

  • Mike8

    Salut…Vraiment très très bon les tutos…J’ai un petit pb cependan :
    Lorsque je veux accéder à mon espace Administrateur de wordpress (en tapant : »http://localhost/wordpress/wp-login.php » dans mon navigateur) j’ai alors ce message qui apparait au dessus de la boite ou je suis censé tapé username et password :

    « Warning: Cannot modify header information – headers already sent by (output started at C:\xampplite\htdocs\wordpress\wp-content\themes\Creation_theme\functions.php:5) in C:\xampplite\htdocs\wordpress\wp-login.php on line 12 »

    Quelqu’un pourrait-il m’aider ?

  • Mike8 > problème de syntaxe dans le template functions.php, vérifies ton code

  • Salut Fran6, débutant dans le blogging j’ai le probleme suivant (je n’ai pas trouvé de solution sur le net)

    Mon blog : http://stageweb.nostalgie.be (qui est en fait mon rapport de stage) n’affiche pas les accents.

    J’ai modifié le fichier config en laissant charset vide, cela ne change rien.
    J’ai testé avec différent theme, le probleme ne vient pas de l’a.

    On m’a parlé d’un probleme de MYSQL (le probleme est subvenu apres le test des plugins xanthi et text-control … pour essayé de pallier le probleme d’autoformatage de wordpress, qui vire automatiquement mes balises PHP meme quand elles sont entre

    As tu une idée du probleme ?

    Merci

  • salut fran6
    j’ai dévoré les 23 tutoriels (als – aux) en 2 jours, très instructif – merci
    par contre je cite ton intro :
    « 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 »
    j’ai pas trouvé ça et autant te dire que ça m’intéresse drôlement – étant donné que je suis plus photoshop que tout le reste – alors si j’ai raté un lien quelque part merci de me le dire
    à plus

  • 537718> Non non, tu n’as rien loupé. C’est prévu mais j’ai fait un break pendant les vacances et là on s’est attelé au référencement. Mais on va passer à Photoshop avant la fin du mois ! Promis !! Et peut-être même avec des tutos vidéos !

  • haaa chouette alor 😀 j’ai hate, meme si je sais comment cela fonctionne j’aimerai voir de quoi en retourne tes futurs tutoriaux

    Au sinon, je voudrai te demandez si (j’avoue je n’ai pas poussé les recherches et je le ferai mais) tu ne connaissai pas un systeme qui me permettrai d’afficher des news ( que je rédigerai moi meme) sur mon wordpress.

    J’ai penser crée un TEMPLATES news mais je ne pense pas que c’est comme cela que cela fonctionne… ou alors crée une PAGE news.

    Qu’en pense tu ?

  • nouveau template avec un loop où tu ne fais qu’apparaître les articles de la catégorie « news ».

  • Ah vui, je vais regarder, si je n’y arrive pas je te le ferai savoir ^^

    Merci 😀

  • kriss

    Bonsoir Francis

    Encore une fois merci pour ce tutoriel vraiment unique.
    Ca fait bien une semaine que je suis dessus à faire des essais et là je crois que je vois le bout du tunnel.
    Pourtant lorsque j’ai commencé je me suis trouvé bloqué à hauteur de l’exercice 7 ou 8 à cause de 2 lignes de codes manquantes. A force de chercher, j’ai trouvé tout seul comme un grand (j’ai d’ailleurs laissé un commentaire pour ceux à qui ça arrive). Mais arrivé au 17 patatrac le validateur m’a envoyé une bordée d’injures qui ont fait que j’ai tout arrêté et recommencé depuis le début.
    Le second essai ayant vite tourné au vinaigre j’ai arrêté là aussi. En fait je voulais aller plus vite que la musique et refaisait les mêmes couillonnades qu’au premier essai.
    Donc là depuis hier, j’ai tout repris calmement, en faisant des pauses (pas de télé sauf rugby/foot et F1 et pas de minots autour).
    Donc ce soir j’y suis presque en fait c’est depuis midi que j’en suis là. Donc si je dis presque c’est parce qu’il y a un truc qui va pas et j’ai beau chercher, je ne trouve pas. C’est tout simplement le template archive.php qui ne va pas alors que les manip à faire pour le créer sont vraiment pas compliquées.
    1/ J’ai créé le fichier archive.php
    2/ Dedans j’ai copié/collé le contenu de l’index.php
    3/ J’ai remplacé la ligne par
    4/ J’ai enregistré ce fichier, c’est bien ça ?
    Et bien apparemment il y a quelque chose qui coince quelque part. En effet tout s’affiche correctement que ce soit la page de démarrage, la page A propos, les articles, les catégories mais une fois dans les archives le texte prend toute la largeur de la page et renvoie donc la sidebar dessous.
    Comme le gros du contenu de ce template vient de l’index.php je me suis dit j’ai une (ou plusieurs) erreurs dans mon index.php aussi j’ai pris le tien mais c’est idem.
    Est-il possible d’avoir le code de ce template archive.php afin que je le compare avec le mien.
    J’aurais eu une autre question à poser mais j’ai déjà fait assez long comme ça on verra plus tard.
    Déjà si je pouvais arriver à résoudre ce problème ce serait pas mal.
    Encore une fois merci pour ce travail énorme qui m’aura fait cogiter et comprendre pas mal de choses.
    Bonne soirée.

  • kriss

    Aaaah je me suis fait avoir avec le code, je voulais bien sûr dire :
    3/ J’ai remplacé la ligne the_content() par the_excerpt() plus le code autour qui va bien
    🙂

  • Erto

    Excellente initiative que ces didacticiels ! Et en plus, ils sont clairs et précis…
    Je les ai découvert juste au moment où je prévoyais de refaire mon site personnel.

    Jusqu’ici, je me contentais de modifier des thèmes existants, mais grâce à ce blog, je vais me lancer dans la conception d’un thème de A à Z, en partant de rien, ce qui est tout de même plus gratifiant.
    Merci Fran6 ! 🙂

  • thomas

    Salut,

    J’ai suivi attentivement les tutos de création d’untheme sur wordpress… mais je voudrais maintenant le mettre en ligne.
    Je suis chez Nuxit et je voudrais savoir quels fichiers je dois uploader (tout ce qu’il y a dans MAMP ou seulement htdocs+db ou….)
    Merci beaucoup pour tes brillants tutos et pour ton aide

    Thomas

  • thomas > Tu prends le dossier du thème que tu as créé et tu vas aller le copier dans le dossier thèmes du blog sur le serveur. Ensuite, tu vas dans l’onglet du thème et tu l’actives, c’est tout !! 😉

  • nico

    Je cherche qq pour me crée un thème wordpress

    Rémunération : 20 -100 euros suivant le taff

    Mon mail knaike@gmail.com

  • jfh

    Salut 🙂

    Beau travail, mais il me reste une question à poser :
    En cas d’oubli dans le formulaire de commentaires (nom, mail, logg, etc.), WordPress renvoie vers une page d’erreur via la fonction wp_die(‘…’).
    Comment « customiser » cette page pour lui donner le look du thème perso (ce serait pas dans le dossier wp_admin, par hasard) ?
    Je suis preneur d’une réponse !
    jfh

  • jfh > Je regarde ça demain et te tiens au courant ! 😉

  • jul

    Bonjour,

    Un grand merci pour vos tutoriels ! Ils sont vraiment très biens faits. Etant un complet novice j’ai presque tout compris. J’avais juste une question: J’aimerai bien « décoller » le footer de la sidebar afin que ce footer apparaisse à la fin de la page et non pas en-dessous de la sidebar (et en plein sur le texte par la même occasion ;).
    Pourriez-vous m’éclairez un peu sur ce point ?
    D’avance merci beaucoup et bonne journée !

    Jul

Success, your comment is awaiting moderation.