Personnaliser son blog WordPress ? FACILE ! Créez facilement votre « thème enfant » pas à pas…

hème enfant pour personnaliser blog WordPressA ce jour, WordPress compte 2592 thèmes gratuits téléchargeables depuis le CMS. Largement de quoi trouver son bonheur ! Ou presque… Car il y a toujours un petit détail qui vous chatouille : Ne serait-ce que la couleur des titres, ou la taille des textes… Vous serez donc très vite tenté de modifier légèrement quelques paramètres, pour adapter le thème choisi complètement à vos attentes. Comment faire ? Facile !

2 solutions s’offrent à vous pour effectuer vos modifications, et personnaliser votre thème WordPress.

1° solution :

La première solution, la moins propre, consiste à modifier directement les fichiers du thème, et modifier les portions de code des articles, des commentaires, ou simplement de l’en-tête de votre document ou du fichier functions.php pour ajouter quelques morceaux de code trouvés sur la toile. Sachez qu’en faisant cela, il ne vous sera plus possible de mettre à jour votre thème. En effet, comme les plugins, les thèmes peuvent subir des mises à jour pour améliorer des fonctionnalités, mettre à jour de sécurité, etc. S’il vous validez la mie à jour d’un thème que vous avez modifié, vos modifications seraient tout simplement écrasées. Autant vous dire que ce n’est pas la meilleure des solutions !

2° solution : « Créer un thème enfant »

La deuxième solution, la meilleure, consiste à créer un thème enfant.
La création d’un thème enfant n’est pas très complexe et permet de bénéficier du thème parent tout en autorisant la modification de certains fichiers à partir du thème enfant.

Voyons cela plus en détail avec un exemple concret.

Dans notre exemple, nous allons créer un thème enfant à partir du thème Twentyfourteen, nous l’appellerons Radius-enfant

1)    Création du dossier de thème

Créez un dossier nommé radius-enfant.  

2) Création du fichier style.css

Dans le dossier que vous venez de créer, créez un fichier style.css avec comme contenu de base :

/*
Theme Name:     Radius-blog-concept
Theme URI:     http://blog-concept.com/
Description:   Thème enfant pour le thème Radius
Author:         Hansen
Author URI:     http://blog-concept.com/
Template:       Radius                
Version:       0.1.0
*/

Toutes ces lignes de code servent à décrire le thème enfant. Ce descriptif s’affichera dans l’espace d’administration de votre blog WordPress (Apparence > Thèmes). Vous êtes relativement libres sur le contenu, sauf pour la ligne 7 (Template) qui est le « slug » (identifiant) du thème de référence, le thème parent. Ce slug correspond au nom du dossier du thème que l’on souhaite modifier, ici Radius, qui porte comme nom de dossier « Radius ».

Copier le contenu de style.css de Radius pour le coller dans votre CSS du thème radius-enfant

Téléchargez maintenant le dossier que vous venez de créer à l’aide de FileZila dans le dossier wp-content/themes de votre blog WordPress.

Votre thème enfant apparaît maintenant dans Apparance > Thèmes de l’espace d’admin de WordPress.

3. Activer votre thème enfant

Vous pouvez maintenant activer votre thème enfant. Celui-ci va simplement adopter le comportement de son thème parent, puisque nous n’avons encore aucun fichier « template » (par exemple header.php) dans notre dossier de thème.
3) Modification des templates

Il est désormais possible d’éditer les portions du templates parent comme bon vous semble. Comment ? Simplement en copiant le fichier à modifier depuis le thème parent, et en le collant dans votre thème enfant. Les modifications à apporter se feront sur les fichiers que vous avez copié depuis le thème parent dans votre thème enfant.
Prenons un exemple :

Copiez le fichier header.php du thème parent (Radius, pour rappel), puis collez-le dans votre thème enfant.
Vous avez maintenant dans votre dossier la feuille de style, et ce fichier header.php.
Ouvrez le fichier header.php pour édition et remplacez

  1. <h2 id= »site-description »><?php bloginfo( ‘description’ ); ?></h2>  

par

  1. <p id= »site-description »><?php bloginfo( ‘description’ ); ?></p>  

Le remplacement de h2 par p n’aura aucune incidence visuelle, par contre vous constaterez que le code a bel et bien changé.

Cet article vous a plu ? Offrez-nous un Like sur Facebook !

Like bisous

3 commentaires

  1. Bonjour, j’utilise wordpress depuis peu et je viens de créer le thème enfant de mon thème d’origine à savoir twenty fourteen. Tout se passe apparemment bien sauf 2 ou 3 choses que je ne suis pas encore arrivé à régler après l’activation de mon thème enfant:
    1) Le contenu du fichier style .css s’affiche en haut de mon site !!!! j’aimerai bien le faire disparaitre.
    2) Sur la partie gauche de l’écran il s’affiche ceci:

    About me automatic widget
    This is an automatic widget added on Third Bottom Widget box (Bottom Widget 3). To edit please go to Appearance > Widgets and choose 3rd widget from the top in area second called Bottom Widget 3. Title is also manageable from widgets as well.

    Ce qui n’est pas le cas si j’utilise le theme parent et j’aimerai également l’enlever.

    3) J’ai dû recréer les 3 chapitres en pied de page concernant le mentions légales, etc …. mais bon ça c’est afit mais je ne sais pas pourquoi il n’a pas pris ce qui était fait au niveau du thème parent.

    4) Est-ce que je peux procéder de la même manière pour woocommerce ?!!

    Merci beaucoup si quelqu’un peut m’aider.
    Robert

  2. Merci pour cet article !Par contre, pour un beginner, il manque quelques informations :
    – Où cree-t-on le dossier enfant et comment ?
    – Il semblerait qu’il faille le faire via u client FTP : comment récupérer les accès qui mènent à son domaine wordpress ?

    Merci !

  3. Bonjour,

    Merci beaucoup pour votre tutoriel. Très intéressant et efficace !

    J’ai mis en place mon thème enfant. J’y ai intégré tous les fichiers .php que j’ai modifié et la feuille de style. Et je me suis attelée au fichier functions.php en suivant vos recommandations ci-dessus, notamment avec l’ajout de la fonction : function remove_parent_functions().
    Comme j’avais justement modifié la fonction excerpt_length, j’ai pu reproduire à l’identique la méthode et ça a fonctionné.

    Mais problème, lorsque j’ai voulu reproduire la manipulation sur une autre fonction, là l’erreur suivante apparaît : « Fatal error: Cannot redeclare remove_parent_functions() (previously declared in /home/lemarketmc/www/wp-content/themes/blackandwhite-child/functions.php:24) in /home/lemarketmc/www/wp-content/themes/blackandwhite-child/functions.php on line 49 »

    Mon code est dispo ici : http://pastebin.com/tSCbFj7P
    Lignes 2 à 26 tout fonctionne, mais quand j’ajoute les lignes 28 à 38 alors j’ai le message d’erreur qui me dit que je ne peux pas utiliser cette fonction qui a déjà été utilisée plus haut s’affiche…

    Pouvez-vous m’aider ?

    Par ailleurs j’ai un dernier élément modifié à mettre dans mon fichier functions.php dans mon thème enfant, mais là je n’arrive tout simplement pas à intégrer la fonction function remove_parent_functions(). Je dois mal le faire mais je ne comprends pas d’où vient mon erreur.
    Voilà le code à modifier : http://pastebin.com/Mdq0Jg7e

    Si vous pouviez aussi m’aider sur ce point là ce serait très sympa !
    Merci beaucoup pour votre retour,
    Bien à vous,
    Camille

Laisser un commentaire

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