Update: J’ai décidé d’aller plus loin dans les tutoriels en proposant une toute nouvelle série de tutoriels pour réaliser le design de votre blog. Donc, une fois que vous aurez fini tous les tutos proposés ici, n’oubliez pas d’aller voir la suite ici, où l’on utilisera notamment Photoshop pour réaliser un blog unique, le vôtre.
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 #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 #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
Deuxième partie: Création du design avec Photoshop:
Présentation de la partie créative du projet
Leçon n°1: Tout commence avec un croquis !
Leçon n°2: Réflexions autour du design d’un blog… !
Sources et références utilisées pour la création des différents tutoriels présentés ici:
Por fin !!! comme diraient nos amis españols
trêve de bavardage! au boulot man, on y croyait plus
(rien de tel qu’un tit coup de pression supplémentaire pour accélerer les choses)
Ouaip, j’en ai bien besoin parfois !!! Ben là, ça semble bien parti !! Demain, première leçon !!!!
:D
C’est bien! Ceux qui ont déjà créé leur propre thème vont peut être aussi apprendre quelques trucs.
Pour ma part je suis parti d’un K2 3 column que j’ai un peu modifié surtout au niveau des css. Avant j’avais mon propre thème monté tout à la main mais j’avais envie d’Ajax. Et comme j’avais pas trop envie de me charger de plugin, j’ai préféré partir d’une base K2. C’est quand même plus simple et rapide que de tout refaire.
ca c’est un bon teasing!
I have a dream
et ce rêve est entrain de se réaliser
merci francis
ciao
Oh ben dites donc, si j’avais su que ça allait faire plaisir comme ça, je me serais bougé plus tôt !!!
N’hésitez pas à communiquer ce nouveau thème autour de vous. Plus on sera nombreux, plus les échanges seront intéressants !!
salut
super idée…j’attends avec impatience les premières leçons de master Fran6 !
cool cool
LOmiG
Lomig> Le premier est déjà en ligne my friend !!
Tutorial excellent, j’attends avec impatience la partie sur la sidebar et le reste… merci beaucoup !
Ca ressemble beaucoup au tutorial diffusé sur WPdesigner.
Etant également un blogger français observant ce qui se passe dans la communauté anglophone, je me pose la question de savoir dans quelle proportion les idées que l’on a vues ailleurs peuvent devenir les notres.
C’est le principe du web 2.0 n’est-ce-pas? Apporter ses propres idées/thèmes ou récupérer une idée vue ailleurs et la traiter en y apportant son angle de vue, son ton.
A partir de quel niveau de “personnalisation” une idée devient-elle la notre?
Et si c’est une idée originale, la tienne et rien d’autre, je trouve son traitement trop proche d’une “simple” traduction.
Qu’en penses-tu?
Ange > Pour faire ces tutoriels, je me suis inspiré de divers sources, comme Wordpress.org ou encore WPDesigner. En fait, j’ai pris ce que j’ai pensé être le meilleur des deux tout en restant proche des thèmes par défaut de Wordpress. C’est ce qu’à fait Small Potato. Je ne pense pas que l’on puisse parler de contenu “original” dans ce cas parce qu’il n’y pas 36 manières de parler de templates. Des idées viennent de différentes sources et de ma propre expérience de Wordpress. J’aime beaucoup WPDesigner tout comme Wordpress.org mais dans un cas j’ai trouvé les explications trop simples (donner des lignes de code sans les expliquer), et la construction peu évolutive (tout dans le fichier index.php). Certains aspects de la construction étaient quelque peu inutiles à mon sens. J’ai donc apporté mes propres réponses sur des sujets comme le titre, la hiérarchie des templates, l’oragnisation de ces templates, les feuilles de style CSS ou encore l’explication détaillée du Loop Wordpress. Qui plus est, SP s’est arrêté sur un minimum de CSS. J’ai l’intention d’aller jusqu’à la customisation des différentes pages, pour que chacun puisse personnaliser un maximum son thème.
Et puis, concernant les docs Wordpress, que tu n’abordes pas mais qui m’ont beaucoup servies, je les trouve souvent inaccessibles, trop confuses pour être bien appliquées. J’ai lu pas mal d’articles provenant d’autres sources et dont je ferai une sorte de récapitulatif à la fin des tutoriels. Je ne pense pas que ce que je dis dans ces tutoriels soient mes idées. J’ai appris à faire un thème avec différentes sources et j’en donne mon interprétation, ma vision sur comment faire son thème Wordpress. Je suis parti d’une base, disons WPDesigner et Wordpress.org, que j’ai amélioré avec différentes lectures et beaucoup de pratique dans les templates. C’est sûr que le contenu est en grande partie déjà vu sur ces sites anglophones, mais, je le répète, il n’y a pas 36 manières de créer un thème. Ce que j’apporte en plus, ce sont des explications, des détails, une manière propre de baliser ou d’optimiser le titre par exemple. Des choses comme ça quoi ! J’essaie de partager ce que j’apprends sur le web. Donc, ce n’est pas mon idée, c’est juste une retranscription personnelle de ce que j’apprends chaque jour sur Wordpress et sur le web.
PS: j’en ai d’ailleurs profité pour mettre la liste des sources dans ce billet plutôt que d’attendre la fin des tutoriels
Merci pour le développement
Tu apportes aussi de la doc en français, ce qui n’est pas négligeable (même si la population des bloggers en France est infime comparée aux Usa).
En tous cas, tu m’as convaincu de revenir ici plus souvent.
Re- Ange,
Concernant les tutoriels, j’ai ajouté une liste des différentes sources utilisées dans mes tutoriels. Tu y trouveras peut-être des articles intéressants
Et puis, ça lève aussi une ambiguité. Je comptais établir cette liste à la fin de cette série parce qu’on découvre de nouveaux articles chaque jour mais je crois qu’il est quand même bon d’en citer certaines ici, ne serait-ce que pour la transparence.
Merci pour ce super tuto vraiment accessible à tous, bravo à l’auteur !
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.
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
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 !
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
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.
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
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 !
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 !!
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
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 !
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
jfh > j’ai regardé mais je ne crois pas que ce soit possible, vu que wp-comments-post.php est un fichier de base de Wordpress. Tu peux toujours demander sur le forum de Wordpress francophone, mais je ne crois pas que ce soit customisable… désolé !
jul > vous souhaiteriez que votre sidebar soit toujours collée en bas de la fenêtre du navigateur ?
Bonjour,
En fait j’aimerais que la sidebar reste à gauche et en-dessous du header (si c’est possible) (donc en-haut du navigateur) et que le footer apparaisse à la fin de l’article et non pas sur le texte de l’article.
Bonne journée
jul > “et non pas sur le texte de l??article” tu pourrais me faire une copie d’écran pour voir ce que ça donne en ce moment ??
Bonjour,
J’ai chargé le printscreen dans mon FTP,
l’adresse est la suivante:
http://www.jbauerconseil.fr/do.....screen.JPG
Bonne journée
jul > le problème peut venir de plusieurs choses. Mais avant de commencer, essayez de faire vos tests sous Firefox et non IE. IE ne respecte pas les standards web. Regardez ce que ça donne et dites moi ensuite si les problèmes sont les mêmes.
a très vite
Bonsoir,
Je retrouve le même problème sous Firefox. De plus, quand j’active mon thème les liens se mettent à clignoter.
Bonjour ! Un très grand bravo pour ce tutoriel et un énorme merci pour la débutante que je suis
谢谢 ！
Hello Fran6, je suis hyper impatient de voir la suite … c’est pour quand mon petit ?
Bonjourd Francis,
Je me suis rendu compte qu’aucun thème Wordpress de base n’était en téléchargement sur le web, j’ai donc pris l’initiative de mettre celui que j’ai créé tout au long de cette série de tutoriel en téléchargement sur mon blog.
N’hésite pas à m’envoyer un mail si tu souhaite que je l’enlève !
Jérémy.
Bonjour à tous,
Je tenais juste à remercier l’auteur de ce blog et de ce tutorial extrêmement bien ficelé …
J’ai pu grâce à cela mettre en place mon blog et lui crer un thème.
Pour info j’ai inséré un lien vers ce même tutorial et j’ai cité le nom de l’auteur. Si cela représente un souci surtout que l’auteur n’hésite pas à me le signaler et je retirerai les deux liens !
Bien à vous tous
et encore merci à l’auteur
AL.
Et bien merci à vous Archibald pour tous ces compliments. Et merci pour le lien c’est très sympa !! A très bientôt j’espère pour de nouveaux tutos !!
Merci Fran6 pour ce blog… et les articles et le tutoriel sur la création d’un thème. Je cherchais depuis quelque temps à “comprendre” WordPress… c’est tout à fait ce qu’il me faut… merci bien vivement. Me voilà fan de ton blog !
Je me suis pris à lire les articles et j’apprends des foules de choses…
Une petite question leçon 4 du tutoriel que tu as écrit, il y a une image expliquant la hiérarchisation des templates… illisible !
Est-il possible d’en avoir une image plus lisible ?
Salut, j’ai lu tous tes tutos … magnifiques. Ils m’ont permis de créer mon propre thème !!!
Sinon, je trouve dommage que les tutos sur le design soit … en cours de création?!!!
En tout cas merci.
@++
Dans le créationTheme que tu proposes en téléchargement, il y a cette ligne dans le footer : clear: both;
Perso je sais à quoi elle sert, mais ce serait peut-être intéressant de rééditer ce passage du tuto (car elle n’y figure pas) pour en parler, c’est quand-même important.
Encore merci pour ce super cours
Merci PtitLoop j’avais pas vu !! je vais mettre le tuto à jour dans les prochains jours !!
Salut Fran6,
Voila, après une recherche infructueuse sur le forum, je viens te demander de l’aide
J’ai mon wordpress installé sur le serveur, jusque la aucun problème, par contre j’ai crée un répertoire galerie qui contiens mes photos.
Lorsque je tape l’url en DUR dans le navigateur : http://www.vymdiesel.be/galerie/machin.jpg (par exemple) le blog m’affiche “la page du thème” => cette page est introuvable, la page que l’on demande d’afficher si la page est introuvable ( dans le code)
Hors, j’aimerai afficher l’image justement, mais je ne sais pas comment faire.
J’ai bien penser mettre le répertoire “Au dessus” de celui de wordpress mais wordpress est a la racine donc
Merci d’avance
Merci d’avance
Problème résolu, je notais le répertoire PUBLIC_html (malgré que je sois bien dedans) et le lien direct sans public_html cela fonctionne, je n’ai pas très bien compris pourquoi.
Si tu pouvais m’éclairer, ^^ si pas tant pis
Merci et désolé de polluer tes commentaires >
Désolée du dérangement, Eureka j’ai trouvé c’était dans un fichier à part que jvs pas ouvert.
Super tes tuto, j’en ai fait mon livre de chevet !
Merci
Bonsoir,
après 2 jours de boulot, le premier pour créer les fichiers de template et le second la page de css ” basique” ( tout ça sans trop faire de copier/coller pour apprendre) je suis passée à la customisation d’un blog à partir du thème de site déjà existant auquel je veux ajouter un blog : et ça marche ! Je n’y croyais pas ….
Pour voir, regardez dans ma signature
Merci Fran6…. sans toi je n’y serais pas parvenue !
Salut la poupée russe. Super boulot sur ton blog pianiste
J’suis impressionné !
Merci Laurent… tu te promènes par ici toi aussi…. le monde du web est petit !
Ben, c’est pas le tout d’avoir un blog.. il va falloir le remplir et je ne compte pas sur ma pianiste pour ça ! Je vais donc essayer de parler de la vie d’une maman de pianiste et des compositeurs pour le piano. En tout cas j’essaie d’écouter tes conseils, si tu te souviens de ce que tu m’avais dit à Toulouse il y a … plus d’un an maintenant !
Bibi
à bientôt