Créateur de thèmes WordPress :: Formateur :: Web Designer

Genesis :: Créer un modèle de page WordPress sur mesure

Publié le : 

Modifié le : 

Par : 

Le framework Genesis respecte la hiérarchie des thèmes classique WordPress. Dans cette partie nous verrons comment créer simplement un modèle de page.

Création d’un modèle de page

Comme tout modèle de page, il suffit d’ajouter en haut de son fichier en commentaire PHP la phrase suivante:

<?php
// Template Name: Nom du Modèle de page
?>

Attention pour que ça fonctionne, vous devez respecter les éléments suivants

  • cela doit être un commentaire PHP
  • il n’y a pas d’espace entre Name et les : qui suivent
  • les majuscules dans Template Name: sont optionnelles
  • le Nom du Modèle de page est le nom du modèle que vous allez créer.

Création d’un modèle de Page Genesis

Pour que le modèle fonctionne dans Genesis, il suffit de créer dans votre thème enfant un fichier qui aura le nom que vous voulez. La seule chose à respecter est de mettre genesis(); à la fin de votre fichier PHP.

Au final vous aurez un fichier de type:

<?php
// Template Name: Nom du Modèle de page

// votre nouveau contenu ira ici

genesis();

C’est tout. La simple fonction genesis(); se chargera en fonction de la hiérarchie WordPress d’afficher les boucles adaptées et le HTML correspondant pour les pages, articles, archives…

Remarque: La fermeture du php n’est pas obligatoire à la fin des fichiers et c’est même conseillé.

Nous verrons dans un article ultérieur comment personnaliser des modèles plus complexes. Pour l’instant concentrons nous sur un simple modèle de page.

Ajout de nouveaux contenus dans la page

Genesis possède de nombreux Hooks ou crochets qui permettent de filtrer ou d’injecter de nouvelle zone dans votre site. Un site répertorie tous ces hooks: le Visual Hook Guide créé par Christopher Cochran. Ce guide permet de voir toutes les zone où il est possible d’injecter du contenu avec la fonction WordPress add_action (plus de détail voir l’article du codex)

add_action après le contenu de la page

Attention le guide qui suit repose sur la base de thème HTML5 valable depuis la version 2 de Genesis. et depuis le nom des hooks a parfois été modifié. Si vous avez un compte chez StudioPress, la liste complète sur le site officiel.

En suivant le guide, nous allons nous concentrer sur le modèle de page classique détaillé avec cette page.

Pour utiliser add_action il suffit de respecter l’écriture suivante dans votre nouveau modèle de page:

add_action('nom_du_hook','nom_de_votre_function');
function nom_de_votre_function() {
    // votre code PHP   
}   

Ici, je veux insérer un titre après mon contenu. Je vais alors choisir la zone genesis_after_entry et cela donnera:

<?php
// Template Name: Modèle 1


add_action('genesis_after_entry','gn_contenu_sup');
function gn_contenu_sup(){
    echo "<h3>Nouveau contenu après l'article</h3>";
}

genesis();

Ce qui donnera en ligne:

Capture: Nouveau contenu avec un hook sur un modèle de page Genesis

Remarque: comme indiqué plus haut, si vous souhaitez utiliser une version plus ancienne de Genesis, genesis_after_entry est à remplacer par genesis_after_post

add_action dans le contenu de la page avec les priorités

Ici nous allons aborder un autre concept du add_action en ajoutant une priorité. Ce paramètre optionnel permet d’utiliser la même zone avec un ordre de priorité. La priorité par défaut est de 10. Je m’explique.

Si vous voulez avec l’action précédente placée le nouveau contenu avant le contenu de l’éditeur, il faudrait modifier notre code précédent en utilisant le hook Genesis qui correspond à genesis_entry_content. Cela donnerait:

<?php
// Template Name: Modèle 1


add_action('genesis_entry_content','gn_contenu_sup', 5);
function gn_contenu_sup(){
    echo "<h3>Nouveau contenu après l'article</h3>";
}

genesis(); 

Dans ce cas, mon titre se placera juste après le titre de la page, car j’ai utilisé la priorité 5 pour le hook. Du coup, si je veux placer mon nouveau contenu, juste après celui de la page, je changerai 5pour 15 ou tout nombre supérieur à 10 qui est la priorité par défaut. Ainsi, vous pouvez à loisir très facilement ajouter des champs personnalisés sans remettre en question l’affichage de votre page.

Remarque: comme indiqué plus haut, si vous souhaitez utiliser une version plus ancienne de Genesis, genesis_entry_content est à remplacer par genesis_post_content

Formation personnaliser son thème WordPress avec le Framework Genesis

25 réponses

  1. […] Dans ce tutoriel, nous verrons la technique pour utiliser les hooks fournis par Genesis, ce framework de thème WordPress.  […]

  2. […] “Dans ce tutoriel, nous verrons la technique pour utiliser les hooks fournis par Genesis, ce framework de thème WordPress.”  […]

  3. Bonjour et merci pour tous ces tutoriels.

    Peut on utiliser le même schéma pour faire des modèles d’articles et non de pages ? Je voudrais utiliser la structure des catégories et des tags que j’ai déjà mis en place.

    J’ai bien un nouveau modèle de page, mais ca ne repond pas à mon besoin

    Merci

    1. Bonjour
      Merci pour ce retour.

      Oui, il est possible de faire la même chose pour les articles. Il faut juste utiliser un modèle que tu appelleras single.php. Ou bien, tu fais un conditionnel PHP dans le fichier functions.php en injectant le code dont tu as besoin. Par contre, c’est un peu plus technique.

      1. merci je vais essayer le single.php alors

      2. Bonjour
        J’utilise le thème eleven40 Pro et le plugin CPT UI en WordPress 3.8
        Je sais que ce n’est pas un forum de support, mais je tourne en rond depuis ce matin 🙁
        Quand je veux créer avec CPT UI un modèle d article ( post ), la meta box Page Attributes ne me propose aucun modèle.
        tout fonctionne parfaitement pour les pages, donc je pense que j’utilise la bonne méthode, mais là je suis coincée … J’ai bien mon single-ww1.php dans mon thème enfant, correspondant à mon CPT WW1 …

        Y a t’il du code à ajouter dans le functions.php pour qu’on puisse choisir son modèle dans la meta boc Attributs au niveau des articles ?

        Est ce que mon template ne supporte pas cette fonction ?

        Y a t’il un tuto clair en français quelque part ?

        Bref, je galère …
        Merci d’avance

        Brigitte

        1. Pour avoir un attribut de page, le CPT doit avoir la propriété page et non post (valeur par défaut).
          Et effectivement, la single.php concernée dans votre cas sera single-www1.php.
          Après il faut juste faire des test pour voir si le nouveau contenu (Champs personnalisés, html…) s’affiche dans ces Custom Post Type.

  4. Laurent

    Bonjour et merci pour tes articles.
    Est ce que ces pages (ou articles) personnalisées peuvent être la solution à mettre en place si on veut un template pour la home et un autre pour les pages et articles.
    Je m’explique : si on veut tout simplement 3 colonnes sur la home et 2 colonnes sur les pages et articles.
    Si j’ai bien compris, par défaut dans Genesis, tu configures le nombre de colonne pour le site et tu peux modifier cela au cas par cas pour chaque page et article.
    Mais l’inverse n’est pas possible, c’est à dire configurer par défaut le nombre de colonne pour toutes les pages et articles et modifier cela uniquement pour la home..

    1. Bonjour
      La home sur Genesis, en fonction du thème choisi, fonctionne différemment. Tu dois changer l’affichage dans le fichier PHP home.php ou front-page.php
      La fonction est la suivante add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
      Tu peux trouver les autres réglages dans ce tutoriel

      1. Laurent

        Merci Gregoire.

  5. […] Genesis :: Comment créer un modèle de page WordPress sur mesure. Le framework Genesis respecte la hiérarchie des thèmes classique WordPress. […]

  6. […] Créer un modèle de page sur mesure […]

  7. Christophe

    Bonjour,
    Je souhaite réaliser un modèle pour ma page d’accueil et j’ai utilisé le code suivant :

    <?php
    //Template name: Bighome

    add_action( 'genesis_entry_content', 'altitude_soustitre' );

    function altitude_soustitre()
    {
    echo "coucou";
    }

    genesis();

    J'ai cependant un problème car toute page associée à ce modèle, affiche correctement le petit "coucou" sauf… si cette même page est désignée comme page d'accueil statique (dans mon admin)…
    Là j'avoue ne pas comprendre… Aurais-tu une astuce ?
    Merci
    Ps j'utilise Genesis+altitude Pro

    1. Bonjour,
      Il faut renommer la page de ton thème front-page.php comme suit: home.php

      1. Christophe

        Merci pour ta réponse, bah finalement, j’ai placé mon code à la fin de mon fichier front-page.php et ça fonctionne tout seul (sans créer de template ni sélectionner de modèle de page pour ma page d’accueil) je ne sais pas si cette méthode est la bonne…

  8. Christophe

    Bonjour Grégoire !
    Tiens j’ai une autre petite question :

    J’utilise Genesis avec un thème enfant défini par défaut en full-page.
    Je voudrais que sur les articles et sur la page catégorie des articles afficher à chauqe fois une sidebar : comment faire ?
    Je pourrais à chaque article que je crée changer l’option par défaut mais franchement c’est lourd…
    Alors y a-t-il une autre astuce ?
    Merci

    1. Bonjour Christophe,
      Il faut faire une condition dans le fichier functions.php et imposer les options de mise en page que tu peux trouver à cette adresse. Chercher « maquette » avec la recherche du navigateur.

      1. Christophe

        J’ai beau tester dans tous les sens, soit la sidebar s’affiche sur toutes les pages soit jamais, impossible de trouver la solution, j’avais essayé :

        add_action( ‘genesis_before_sidebar_widget_area’, ‘themeprefix_remove_sidebar’ );

        function themeprefix_remove_sidebar() {
        if ( is_single() || is_category() ) {
        remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ );
        }
        }

        Mais sans succès

        1. Il faut faire la condition avec le hook genesis_meta. Tu peux trouver des exemples en ligne.

          1. Christophe

            Merci pour ton implication Grégoire,
            Voici finalement la solution donnée par Studiopress ça pourra aider les nuls comme moi…
            add_filter( 'genesis_pre_get_option_site_layout', 'full_width_layout_single_posts' );
            function full_width_layout_single_posts( $opt ) {
            if ( is_single() ) {
            $opt = 'content-sidebar';
            return $opt;

            }
            }

          2. Merci Christophe. Oui, effectivement, c’est une autre approche. La piste que je te donnais contrôle en amont le modèle avant d’appliquer le add_filter

          3. Christophe

            Franchement ce Genesis ! Depuis que je me suis plongé dedans c’est réellement ou outil d’enfer. Certes il faut y passer du temps mais une fois qu’on commence à comprendre le truc c’est à mon avis, le meilleur outil à « coupler » à WordPress sur le marché. Le code est propre, réutilisable, leger et optimisé, il n’y a pas mieux.
            Alors Grégoire, à quand un bouquin sur Genesis ?
            Sinon pour les formations chez Apaxxdesigns combien de sessions sont programmées dans une année, je me ferais bien la 301 ou la 401…

          4. Cool. Pour les ressources, envoie un message par la page contact. On en discute.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.