Accueil > Wordpress > WordPress: créer un thème enfant (child theme)

WordPress: créer un thème enfant (child theme)

child themeJ’utilise depuis longtemps le thème Inove de Neoease. Mais ce thème est maintenant assez répandu (15eme thème le plus populaire sur WordPress.org ! ) et je voulais le personnaliser : une page d’accueil qui présente le dernier article puis les six suivants sur deux colonnes, une page de connexion personnalisée et quelques changements de style ici et là.

Étant assez impatient j’avais tout d’abord fait des modifications quick & dirty, c’est à dire directement dans le thème Inove. Il ne faut bien sûr pas faire ça, car à chaque nouvelle version du thème… il faudra ré appliquer les modifications réalisées.

Le principe du thème enfant est de permettre la modification et l’ajout de fonctionnalités à un thème parent sans y apporter de quelconque changement. L’avantage majeur est donc de pouvoir bénéficier des mises à jour du thème parent tout en poursuivant les changements sur le thème enfant.

Créer un thème enfant

Faire un thème enfant est très simple. Créez un répertoire dans le dossier /themes, déposez un fichier style.css correctement formaté et vous avez un thème enfant !

Un thème enfant est installé dans son propre dossier placé dans wp-content/themes. Ci-dessous la structure pour associer un thème enfant au thème inove :

  • public_html
    • wp-content
      • themes (dossier contenant tous les thèmes)
        • inove (dossier contenant le thème inove)
        • inove-child (dossier contenant mon thème enfant, le nom peut être qelconque)
          • style.css (le seul fichier obligatoire, il doit s’appeler style.css)

Ce dossier peut contenir uniquement style.css mais il peut aussi contenir tout autre fichier classique à un thème:

  1. style.css (obligatoire)
  2. functions.php (option)
  3. fichiers modèles, header.php par exemple (option)
  4. Autres fichiers (option)

Le thème enfant va ainsi hériter de l’ensemble des fonctionnalités du thème parent. Seuls les fichiers qui seront ajoutés dans le dossier du thème enfant surpasseront ceux du thème parent. Par exemple, si vous voulez changer l’entête de votre thème habituel, utilisez le thème enfant et ajoutez le fichier header.php modifié suivant vos souhaits.

Vous pouvez également vous limiter à l’ajout d’une feuille de styles CSS et multiplier ainsi les changements purement visuels tout en conservant la structure HTML du thème parent.

Le fichier style.css

Voici un exemple de contenu de fichier  style.css:

/*
Theme Name:     inove Child
Theme URI:      http: //example.com/
Description:    Child theme for the inove theme
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       inove
Version:        0.1.0
*/

@import url("../inove/style.css");

a#powered {
 background:url(images/legome.gif) no-repeat;
 display:block;
 width:59px;
 height:90px;
 float:left;
 margin:0 10px 0 5px;

}

Theme Name et Template sont les deux informations nécessaires. Le nom du thème parent doit être renseigné en prenant garde aux caractères majuscules.

La commande @import permet  de charger en premier la feuille de style du thème parent. Les instructions suivantes sont ensuite de nouvelles instructions CSS propre au thème enfant.

Pour activer le thème enfant, il suffit ensuite de le sélectionner dans l’interface d’administration WordPress.

Le fichier functions.php

Contrairement aux autres fichiers du thèmes (index.php, single.php, etc.), le functions.php ne sera pas écrasé par celui du thème enfant – même s’il existe. Il sera au contraire chargé juste avant le functions.php du thème parent. Vous pouvez donc ajouter des fonctionnalités au thème parent sans « casser » ce dernier.

Par exemple j’ajoute une feuille de style spécifique à la page de connexion WordPress.

<?php
 //login custom
 function logingk() {
 echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/css/login.css" />';
 }
 add_action('login_head', 'logingk');
?>

Plus de détails sur les thème enfants dans le codex http://codex.wordpress.org/Child_Themes, et sur la personnalisation de la page de login sur geekeries.fr

Tags: ,
  1. 16/09/2010 à 17:41 | #1

    Salut !
    N’hésite pas à reprendre ou à citer geekeries.fr pour la feuille de style (css) du « login.css » de WordPress !

    Ça peut servir en effet :)

  2. 16/09/2010 à 20:32 | #2

    J’avais fait ça il y a bien longtemps, j’en avais oublié l’origine. C’est chose faite, rendons à César ce qui est à César ;-)

  3. steph
    05/01/2011 à 11:54 | #3

    salut

    j’utilise le thème inove et j’ai un p’tit souci… pour l’affichage des images.
    En effet, dans un article lorsque je clique sur l’image cela n’ouvre pas directement la « lightbox », mais une autre page de l’article avec uniquement la photo sur laquelle je viens de cliquer.
    Il faut ensuite re-cliquer sur l’image pour ouvrir la lightbox…

    peut être avez vous une solution ?

  4. 05/01/2011 à 21:15 | #4

    @Steph Je n’utilise aucun plugin particulier. Lorsque je place une image dans un article, je clique sur « lier à l’image » dans les propriétés de l’image « Cible du lien » , et le tour est joué. Exemple ici : http://fanta78.lasnespace.com/2010/kitesurf-essai-de-la-camera-kodak-playsport-hd-1080-zx3/

    J’utilise sur un autre WordPress le plugin « NextGENeration Photo gallery ».

  5. steph
    06/01/2011 à 21:12 | #5

    merci ! ca fonctionne nikel !
    Super le blog, une mine d’informations – je l’ai ajouté à mes favoris !

  6. 01/01/2012 à 15:51 | #6

    Bonjour,

    1 – Une question le fichier functions.php du thème parent doit-on le modifier ou en créer un dans le thème enfant et que les deux serons chargé.

    2 – le fichier login.css tu le place dans le dossiers parent ou dans enfant ou dans wordpress.

    Merci

  7. 01/01/2012 à 21:00 | #7

    Bonsoir Bruno. Il n’est pas souhaitable de modifier le fichier functions.php du thème parent, ainsi lorsque le thème sera mis à jour tu ne perdras pas tes modifications, qui sont elles dans ton thème enfant /themes/inove-child/functions.php.
    De même pour le login.css, tu le places dans ton thème enfant /themes/inove-child/css/login.css

  8. 01/01/2012 à 21:42 | #8

    Merci pour ta réponse,

    Mais dois je créer un fichier functions.php vide et y mettre ce que je veux de nouveau, ou dois je mettre le même du thèmes parent plus la modif.

    Merci

  9. 02/01/2012 à 22:14 | #9

    Bonjour,

    J’ai une nouvelle question à propos des thémes enfant.

    J’ai un thème que j’ai internationalisé et j’ai incéré du code qui fait appel au fichier langage et j’ai du le mettre dans functions.php et theme-options.php dois je créer deux nouveaux fichiers dans le theme enfant ou encore si je dois créer un nouveau fichiers pour theme-options.php dois je le copier dans le dossier thème enfant ou seulement créer un fichier vide et de mettre mon bout de code qui fait appelle au fichier de langue du thème?

    Merci
    Bruno

  10. 04/01/2012 à 18:55 | #10

    Bonjour,

    J’ai créé un fichier functions.php dans le dossier du thème enfant et apparemment il ne fonctionne pas car j’ai commencé à créer un design sur la page de connexion et le fichier ne fait apparemment pas appelle au fichier css que j’ai créé pour l’occasion dans un dossier css. Voici mon code dans le fichier enfant functions.php.

    <?php // logo personnalise
    function childtheme_custom_login() {
    echo '’;
    }

    add_action(‘login_head’, ‘childtheme_custom_login’);
    ?>

    Merci pour votre aide.

  11. 04/01/2012 à 21:20 | #11

    @Bruno pour les fonctions que tu veux ajouter, il suffit des les placer uniquement dans le fichier du thème enfant. Je n’ai pas trop de disponibilité ces prochains jours, et le sujet est un peu ancien, par contre pour t’aider je te propose de télécharger mon thème inove-child et de décortiquer comment il fonctionne.

  12. 09/01/2012 à 22:51 | #12

    Merci j’ai réussi en fait j’avais 2 retours à la ligne dans le fichier functions.php à la fin.
    Par contre ce que j’aimerais savoir j’ai fait une modif de plus pour avoir un logo dans mon header. J’ai copier collé le fichier header parent vers enfant. Mais il fait doublon j’ai rajouté mon code :

    <a href="/ »><img src="/images/logo.png » width= »322px » height= »51px » alt= » » />

    A la place du nom du blog. Ce que je voudrais savoir si je peux effacer le reste du fichier enfant et ne laisser que le code que j’ai rajouté.

    Merci

  13. 10/01/2012 à 22:24 | #13

    @Bruno Il me semble que le header du thème enfant doit être complet, WP n’applique pas les deux. D’ailleurs dans mon thème iNove-Child le header est quasi identique au parent mais seul celui-ci s’applique. Je pense donc qu’il faut conserver un header complet, sinon c’est celui du Parent qui s’applique.
    De toute façon on ne casse rien en manipulant le thème enfants, en cas d’erreur on replace le fichier modifié et c’est corrigé.

  14. 10/01/2012 à 23:00 | #14

    @fanta78
    Ok merci pour ta réponse

  15. martin
  16. stef
    30/06/2012 à 13:16 | #16

    j’ai un thème que j’ai modifié (dans les fichiers php etc …)
    je veux le mettre a jour ,
    Ma question :
    la mise a jour devient le thème parent et le thème modifié devient le thème enfant c’est ca ?

    MErci de vos reponses

  17. 30/06/2012 à 18:02 | #17

    Si tu as modifié directement des fichiers dans un thème, la mise à jour va tout écraser. Par contre si tu mets à jour le thème parent, l’enfant ne sera pas touché et les personnalisations conservées.

  1. 02/03/2014 à 11:54 | #1