Un thème enfant pour Twenty Seventeen (WordPress)

J’ai besoin d’utiliser un thème enfant du thème WordPress Twenty Seventeen. Dans cet article, j’explique comme le créer et le modifier légèrement. D’autres articles de cette série expliqueront des modifications plus importantes.

Création d’un thème enfant

A l’aide de Filezilla (ou autre accès en FTP) créer un répertoire 2017-child  dans wp-content/themes/  du site WordPress utilisé.

Y placer les trois fichiers suivants :

  1. functions.php
  2. style.css
  3. screenshot.png (optionnel) : une image de votre choix, au format 600 px de large et 450 px de haut.

Dans functions.php, placer le code suivant (source Codex WordPress)  :

Dans style.css , il doit y avoir l’en-tête suivant :

Et voilà, maintenant le tableau de bord WordPress me propose le thème « Twenty Seventeen Child ».

Modifier le contenu de la page d’accueil

Par défaut, le thème est réglé avec la page « Accueil » comme page d’accueil statique. Je n’y touche pas.

Par contre, je veux modifier le contenu automatique de cette page.

La page d’accueil statique de Twenty Seventeen

Elle contient d’abord le contenu de la page réglée comme page d’accueil statique puis les contenus des 4 sections définies dans le menu « apparence / Personnaliser / Options du thème ».

Je crée 4 pages, intitulées « Caméra », « Nest », « Eedomus » et « Autres » et je les publie.

Ensuite dans le tableau de bord WordPress, je choisis « apparence / Personnaliser / Options du thème » puis j’affecte chacune des pages créées à l’une des 4 sections.

Pour aller plus loin, voir « How to Customize the Free Twenty Seventeen WordPress Theme« .

Créer des modèles de page

A l’aide de Filezilla (ou autre accès en FTP) copier le fichier page.php du thème Twenty Seventeen (répertoire wp-content/themes/twentyseventeen ).

Placer ce fichier dans un répertoire pages  dans wp-content/themes/2017-child/  du site WordPress utilisé. Le renommer (pour moi al-dashboard-1.php) et en modifier le contenu pour que l’en-tête contienne un « template name » :

Maintenant, si je vais modifier (ou créer) une page dans le site, dans la barre latérale de droite, dans le bloc « Attributs de la page », la liste déroulante « modèles » me propose « maquette section 1 (caméra) ».

Mais attention, si cette page doit être insérée dans la page d’accueil, seul le contenu créé avec l’éditeur WordPress s’affiche…

Et maintenant ?

Je vais utiliser ce thème enfant pour construire un tableau de bord domotique pour ma maison. J’en explique les étapes de construction dans la série d’article . Lorsque je ferai des modifications du thème enfant que je viens de créer, je les expliquerai dans les articles suivants de cette série

9 commentaires


  1. Bonjour,
    Merci pour ce tuto,
    Mais j’ai cette erreur qui s’affiche quand j’active le 2017-child chez moi pouvez-vous m’aider ?
    Fatal error: Cannot redeclare twentyseventeen_setup() (previously declared in /…/public_html/wp-content/themes/2017-child/functions.php:34) in /…/public_html/wp-content/themes/twentyseventeen/functions.php on line 216

    Répondre

    1. Bonjour Okom

      Merci pour ce commentaire.
      Vous avez utilisé une fonction twentyseventeen_setup qui est déjà utilisée par le thème parent. C’est pour cela que l’on nomme toujours nos fonctions avec des préfixes, comme ici par exemple tw17_
      Bonne poursuite
      Anne-Laure

      Répondre

      1. Bonjour Anne-Laure,
        Merci pour cette rapidité,
        En fait je souhaite créer twentyseventeen enfant c’est pour cela que j’ai suivi votre tuto, en ce qui concerne le préfixe je ne vois pas trop où le changer car mon site est déjà en ligne. Et aux lignes indiquées sur l’erreur je ne vois pas de préfixe.
        Comment ferai-je ?

        Répondre

        1. Je viens de modifier toute les functions par twentyseventeen_ par tw17_
          Là j’ai ceci:
          Fatal error: Cannot redeclare twentyseventeen_custom_header_setup() (previously declared in /…/public_html/wp-content/themes/twentyseventeen/inc/custom-header.php:36) in /…
          /public_html/wp-content/themes/twentyseventeen/inc/custom-header.php on line 52

          Répondre

          1. Bonjour Okom,
            C’est le même problème que dans votre commentaire précédent avec une autre fonction, qui n’a pas non plus de préfixe correct.

            Logiquement il ne devrait pas y avoir beaucoup de fonctions dans le thème enfant, et en tous cas pas plus que dans mon tutoriel. Dans le tuto il n’y a qu’une seule fonction créée avec le thème enfant, c’est tw17_child_enqueue_styles().

            Je vous conseille de vous en tenir à ce que je propose dans ce tuto, comme ça vous comprendrez comment fonctionne un thème enfant. Ensuite vous ajouterez une nouvelle fonction si vous voulez, mais vous ferez progressivement des erreurs et apprentissages.

            Bon thème enfant !
            Anne-Laure


  2. Bonjour,
    J’ai récemment créé un site avec twenty seventeen.
    J’ai réalisé toutes mes modifs css sur twenty seventeen.
    Est-il important de créer néanmoins un thème enfant ?
    Merci de votre retour.
    Cordialement

    Répondre

    1. Bonjour « Graebling »,

      Merci pour votre commentaire. Oui, c’est essentiel de créer un thème enfant, même si l’on ne fait que modifier le css.
      Si on ne le fait pas, soit on cesse de mettre à jour le thème parent, soit on perd ses modifications lors des mises à jour.
      Les mises à jour sont essentielles pour la sécurité du site, mais aussi pour adapter le thème aux évolution de WordPress. C’est pourquoi je fais toujours les mises à jour de WordPress, des extensions et du thème. Et j’utilise un thème enfant.
      Cordialement,
      Anne-Laure

      Répondre

  3. Bonjour,

    Merci pour ce tutoriel simple et claire.
    Seulement en local ça ne fonctionne pas pour moi. C’est comme si la feuille de style n’était pas prise en compte.
    Une idée d’où cela peu venir ?
    Mon chemin est le suivant : ‘/style.css’, je ne pense pourtant pas que le fait que le site soit développé en local fasse que ça ne passe ?

    Répondre

    1. Bonjour,
      Je réponds avec beaucoup de retard, désolée.
      En local ça doit fonctionner aussi, et le chemin reste wp-content/themes/nom-du-repertoire-theme-enfant.
      Bonne installation !
      Anne-Laure

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *