Aujourd’hui, nous allons entrer dans le vif du sujet puisque nous allons commencer la création de notre thème en créant le dossier du thème ainsi que les différents templates de base que nous allons utiliser. Si vous découvrez la série de tutoriels aujourd’hui, je vous conseille fortement de commencer par le début sinon vous risquez de ne pas tout comprendre.
1. Création du dossier du thème
Vous connaissez déjà sûrement où se situent les dossiers pour les différents thèmes que vous avez sur votre serveur, mais un petit rappel ne sera pas de trop. Le dossier des thèmes se situe sous: Wordpress > wp_content > themes. Au départ, nous n’allons créer nos différents fichiers de base, l’index.php, le header.php, le sidebar.php, le footer.php et la feuille de style style.css.
- Vous allez donc commencer par démarrer les serveurs php et apache si vous travaillez en local.
- Créez ensuite un dossier sous l’emplacement décrit ci-dessus. On va l’appeler “Creation Theme“.
- Ouvrez votre éditeur de texte préféré et enregistrez le fichier en l’intitulant index.php. Faîtes de même avec les autres templates ainsi qu’avec la feuille de style, style.css.
- Vous devez maintenant avoir 5 fichiers sous le dossier “Creation Theme”, lui-même sous le dossier “Themes” de Wordpress.
- Nous allons maintenant travailler sous ces différents fichiers et les renseigner au minimum au fur et à mesure.
2. Création du header et de l’index
2.1. Création du template header.php
Nous allons commencer par le HEADER (header.php) et l’INDEX (index.php). Pourquoi ? Parce que c’est le header qui contient les informations de base qui vont permettre à la page web de bien s’afficher dans le navigateur. Le header comprend notamment:
- le DOCTYPE, qui nous fournit les informations sur le codage utilisé par la page web,
- la balise HEAD et tout ce qu’elle comporte: les balises META, le titre du blog, le lien vers la feuille de style et vers les flux RSS.
- L’ouverture de la balise BODY.
Toutes ces informations sont les bases pour créer votre blog. Sans le doctype, le navigateur ne saura pas quoi ni comment afficher la page web. Sans la balise HEAD et ses différentes infos, le navigateur ne saura pas non plus quel type de code utiliser, comment s’appelle le blog, où sont les infos de style et s’il y a un flux RSS. Bref, c’est la base de la base. Sans ça, on ne va nulle part.
Ensuite, on va travailler tout de suite dans l’index parce que c’est le fichier central du thème. C’est chez lui que l’on va dire où aller chercher l’information. C’est donc dans ce template que l’on va dire d’aller dans le header.php pour trouver les informations de base pour notre thème.
Ouvrez donc votre template header.php et saisissez-y les données suivantes. Ce sont les données de base à renseigner. On verra par la suite comment les améliorer et les optimiser. Mais pour le moment, on va garder quelque chose de simple, juste pour concevoir l’architecture de notre thème:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name') ?><?php if ( is_404() ) : ?> » <?php _e('Not Found') ?><?php elseif ( is_home() ) : ?> » <?php bloginfo('description') ?><?php else : ?><?php wp_title() ?><?php endif ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> |
On retrouve dans ces informations tout ce que l’on a évoqué ci-dessus. La balise titre est déjà quelque peu optimisée mais plus tard, je conseillerai un format optimal pour un meilleur référencement par le biais d’un plugin incontournable. Ces informations se terminent par l’ouverture de la balise BODY et donc le contenu de notre page web. Vous allez comprendre un peu plus tard pourquoi on l’a ouvert ici.
N’oubliez pas d’enregistrer votre fichier et ouvrez maintenant le template index.php.
2.2 Création du template index.php et présentation des template tags
En fait, l’index va nous donner les instructions pour nous permettre d’aller chercher les informations au bon endroit. Ici, on va commencer par lui dire d’aller chercher les infos du header dans le template header,php. Pour cela, on va utiliser des template tags. Les template tags sont des petits morceaux de code en PHP qui cont relier les fichiers entre eux. Ici, ce petit bout de code va être inséré dans l’index et va nous dire que l’info concernant le header se trouve dans le fichier header.php. Cette ligne de code c’est la suivante:
1 | <?php get_header(); ?> |
On va donc aller chercher le header de cette façon pour l’incorporer d’une certaine manière à l’index. Comme je l’ai dit plus tôt, on pourrait très bien n’utiliser que l’index et mettre toutes les infos dedans, mais je trouve que pour une meilleure organisation du thème, mieux vaut avoir les fichiers séparés. On pourra mieux les optimiser séparément.
Reparlons ici de l’ouverture des balises HTML et BODY sous le header. Etant donné que l’on va aller chercher ces informations à partir de l’index, il est important que l’on pense à refermer ces balises. Imaginons toutes les infos citées ci-dessus dans l’index, il nous faudrait penser à refermer ce qui n’est pas refermé. C’est le cas des balises HTML et BODY. On va donc les fermer dans le template index.php:
1 2 | </body> </html> |
Dans l’index, saisissez donc ces trois lignes de code:
1 2 3 | <?php get_header(); ?> <!-- ouvrir header,php --> </body> </html> |
A droite de la requête PHP, vous pouvez voir un commentaire. Ces commentaires sont toujours utiles pour se repérer. Utilisez-les autant de fois qu’il vous est nécessaire pour y voir plus clair et utilisez les signes <!– et –> pour les encadrer.
Enregistrez votre template index.php.
2.3 Création de la feuille de style, style.css
Ouvrez le fichier CSS créé précédemment et saisissez-y les informations suivantes:
1 2 3 4 5 6 7 8 9 10 | /*
Theme Name: Creation Theme
Theme URI: http://www.fran6art.com/
Description: The first theme created by Francis Chouquet.
Version: 0.1
Author: Francis Chouquet
Creation Theme by Francis Chouquet || http://www.fran6art.com
*/ |
Vous pouvez modifier ces informations en les remplaçant par celles que vous voulez. Ces quelques lignes vont donner les infos de base de votre feuille de style. C’est notamment elles qui vont permettre l’affichage de votre thème dans l’administration de Wordpress.
Enregistrez votre fichier et fermez maintenant votre éditeur de texte et allez sur l’administration de votre blog, onglet “Thème” ou “Présentation” selon la version de Wordpress que vous avez. Si vous avez bien tout fait comme je vous l’ai indiqué ci-dessus, vous devez voir apparaître le nouveau thème créé:
Sélectionnez-le et “affichez le site”. Pour le moment, vous n’avez qu’une page blanche mais votre titre apparaît déjà dans la barre d’entête de votre navigateur.
Si vous souhaitez visualiser une image à vous, il faut que cette image fasse 300 x 240 pixels et qu’elle se nomme screenshot.png. Pensez également à l’insérer dans le dossier de votre thème.
Dans le prochain billet, nous allons voir comment remplir le header pour voir apparaître le titre et la description du blog. On s’arrête donc pour aujourd’hui et je crois vraiment que c’est suffisant ! 
Bon week-end
Tutoriel suivant: 6. Le Header
Fran6
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
C’est pour quand le prochain je suis precé a mort…Vivement
Courant de semaine si tout va bien !!!
salut
super ce billet : comme les autres … très clair et simple à comprendre : tu rentres juste ce qu’il faut dans les détails, mais sans noyer le néophyte que je suis….
excellent, et bonne continuation !
Merci Lomig ! En fait, c’est pas évident de rédiger ce genre d’article, c’est très différent de ce que je fais d’habitude. C’est plus long et surtout j’ai toujours des soucis avec les insertions de code. WP ne les reconnais pas toujours alors qu’ils sont présents. Ca m’a définitivement dégoûté de l’éditeur WYSIWYG !! Du coup, j’écris l’ensemble de l’article sur Ecto (logiciel) et je le transfère ensuite sur WP où je fais les dernières retouches…Pas évident tout ça. En tout, concernant les tutoriels, j’essaie de faire clair et j’essayerai de les faire moins long mais plus souvent !!
ça devient très interessant
vivement la suite
Bonjour !
Je vous écris car je suis votre tutoriel “Créez votre thème WordPress de A à Z”.
J’aimerai savoir si il est possible de réaliser ce tuto, et plus généralement un blog sous WordPress en XHTML strict, et non pas transitionnel.
En effet : je suis étudiant en graphisme, et nous avons des cours de XHTML strict.
Aussi, j’aimerai savoir si le transitionnel est obligatoire avec WordPress ?
J’attend votre réponse avec impatience.
Je tiens aussi, bien sûr, à vous remercier pour excellent blog, très bien fait, très intéressant, super !!^^
Voilà, c’est tout. Bon week-end de Pâques !!!
Salut Olivier,
C’est une très bonne question que tu poses là mais je ne saurais pas forcément bien te répondre n’étant pas un expert développement. Ce que je peux te dire c’est qu’on m’a déconseillé plusieurs fois d’utiliser le XHTML Strict pour des raisons de souplesse et d’optimisation avec les navigateurs. IE est connu pour avoir des soucis avec pas mal de déclarations, et la Transitionnel semble être celui qui gère le mieux ces soucis. Maintenant, je crois qu’il n’y a pas beaucoup de différences entre les deux, mises à part quelques balises. LE XHTML Transitionnel était pour faire une transition. Maintenant, on enseigne le “Strict” parce qu’on ne va plus avoir que des sites “stricts” dans le futur, le temps que tous les navigateurs soient passés au XHTML. Ce qui est le cas pour les dernières versions mais tu as toujours des personnes qui utilisent un très ancien navigateur…
En tout cas, dans les cours que j’ai pris et les bouquins que j’ai lu, on te conseillera toujours le transitionnel pour être sûr que tout le monde voit bien ton site. Mais c’est un peu comme ceux qui te disent de ne pas dépasser le 800*600 pour les visiteurs qui ont encore des petites résolutions…
Maintenant, pour réaliser un blog sous Wordpress, je te conseille quand même de rester en transitionnel. Tu peux toujours essayer en strict mais je ne peux rien te promettre !!
Il y a une différence au niveau de certaines balises. En Strict, il n’y a plus du tout de balises de style, tout doit passer par les CSS. Mis à part pour les listes, je n’en ai pas trouvé sur Wordpress, donc tu peux toujours te lancer dans l’aventure et faire quelques modifications pour être en strict…
Sinon, merci pour ton soutien !!
Je ne sais pas si j’ai pu répondre à ta question mais que le choix de déclaration ne te prenne pas trop la tête, les deux sont tout de même très très proches !! C’est sûrement vrai que ce serait mieux de tout mettre en strict, mais bon, en ce qui me concerne, je reste dans les “normes” Wordpress !!
Salut
Pas mal, lol certains vont commencer a se creuser la tete au prochain, je le sens
enfin, tu me diras
allez a+ jattends le prochain avec impatience
Merci Kyu pour la proposition !!
J’ai pensé en faire une version en anglais mais je vais voir ça un peu plus tard !!! Merci quand même !!!!
Bonjour !
Bon, je dois pas être très douée, je commence à m’énerver donc autant poser mes questions à un connaisseur !
Jusuq’ici, j’ai tout bien suivi. Mon problème est dans la fin de votre tutorial #5, quand vous dites d’aller dans l’administration du blog (avec Wordpress). Et là, c’est le drame. Comment je fais pour aller dans cette administration ? J’ai bien mon fichier Wordpress, tout ça dans le htdocs de MAMP. J’ai également mon mot de passe etc… pour MAMP sur Internet.
Que dois-je faire ?
Merci pour votre réponse. En tout cas bravo pour ce tuto, c’est génial !
Salut Clara, pas de stress !!
L’administration du blog, tu y as accès via cette URL: http://localhost:8888/wordpress/wp-admin/
Essaie ça sous ton navigateur préféré et dis-moi si ça marche, OK ?
a très vite
Ca y est j’ai essayé, ça marche ! Directement sur ma page
Merci, merci ! J’vais pouvoir continuer ce tuto dès ce soir !
Encore merci …
Bonjour, je viens de prendre les tutoriels au début, et pour l’instant c’est vraiment très clair et à la portée de n’importe qui. Donc merci beaucoup, je m’attèle à la suite sans plus attendre
Bonjour,
Je t’avais déjà posé une question il y a quelques jours…. Bon, j’ai tout recomencé sans dreamweaver et avec XAMPP et tout va bien jusqu’à le moment de vouloir “aficher le site” dans la page d’administration de wordpress…
QU’est-ce que tu peux me conseiller?
Merci beaucoup
C’était mon problème il ya quelques jours….:
Dans la page de administration du site je n??arrive pas non plus à changer le thème. J??ai le thème qu??on est en train de créer mais quand je veux l??appliquer comme thème il ne se passe rien, pourtant l??admin me dit que le nouveau thème est activé mais c??est l??ancien qui s??affiche toujours.
Bref, je n??arrive jamis à voir les résultats de mon travail ..
Excuse-moi,
en fait ça marche, pour qoui je ne sais pas, je continue alors ….
Bonjour,
Tout d’abord merci pour ce tuto super!
Mais j’ai le même problème que Ramon. LE thème est créé ais quand je vais dans l’admin pour le sélectionner, il ne s’applique pas. Pourtant il me dit qu’il est activé mais c’est toujours le thème par défaut. Que faire?
merci
Salut Alyn,
C’est probablement un problème dans les templates je pense. Ramon s’en est sorti comme par magie j’ai l’impression !
Revérifie ton code encore une fois, tu as peut-être oublié quelque chose… Ou alors vides le cache de ton navigateur… Tiens moi au courant !
Salut Fran6,
Merci de répondre si rapidement!
J’ai tout refais, j’ai toujours le même pb. J’ai fais un hard reload mais rien de plus.
Voici ce que j’ai : http://i222.photobucket.com/al.....4/thme.jpg
Donc le thème est bien présent mais impossible de l’appliquer
ça y est!
J’ai trouvé, en fait j’avais nommé le fichier du thème d’un autre nom et ça ne marchait pas à cause de ça.
Je peux continuer!
MErci !
Bonjour et félicitation pour ce tuto qui, pour l’instant, est extrémement clair l’idée de faire de nombreux article de petite qualité permet de ne pas perdre le lecteur dans trop de manipuylation bref j’adore.
Juste quelques petites remarques:
-Tout d’abord une petite coquille dans la partie 2.2
”de code en PHP qui cont (vont) relier les fichiers entre eux”.
- Ensuite un petit lien en fin de chaque article pour emmener vers la suite aurait été le bienvenu.
- Enfin, je pense qu’il faudrait préciser dans cet article que lorsqu’on met les informations dans le fichier style.css les accents doivent être codé en html. é = é etc…. Sinon il ne sont pas reconnus à l’affichage dans l’administration.
Ce ne sont que des détails je l’admet mais après tout ce tuto est déja excelent alors pourquoi se privé de le rendre incontournable ?
Sur ce je continu ma lecture.
Bonsoir, juste une petite question, en fait dans l’admin de mon blog dans thème, il ne me donne pas que le nom de mon thème, mais l’ensemble de ce qui est écrit entre les /* et *\, j’ai lu les commentaires et comparer à d’autre style.css, je ne vois pas ce qui cloche…
merci pour les tutos
Ellaurenzovfoot > Tu as pu résoudre ton problème ? Je pense que c’est juste un problème de syntaxe…
Salut Francis,
je pense que t’as fais une légère erreur d’inatention dans le header en mettant 2 fois: regarde :
” />
a+
eh ben ça marche paaaasss quand j’écris du php dans le comm :’(
bon alors tu as 2 fois l’appel à php wp_head(); à la ligne 14 et à la ligne 18 (à peu près j’ai compté à l’arrache…)
j’ai remarqué ce doublet en intégrant ANIga à mon thème (créé en suivant tes tuto avant de voler de mes propres ailes)
Salut francis!
En premier lieu, ce tuto est génial!
Cependant, je ne saisis pas trop ce que l’on doit écrire exactement dans la feuille de style. Vois-tu j’ai exactement le même problème Ellaurenzovfoot. L’ensemble de ce qui est écrit entre les /* et *\ !
J’utilise Golive CS2 comme editeur de texte, ça devrait aller non? Bref, pardon si cette question peut paraitre idiote, mais je suis loin d’être pro dans tout ça!
Merci à l’avance
Encore moi, en réaction à mon post précédent.
Pour l’instant rien de compliqué, mais c’est clair que le tuto est bien fait pour les Néophytes.
Je n’ai pas vu ce que tu avais conseillé comme editeur de texte, personnellement j’utilise HAPedit, maniable, léger et gratuit.
Ca pourrait interesser certaines personnes:
http://hapedit.free.fr/hapedit.php
Le petit plus, c’est qu’il incrémente déjà les balises de base à ne pas oublier.
Bonjour, je ne comprend pas parce que quand je clique sur mon thème dans l’administration Wordpress, le thème reste celui par défaut O_o
Ah bah ça marche! Je n’avais pas mis le même nom pour le thème dans le css et le dossier du thème (peut-être ça…)
Petit à petit ça avance !
Merci beaucoup ! Bon j’en suis qu’à la page blanche mais c’est un bon début ! Jusqu’à maintenant ça a bien marché.
Suite au prochain épisode et encore merci !
Bonjour,
Merci Francis pour tous tes tutoriels, Merci à toutes les personnes qui comme toi nous font découvrir et partager leurs connaissances.
Pour ma part j’ai un souci je n’arrive pas à rentrer dans l’administration de wordpress.
J’ai installer et des installer au moins 10 fois XAMPP Wordpress mais sans aucun résultat.
Je tente d’accéder à l”‘admin de wordpress via:
http://localhost/wordpress/wp-admin/
http://localhost:8888/wordpress/wp-admin/
http://localhost:8889/wordpress/wp-admin/
j’ai toujours la même réponse:
Warning: Cannot modify header information – headers already sent by (output started at C:\Program Files\xampp\htdocs\wordpress\wp-config.php:1) in C:\Program Files\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 770.
Autre chose quand je veux ouvrir worpress via:
http://localhost/wordpress/wp-login.php
Le mot de passe que wordpress m’a donner ne correspond jamais je suis toujours en échec avec l’erreur:
Warning: Cannot modify header information – headers already sent by (output started at C:\Program Files\xampp\htdocs\wordpress\wp-config.php:1) in C:\Program Files\xampp\htdocs\wordpress\wp-login.php on line 260
Warning: Cannot modify header information – headers already sent by (output started at C:\Program Files\xampp\htdocs\wordpress\wp-config.php:1) in C:\Program Files\xampp\htdocs\wordpress\wp-login.php on line 272
Je suis usé par les heures passées sans aucun résultat.
J’espère que tous mes soucis ne vont pas trop prendre de ton temps mais pour le moment je suis bloqué aurai-tu une solution ?
Remerciements
Gérard
J’ai exactement le même souci, je cherche aussi.
J’ai eu ce message après avoir tenté de créer une sidebar sur deux colonnes, donc après avoir modifié le codes sidebar et functions.
En cherchant sur les forums d’entraide, tout le monde recommande d’être vigilant avec les espaces, qui doivent être absents à la fin de tout code, et le formatage du fichier, bien en UFT8.
J’ai vérifié cela mais rien n’y fait.
Il y a un autre conflit visiblement, entre le php du function et le html du header.
Je suis preneur pour une explication, même si tout le monde est sans doute à la plage.
Tout le monde est donc à la plage, tant mieux (pour eux).
Réponse pour Gérard :
la copie des nouveaux fichiers proposés par Fran6 à la fin résolvent tous les soucis (emplacement de la sidebar par exemple, qui restait désespérément en bas du content, à cause d’une sale histoire de div pas fermée au bon endroit.
Un peu dommage que ce ne soit pas mis à jour dans le tutoriel, mais ça le sera sans doute un de ces jours. Mais vu le boulot que représente ce tutoriel, on ne peut pas en vouloir à l’auteur d’avoir fait quelques bugs !
abfaboune >J’ai beau regarder les tutos, je ne vois pas où il y a une “div” non fermée… Et le truc c’est que dans ce cas-là tout le monde aurait dû avoir le même problème… Si tu peux m’éclairer, je suis preneur !!
Heu, pas dans cette page.
Mais c’est le truc dont tout vous aviez tous parlé dans les commentaires dans ce tutoriel.
ycvhwg qsay ubczt xufrm
Salut,
A ceux qui ont le même problème que Gerard essayez la solution suivante:
Télécharger Notepad++
Ouvrir le fichier wp-config.php
Le convertir en UTF-8 sans BOM
Enregristrez
Chez moi cela a réglé le problème de “header…..”
Merci encore Francis pour ces tuto
salut
je n’arrive toujour pas a réglé le probléme j’ai un message d’erreur une fois que jai activé le théme me disant que le théme courant est endommagé et celui par defaut est remplacé
merci a vous
Hello,
J’ai galéré un peu aussi, il me disait aussi : ” le théme courant est endommagé “.
Je suis allé voir dans style.css, j’ai supprimé la ligne “Version: 0.1″ et ça a marché. Comme je comprenais pas, j’ai recopié l’exemple que donne Fran6art (que je remercie infiniment au passage) et ça marchait encore. Moralité : J’avais du mal branlé mon copier coller. Ce qui te reste à faire donc : refaire toutes les démarches :p Vérifie le nom de tes dossiers et re copie/colle toutes leur informations !
merciiii simo au faite jai changé de poste et sa a marché merci encore
gmbqhvt hrvem
nn sur windows sa m’indique toujours que mon théme est endommagé mais sur ubuntu sa marche pourquoi je ne sait pas ????
jarrive po a creer mon theme il mank un modele que sa dit quelqun peu maider? sa dit aussi que mon theme est endomager mais il ne memmank qun modele aparament! help please!
Je suis pas sûr d’avoir compris pour l’insertion TAG.
C’est comme cela dans le fichier index
Untitled Document
———————————————————–
ou direct dans la page php, sans les autre info?
——————————————————————
Est-il possible d’utiliser tes tutoriels pour créer un thème sans installer Wordpress en local?
Une alternative à installer en local si vous avec déjà un site/domaine et un hébergeur est de créer simplement un sous domaine.
Ex: si mon blog est monblog.fr je créé un sous domaine test.monblog.fr ou j’installe la MEME version de wordpress et je peux alors tester et travailler traquillement mon nouveau thème sans impacter la vie du site…
Merci pour toutes ces indications et ce travail Francis
Salut,
Tout d’abord un grand merci pour ce tuto. J’ai déjà un blog sur canalblog, mais j’ai décider de me lancer sur Wordpress mais avec mon style donc autant dire que ce tuto tombe à pic !!!!
Par contre j’ai un petit problème, je viens de finir le n°5 et quand j’affiche mon site ce qui s’affiche sur la page c’est ce qui ce trouve dans l’index !?!
(http://petiteclochette.fr/WordPress/)
Elle est où l’erreur !?!
Merci d’avance pour ta réponse ;D
wrfl ucgbylv fomyqrx bntg
bonjour, je rencontre un problème apres ce tutoriel numero 5 , je ne peux pas selectionner le thème car il est ” endommagé ” . Il manque parrait-il un modèle. j’ai lu les commentaires precedents et essayer de resolver le problème mais je n’arrive a rien donc si quelqu’un peut m’aider
qjfdw rivu
oxuqk
Bonjour à tous,
Je m’initie à Wordpress depuis quelques jours. J’avais fait une install de la 2.3.3 qui dormait sur un Mac Mini qui me sert de serveur et je viens de m’y intéresser à nouveau. D’où mes recherches de doc et tutos qui m’ont amené jusqu’ici. Je suis donc en 2.3.3 et je suis confronté à un problème de changement de thème. Comme d’autres, plus haut dans les commentaires, la sélection d’un thème via l’admin ne pose pas de problème. Mais à l’arrivée, lorsque je souhaite visualiser le site, je retrouve le site par défaut. Je n’ai pas encore développé mon propre thème mais en ai récupéré d’autres sur le net. Vu ma problématique, j’ai pensé que ces thèmes étaient buggués. D’où la démarche toute simple de dupliquer le répertoire de l’un des deux thèmes de base (classic renommé en classic2) et de tester ainsi le changement de thèmes. Pas mieux ! Invariablement, je retrouve le thème par défaut sur le site et dans la page d’admin des thèmes lorsque j’y retourne… Je ne vois rien dans mes logs de particulier. Les droits sont identiques sur les répertoires et les fichiers. En résumé, je peux choisir les thèmes classic ou default installés d’origine mais pas d’autres. Dans quelles directions puis-je chercher un bug, quelles pistes suivre, comment vérifier et comprendre la mécanique du changement de thème pour identifier l’endroit où ça coince ?
Merci pour vos réponses et ces tutos dans lesquels je me replonge illico.
gontupa
Bonjour,
Je teste ce premier tuto, mais cela ne fonctionne pas. Je reçois seulement ‘Template is missing’. Visiblement Wp ne lit pas quelque chose. Je me suis contenté de faire des copier/coller des codes du tuto.
Quelqu’un pourrait m’aider?
Merci à vous
Encore moi. Je suis désolé, mais je viens de trouver mon erreur. L’habitude de ranger les choses, j’avais mis le fichier .css dans un directory ‘Stylesheets’. Donc, le css doit être (pour l’instant) dans le root du localhost!
Désolé du trouble
Au plaisir de lire la suite
Patrick
YEEEAAAAAAHHHHH DE LA BO0O0O0MBE……………..POUR FRANCIS Yiiip PiiiPiiiiiP……………..YEAAAAAAAAAAAHHHHHHHHHHHHHHH
Bonjour et un grd merci a francis pour ce tuto ki parré tré interessant
malheureusement j’ai exactement le meme probleme ke petiteclochette si qq1 a une reponse merci de me venir en aide
…
pblm resolu,, je fonctionné avec textedit, j’ai telechargé smultron et tt fonctionne
Bonjour,
j’ai suivi à la lettre les instructions et j’ai refais à trois reprises, je rencontre toujours le meme probleme, Wordpress m’indique que le theme est endommagé : “la feuille de style manque”
J’utilise le bloc note comme editeur de texte, j’ai aussi téléchargé notepad++
Merci par avance si vou avez une solution
KIM > Tua sbien un fichier style.css dans tin répertoire ? Tu as bien mentionné la feuille de style danas le DOCTYPE ?
Alors de mon coté j’ai réussi à activer le nouveau Thème mais en fait quand je veux visualiser ma page web voila ce qui s’affiche :
bplist00�_WebMainResource� ^WebResourceURL_WebResourceTextEncodingName_WebResourceMIMEType_WebResourceData_file:///index.htmlUUTF-8Ytext/htmlO
&5Si{��� �
J’ai revérifié mon code mais semblerait être bon…
Any idea ? Help !
Problème résolu !
En fait tout venait de l’éditeur de texte il y avait une incompatibilité avec le code… donc avis au utilisateur de Mac il vaut mieux utiliser Smultron par ex. pour coder car ça joue pas avec l’éditeur de texte de Mac !
Allez go to the next step !! Et encore merci fran6art pour ces superbes tutoriels !
Bonjour,
Merci pour ce tuto… Il est très clair pour une néophyte comme moi. Juste une question, peut etre très idiote… Peut-on avoir le blog directement sur le net et non seulement en local ?
merci par avance
Oui tu peux avoir le blog directement sur le net. Il suffit que tu mettes ton dossier wordpress avec les coordonnées de ta base de donnée sur ton FTP
Salut Francis!
J’ai découvert tes tutos ce soir après avoir passé un moment à bidouiller les css de mon thème “kubrick” pour en modifier l’apparence.
J’aurais dû m’abstenir d’acheter 15 crédits à Wordpress pour pouvoir toucher à tout ça maintenant que je découvre ton site…
Bref, je suis gentiment débutante et là je me suis complètement mis dedans!
Les codes ça avait tout d’abord commencé à m’amuser pour jouer avec l’apparence de mon myspace il y a 2-3 ans et j’ai aussi fait mes premiers pas sur dreamweaver cette année… mais là ça y es je passe au niveau supérieur ^^
Je t’écris sur cet article puisque c’est là où j’en suis, et ça me bluffe d’avoir appris rien que ça alors je tiens à te dire merci!
Et je te félicite pour cette écriture pédagogue et lisible (bien que certains mots me dépassent encore mais ça viendra)
Merci Karine pour ton support, surtout n’hésites pas si tu as des questions !
Je ne suis pas toujours dispo mais je ferai de mon mieux !! 
J’ai fait une boulette. J’ai du mal écrire le login ou le mot de passe, trop pressé sans doute.
Du coup je n’accède pas aux réglage du blog sur le serveur local. J’ai recommencer du début mais il me dit qu’il faut que j’efface la base de donnée lorsque je veux réinstaller wordpress sur le serveur. Comment faire ?
D’abord merci pour ton tuto, c’est SUPER! Bravo! Par contre j’ai un souci (un gros même) : mon thème est vide. Càd quand j’applique le thème il y a juste 1 page blanche sans rien. Pourtant je pense avoir fait tout comme il fait (j’ai fait copier-coller les codes) … Que dois je faire?
Bonjour, je suis arrivée au moment de la création du CSS pour le thème. je le retrouve bien ds mon wordpress local, mais quand je le prévisualise (pour pouvoir l’activer), là je ne vois pas une page blanche, mais l’arborescence de mon dossier wordpress!!
en fait ca me fait depuis le début, je n’ai mios aucun template puisque tous me font ca!
pourriez vous m’aider car je ne trouve aucune réponse à mon pb!
de plus, votre site est super; riche en explication! bravo!
Merci pour votre réponse.
emilie.toquin@orange.fr
allez demain j’attaque la suite… HIHA
Bonjour Francis
Tout d’abord bravo pour ton tuto et la patience que doit te demander la gestion de nos posts
J”utilise MAMP
Mon problème : le même qu’évoquait Petiteclochette le 12 janvier 2009 ; quand j”essaie d’afficher le site après avoir cliquer sur le theme, je ne vois pas 1 page blanche mais ce qu’i y a dans index.php
J’ai essayé de trouver la solution dans les commentaires et malgré mes différentes tentatives de réécriture des templates je reste bloqué à ce niveau.
Si la solution te semble évidente merci de ton aide.
Cordialement
J’ai suivit à la lettre ce splendide tutoriel – cependant en cherchant à afficher mon site, je tombe sur ce message d’erreur :
Warning: Unexpected character in input: ‘\’ (ASCII=92) state=1 in /mnt/163/sdb/e/5/chez.julie.r/wp-content/themes/Creation Theme/index.php on line 10
Warning: Unexpected character in input: ‘\’ (ASCII=92) state=1 in /mnt/163/sdb/e/5/chez.julie.r/wp-content/themes/Creation Theme/index.php on line 10
Parse error: syntax error, unexpected T_STRING in /mnt/163/sdb/e/5/chez.julie.r/wp-content/themes/Creation Theme/index.php on line 10
J’ai eu beau essayer une quantité astronomique de changement – je n’ai toujours pas trouver la fameuse solution !
Merci pour ces tutoriels, en attente d’une réponse
Salut je ne sais pas si ça vous aidera mais j’avais un problème mon thème n’apparaissait pas dans mon wordpress>apparence>thème
J’ai remplacé le code de mon header par :
<html xmlns=”http://www.w3.org/1999/xhtml” >
<meta http-equiv=”Content-Type” content=”; charset=” />
» »
@import url( );
<meta name=”generator” content=”WordPress ” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 1.0″ href=”" />
<link rel=”pingback” href=”" />
et maintenant tout fonctionne du moins jusque là
je vais passer à la suite ^^
désolé mon post n’a pas était prit en entier voici le code :
<html xmlns=”http://www.w3.org/1999/xhtml” >
<meta http-equiv=”Content-Type” content=”; charset=” />
» »
@import url( );
<meta name=”generator” content=”WordPress ” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 1.0″ href=”" />
<link rel=”pingback” href=”" />
bon ok je tente une dernière fois :
”
<html xmlns=”http://www.w3.org/1999/xhtml” >
<meta http-equiv=”Content-Type” content=”; charset=” />
» »
@import url( );
<meta name=”generator” content=”WordPress ” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 1.0″ href=”" />
<link rel=”pingback” href=”" />
”
bon je suis vraiment désolé mais il ne prend pas mon code.
Salut, je trouve ton tutoriel épatant jusqu’ici
Je me retrouve avec 6 fichiers au lieu de 5 dans mon “Theme” mais je verrai ça après… Ca ne doit pas etre bien grave, j’ai header.php, content.php, sidebar.php, footer.php, index.php, style.css (et bien sûr un 7eme avec screenshot.png)
Je dois partir au travail mais j’ai hâte de lire la suite
A bientot!
Sylvaine
Bonjour à toi.
Merci à toi pour ce tuto qui m’a l’aire du plus grand intérêt.
Mais j’ai quand même une question, j’ai fait un .png de 300*240 sous photoshop, puis placé dans le dossier création thème. Mais où devrait-il apparaitre ?? car pour le moment mon site est toujours aussi blanc …
Merci
PS: Workpress me dit que le thème est endommagé.
Bonjour et un grand enorme merci pour ces tutos … simple et comprehensible pour la calamite que je suis …
J’ai donc tout cree comme tu l’as dit malheureusement quand je vais sur ma page d’administration j’ai mon nouveau theme : themes endommage avec en commentaire : La feuille de style manque. Pourtant j’ai bien cree la feuille de style.css et completee avec ce que tu as mis …As tu une explication???
Je te remercie par avance .
Bonne continuation
ELODIE
Cher Francis,
Je n’ai qu’un week end pour mettre en application tous tes tutos (bien écrits en plus d’être utiles, ce qui est plutôt rare…) mais je crois que cela ne va pas être possible. J’ai déjà du surmonter le problème du port 80 d’Apache (au moins 3 heures de perdues avec ces logiciels qui veulent tous écouter à la même porte…).
Maintenant que je suis prête pour le local, je suis toutes tes instructions à la lettre (5 fichiers en notepad enregistrés dans un dossier “creation theme”…).
Là j’ouvre mon panel wordpress, …
… et rien !!
Le thème créé n’apparaît pas. Désolation !
J’espère que tu t’intéresses encore aux déboutés du niveau 5.
Merci d’avance
Astrid
Bonsoir,
vu que certains tournent sous IE6 faut-il faire un style.css pour ce navigateur même si cela représente moins de 20 % des internautes ?
Bonsoir, voilà je poste ici car j’ai suivi votre tutoriel il y a quelques temps et il m’a été fort utile pour créer le design de mon site mais j’ai remarqué il y a peu une erreur (au niveau du code): dans le fichier “header” que vous communiquez en haut de la page, la balise “” est insérée deux (2) fois ! Ce qui fait que le code du “head” est doublé sur toutes les pages ! Rien d’important au niveau du graphisme ni même au niveau de l’utilisateur, juste une “tache” pour quelqu’un qui regarde bien son code !
Cordialement, Valentin !
Bonjour,
Merci pour votre tutoriel qui me parait comme l’ont dis les autres, écris de manière très pédagogue et très limpide.
J’ai juste un petit problème, j’ai fait toute les choses demande, crée les fichiers mettre le codage dedans, envoyer le tout du ma DB, puis arrivant sur ma page de thème voila se qui s’affiche : “Thèmes endommagés
Les thèmes suivants sont installés mais incomplets. Les thèmes doivent avoir au moins une feuille de style et un modèle.
Nom Description
La feuille de style manque.”
Le CSS à bien l’aire déclaré dans header.php et j’ai tout re-vérifier tout est bien remplie et à le bon nom à la bonne place.
Auriez vous une solution, que je puisse suivre votre Tuto’ ?
Merci d’avance, bonne soirée.
As-tu bien mis la description du thème dans le CSS (la seule chose à mettre dedans) ?
Si c’est de sa que tu parle :
/*
Theme Name: Creation Theme
Theme URI: http://www.fran6art.com/
Description: The first theme created by Francis Chouquet.
Version: 0.1
Author: Francis Chouquet
Creation Theme by Francis Chouquet || http://www.fran6art.com
*/
Oui je les mit dedans.
Problème dans ton header, tu appelle 2 fois :
Bonjoir Fran6, je ne sais pas si mon commentaire est passé mais je le reprends.
je voulais savoir comment charger la bibliothèque “jquery” sachant qu’elle est intégrée dans wordpress et qu’il faut le faire en insérant ” php wp_enqueue_script(”jquery”); ” avant ” ?php wp_head(); ? ” dans le HEAD de mon thème.
En fait je ne vois pas du tout où ni comment procéder poury arriver. J’ai grand besoin de ton aide. Merci.
Salut Mike,
Normalement, tu as juste un truc du genre :
script type=’text/javascript’ src=’http://www.tonsite.com/wp-content/themes/theme/js/jquery/jquery.js’>
à insérer, selon la version que tu utilises...
Merci fran6.
Effectivement cela fonctionne comme cela également ( d’ailleurs j’avais fait cela avant que des conflits avec certains plugin n’apparaissent…)
Bref pour que cela fonctionne correctement j’ai procédé comme suit :
-j’ai ajouté dans le header : “php wp_enqueue_script(”jquery”); juste avant “php wp_head();”
, puis remplacé dans les fichiers .js utilisant jQuery le symbole “$” par “jQuery”.
A partir de là tout a fonctionné ainsi que mes plugins…
Merci pour ton aide. Je reviendrais sûrement
Merci Francis pour ce superbe tuto…
j’ai néanmoins un énorme problème,
j’ai la version 2.9 de wordpress.
j’ai suivie le tutorial en faisant des copier coller…
mon site est en local dans dreamweaver ( j’utilise wamp car j’ai un mac )
j’ai bien placer le dossier Creation Theme dans wp-content/theme et tout mes fichiers php en vrac dans wp-content/theme/creation Theme, ainsi que le fichier style css, mis en css dans dreamweaver …
je lance le local… entre mon mot de passe, entre dans mes panneaux d’administrateur de mon wordpress et j’ai tout mes templates télécharger, sauf celui qui a été créer… il n’y es pas… ( ce qui forcement ne va pas rendre son application facile…)
je vous remercie d’avance de votre interet, et que vous puissiez me renseigner ou non, vous remercie pour ces informations que vous m’apporté …
amicalement
Boris
Tu es à quel niveau des tutoriels, juste au 5 ? Il faut penser à bien remplir les bons champs dans la feuille de style…
Salut,
Tout d’abord un grand merci pour ce tuto. J’ai déjà un blog sur canalblog, mais j’ai décider de me lancer sur Wordpress mais avec mon style donc autant dire que ce tuto tombe à pic !!!!
Par contre j’ai un petit problème, je viens de finir le n°5 et quand j’affiche mon site ce qui s’affiche sur la page c’est ce qui ce trouve dans l’index !?!
(http://petiteclochette.fr/WordPress/)
Elle est où l’erreur !?!
Merci d’avance pour ta réponse ;D
j’en suis au tutoriel 5, a la partie 2.3 Création de la feuille de style, style.css
le problème arrive a la fin, lorsque je lance wordpress et que je vais dans thème ou JE DEVRAI voir apparaitre le nouveaux thème créer… sauf qu’il n’en est rien… je vois mes thème télécharger ainsi que ceux de base… mais je ne vois pas mon thème…
j’ai tenté d’effacer l’historique rien n’y fait … pourtant jusque la, bien que buvant la leçon de ce tuto, je n’ai fait que des copier coller ( je doute donc que cela soit une erreur de code étant donné que pour d’autre avec ce même code cela marche ) j’ai nommé les fichiers exactement de la même manière que le tuto et ils se trouve dans thème comme prévu…
l’erreur viens peu être de ma version de wordpress??? (2.9)
merci encore
Boris
bn… je cherche en vain … mais la j’ai l’impression apres plusieurs heure, d’avoir fait le tour :/
Boris > Va voir au tuto 23, tu trouveras les fichiers du thème, tu pourras comparer… Et utilises un autre éditeur de code que Dreamweaver, ça peut biaiser le contenu du code !!
merci pour cet information…
j’ai télécharger le contenu, qui en effet marche sur wordpress…
j’ai comparé… et … rien… j’ai fait exactement pareil
donc, la j’ai télécharger smultron unediteur gratuit pour eviter dreamweaver , et je retente l’operation
dans tout les cas, les fichiers que j’ai recu vont me permettre de continuer donc merci merci et encore merci
Je viens de recommencer avec smultron et… CA MARCHE !!!
donc Dreamweaver bouuuuuuuuhhhhh !!!!!
vous aviez raison grand maitre Francis
merci encore
Bonjour Francis et merci pour ce tutoriel.
J’en suis a la partie 5 de la création, j’ai comme Boris, copier et coller les infos sans les changer, envoyer le thème en FTP via filezilla, mais quand je me rend sur thème de Wordpress, rien apparait…
L’horreur, moi qui pensais avoir enfin trouver les solutions à mon problème…
J’ai la dernière version de WordPress 2.9.1. , peut être le problème provient-il de ça?
Merci d’avance,
Thierry
Bonjour Thierry,
Allez chercher les fichiers du thème au niveau du tuto 23 et vous pourrez comparer avec votre code !
Je suis au tuto 5, j’ai tout remplis comme tu as dis de le faire mais wordpress (version 9.2) me dit qu’il manque la feuille de style.
Je ne sais pas du tout quoi faire…
merci de ton aide !