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

  • Little Red Frog

    Salut !!

    Alors… Un ami vient de me donner ce lien parce que je voudrais créer mon premier site sur WP (en fait, 2 sites) et que je lui demandais quelques conseils… Il a créé le sien en se basant apparemment beaucoup sur tes articles donc je vais tenter la chose aussi !
    Résultat dans quelques temps je l’espère 🙂

  • Audrey

    Très bon tutorial ! Extrêmement bien expliqué !
    Dommage qu’il s’arrête au moment le plus intéressant 😉
    On peut espérer une suite ?…

  • Alt_S

    Merci Fran6 pour ce tuto… qui a dû te prendre pas mal de temps, mais qui est vraiment bien expliqué, bravo !

  • Bonjour a tous,

    Je me tire les cheveux sur un problème sans pouvoir trouver de réponses.
    J’ai un menu avec des sous pages (déroulant) à plusieurs onglets et je souhaiterais limiter le nombre d’onglet sans pour autant limiter le nombre de sous pages.
    Je ne veux pas utiliser la solution include ni l’insertion d’un plugin…

    Mon code:
    0,
    ‘show_date’ =>  »,
    ‘date_format’ => get_option(‘date_format’),
    ‘child_of’ => 0,
    ‘exclude’ => ’13, 41, 195, 473′,
    ‘include’ =>  »,
    ‘title_li’ =>  »,
    ‘echo’ => 1,
    ‘authors’ =>  »,
    ‘sort_column’ => ‘menu_order, post_title’,
    ‘link_before’ =>  »,
    ‘link_after’ =>  »,
    ‘walker’ =>  » ); ?>

    Merci pour vos réponses et félicitations à Fran6 pour ce tuto qui est devenu une réference 😉

  • J’oubliais j’utilise la fonction wp_list_pages( $args );

  • Nemesis17

    bonjour !

    Excellent article !
    Mais j’aimerais utiliser la fonction « image à la une » dans mon thème perso wordpress et je ne sais pas comment faire 🙁

    peux tu m’aider ?

  • Cindy

    Bonjour ,
    Je voudrais savoir comment faire pour introduire dans mon site 2 sidebar (droite et gauche)
    L’une avec recherche, calendrier , des liens et une galerie
    La seconde avec un menu et un bloc d’images slide d’une autres galerie

  • Plus qu’un simple tuto, une véritable formation pour crée son thème wordpress ici ! Avec les bases que j’ai couplé à cette série d’apprentissage pour créer son thème wordpress, je me suis nettement amélioré et je suis bien plus armé pour proposer des sites ou/et blog professionnels à mes clients en utilisant se cms.
    Un grand merci et bravo !

  • Trés bon article ! Est-il possible de copier votre lien sur mon site vers cette news ?

  • Hélène

    Bonjour,

    j’ai suivi les tutos pour apprendre à créer un thème en m’aidant également de votre excellent livre « WordPress 3 » mais j’ai un problème pour lequel je ne trouve pas de solution…

    lorsque j’intègre une image à un article le texte ne vient pas encadrer l’image bien que j’ai choisi cette option dans la console d’administration lors de l’insertion de l’image.
    Faut-il ajouter une instruction au thème ou s’agit-il d’un problème de css ?

    Merci infiniment de votre aide !

  • Hélène

    je m’auto répond…

    c’était juste un problème de css, j’avais utilisé .wp-post-image comme indiqué dans le bouquin mais en vérifiant avec firebug il fallait indiquer .post_content img { }

  • Hélène

    Bon finalement mon auto réponse est simpliste (même si je ne suis pas blonde !!) donc si quelqu’un a la vraie réponse…

    Une class est « générée  » pour l’image en fonction de ce que l’on choisi lors de son insertion, ben dans mon thème à moi que j’ai créé grace au tuto, ben ça marche pas…

    si quelqu’un a ne serait-ce qu’un début d’idée…

  • ça marche nickel !
    Merci beaucoup Fran6 pour ce billet.
    Allez, au boulot maintenant…

  • Jf

    Ce tutoriel est formidable ! Merci mille fois !

  • Merci comme ça je vais démarrer la réalisation de mon propre thème je te retire chapeau de très bon tutoriel simplifier a la porté de tout le monde un travail vraiment généal.

  • roger

    Salut Francis !

    Tout d’abord, merci pour ce super tutoriel !! Il sert beaucoup. J’ai juste une question, comment personnaliser le bouton d’envoi du formulaire de commentaire ? Le submit. Puisqu’on fait appel à , je ne sais pas ou on peut mofifier le texte…

    Merci d’avance de ta réponse !

  • @ Francis qui a dit : « 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. »

    Entièrement d’accord : je me suis servis de ces tutos il y a environ 1 an et j’ai créé mon thème de A à Z avec eux. Merci encore.

  • Bonjour,

    Et oui, toujours d’actualité malgré l’ancienneté.

    Je suis en train de suivre cette petite formation car ça m’énerve de pas pouvoir modifier l’apparence de mon blog comme je veux.

    Seulement, je bloque d’entrée! Je n’arrive pas à configurer wordpress pour qu’il tourne en local.

    J’ai trouvé un petit tuto bien fait (je pense) vu que tu n’as expliqué que pour mac! (;))

    Aurais tu un tuto pour windows stp! car j’ai déjà commencé à créer mon thème mais je peux pas voir ce que ça donne.

    Merci beaucoup

  • Personnellement je tourne aussi sous Mac, mais nous avions fait des essais sur des plate-formes Windows avec quelques amis : il en ressort que XAMPP semble plus facile à configurer que WAMP…

  • I reckon something truly interesting about your website so I saved to favorites .

  • Salut,
    J’ai un problème avec mon thème, j’ai trouver un thème qui me plait sur internet mais le seul problème c’est que ce thème ne prend pas en compte les mise en forme du texte (saut de ligne, numérotation, etc).
    Donc si tu sait ou je peut changer cela ?
    Je te remercie d’avance 🙂

  • Merci de ton article, très bien détaillé 🙂

  • Rien que pour la leçon 1 : merci !
    Je suppose que je peux déjà te remercier pour les suivantes 😉

  • Bonsoir, jais suivie pas à pas comment crée son thème wordpress, selement je voudrai savoir comment le faire ne 3 colonnes, et rajouté une mage dans header et le footer

    Merci pour votre réponse

  • Salut !

    Je possède un site permettant de créer des designs pour des sites, si cela vous intéresse ! 🙂

    Voilà l’adresse :
    http://www.creer-son-website.fr/

    Bonne soirée ! 🙂

  • Bonjour,
    Excuser mw mais kan j’installe mn theme il me dit « thème courant emdomager, retour au thème initial ». SVP jai besoin d’aide.

  • Bonjour,
    Et merci pour ce partage et cette belle intention pédagogique très bien fournie.
    Je souhaiterai que mon power point s’affiche directement dans ma page et qu’il ne soit pas nécessaire de l’enregistrer pour y accéder ?
    Y a t-il une astuce pour y parvenir ?
    Par avance, merci.
    SD

  • tutoriel parfait ! merci énormément , étapes claires et bien expliqué ;

    il me reste encore a chercher comment intégrer l’espace du compte utilisateur , je pense que je ferai mieux de télécharger un Template et la décortiquer pour voir comment ça marche

  • Superbe ! Un GRAND merci pour ces tutos qui déchire tout ! J’ai commencé avec les thèmes tout fait, puis à bidouiller les thèmes tout fait… Et maintenant grâce à toi je vais construire mes thèmes et pouvoir y appliquer les design que je veux ! Fini le rafistolage ! D’ailleurs je suis tellement motivée que je vais refaire tout beau, tout propre mes anciens sites !

    J’avais déjà visité ton site pour d’autres articles, continue comme ça, c’est super ce partage !

  • nUmber your wordpress internet site, and acquire your custom made web site set up in less time. The guide allows users to know your wordpress set up course of action through internet hosting set up for you to custom made …wordpress

  • Merci pour larticl

  • hello there and thank you for your info ? I have certainly picked up something new from proper here. I did alternatively expertise some technical points the use of this website, since I experienced to reload the website a lot of occasions prior to I may get it to load properly. I have been considering in case your web host is OK? Not that I am complaining, however sluggish loading cases instances will often impact your placement in google and could harm your quality rating if ads and marketing with Adwords. Anyway I’m adding this RSS to my email and could glance out for a lot extra of your respective interesting content. Ensure that you replace this once more soon..

  • britain

    comment on fait le fichier category.php ?
    cela peut être utile si on veut différencier l’affichage des archives .
    merci

Success, your comment is awaiting moderation.