Seule une poignée d'utilisateurs de WordPress utilise un thème enfant et c'est parce que beaucoup d'utilisateurs ne savent pas ce qu'est un thème enfant ou Créer un thème enfant^{(Creating Child Theme)} dans WordPress . Eh bien^(Well) , la plupart des utilisateurs de WordPress ont tendance à modifier ou à personnaliser leur thème, mais toute cette personnalisation est perdue lorsque vous mettez à jour votre thème et c'est là que vient l'utilisation du thème enfant. Lorsque vous utilisez un thème enfant, toutes vos personnalisations seront enregistrées et vous pourrez facilement mettre à jour le thème parent.

Créer un thème enfant dans WordPress

Créer un thème enfant à partir d'un thème parent non modifié^{(Creating a Child Theme from an Unmodified Parent Theme)}

Afin de créer un thème enfant dans WordPress , vous devez vous connecter à votre cPanel et naviguer vers public_html puis wp-content/themes où vous devez créer un nouveau dossier pour votre thème enfant (exemple /Twentysixteen-child/). Assurez-vous qu'il n'y a pas d'espace dans le nom du répertoire du thème enfant, ce qui pourrait entraîner des erreurs.

Recommandé :^{(Recommended:)} vous pouvez également utiliser le plugin One-Click Child Theme^{(One-Click Child Theme plugin)} pour créer un thème enfant (uniquement à partir d'un thème parent non modifié).

Vous devez maintenant créer un fichier style.css pour votre thème enfant (dans le répertoire du thème enfant que vous venez de créer). Une fois que vous avez créé le fichier, copiez et collez simplement le code suivant ( modifiez^(Change) les détails ci-dessous en fonction des spécifications de votre thème) :

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://example.com/twenty-sixteen-child/
 Description: Twenty Sixteen Child Theme
 Author: WordPress Team
 Author URI: http://example.com
 Template: twentysixteen
 Version: 1.3.0
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Note : La ligne Template ( Template : Twentysixteen) est à changer en fonction de votre nom actuel du répertoire du thème (le thème parent dont nous créons l'enfant). Le thème parent dans notre exemple est le thème Twenty Sixteen , donc le modèle^(Template) sera Twentysixteen.

Auparavant, @import était utilisé pour charger la feuille de style du parent au thème enfant, mais maintenant ce n'est pas une bonne méthode car cela augmente le temps de chargement de la feuille de style. Au lieu d'utiliser @import, il est préférable d'utiliser les fonctions PHP dans le fichier functions.php de votre thème enfant pour charger la feuille de style.

Pour utiliser le fichier functions.php, vous devez en créer un dans le répertoire de votre thème enfant. Utilisez le code suivant dans votre fichier functions.php :

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Le code ci-dessus ne fonctionne que si votre thème parent utilise un seul fichier .css pour contenir tout le code CSS .

Si votre thème enfant style.css contient en fait du code CSS (comme il le fait normalement), vous devrez également le mettre en file d'attente :

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Il est temps d'activer votre thème enfant, connectez-vous à votre panneau d'administration puis allez dans Appearance > Themes et activez votre thème enfant à partir de la liste des thèmes disponibles.

Remarque :^(Note:) Vous devrez peut-être réenregistrer votre menu ( Appearance > Menus ) et les options de thème (y compris les images d'arrière-plan et d'en-tête) après avoir activé le thème enfant.

Désormais, chaque fois que vous souhaitez apporter des modifications à votre style.css ou functions.php, vous pouvez facilement le faire dans votre thème enfant sans affecter le dossier du thème parent.

Créer un thème enfant^{(Child Theme)} dans WordPress à partir de votre thème parent, mais la plupart d'entre vous ont déjà personnalisé votre thème, alors la méthode ci-dessus ne vous aidera pas du tout. Dans ce cas, découvrez comment mettre à jour un thème WordPress sans perdre la personnalisation.

Si j'espère que cet article vous a été utile, mais si vous avez encore des questions concernant ce guide, n'hésitez pas à les poser dans les commentaires.

Creating Child Theme in WordPress

Only a handful of WordPress users uses a child theme and that’s because many of the users don’t know what is a child theme or Creating Child Theme in WordPress. Well, most of the people using WordPress tend to edit or customize their theme but all that customization іs lost when you update your theme and that’s where the use of child theme comes. Whеn you use a child theme then all your customization will be saved аnd you can easіlу update the parent theme.

Creating a Child Theme from an Unmodified Parent Theme

In order to create a child theme in WordPress you need to login to your cPanel and navigate to the public_html then wp-content/themes where you have to create a new folder for your child theme (example /Twentysixteen-child/). Make sure you don’t have any spaces in the name of child theme directory which may result in errors.

Recommended: You can also use One-Click Child Theme plugin to create a child theme(only from an unmodified parent theme).

Now you need to create a style.css file for your child theme (inside the child theme directory you just created). Once you have created the file just copy and paste the following code (Change below details according to your theme specifications):

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://example.com/twenty-sixteen-child/
 Description: Twenty Sixteen Child Theme
 Author: WordPress Team
 Author URI: http://example.com
 Template: twentysixteen
 Version: 1.3.0
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Note: The Template line (Template: twentysixteen) is to be changed according to your current name of the theme directory(the parent theme whose child we are creating). The parent theme in our example is the Twenty Sixteen theme, so the Template will be twentysixteen.

Earlier @import was used to load the stylesheet from parent to the child theme, but now it’s not a good method as it increases the amount of time to load the stylesheet. In place of using @import its best to use PHP functions in your child theme functions.php file to load the stylesheet.

In order to use functions.php file you need to create one in your child theme directory. Use the following code in your functions.php file:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

The above code only works if your parent theme uses only one .css file to hold all the CSS code.

If your child theme style.css contain actually CSS code (as it normally does), you will need to enqueue it as well:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

It’s time to activate your child theme, login to your admin panel then go to Appearance > Themes and activate your child theme from the available list of themes.

Note: You may need to re-save your menu (Appearance > Menus) and theme options (including background and header images) after activating the child theme.

Now whenever you want to make changes to your style.css or functions.php you can easily do that in your child theme without affecting the parent theme folder.

Creating Child Theme in WordPress from your parent theme, but most of you have already customized your theme then the above method is not going to help you at all. In that case, check out how to update a WordPress Theme without losing customization.

If hope this article was helpful to you but if you still have any question regarding this guide please feel free to ask them in comments.

Lina Roux

About the author

Je suis un ingénieur logiciel et blogueur avec près de 10 ans d'expérience dans le domaine. Je me spécialise dans la création de critiques d'outils et de didacticiels pour les plates-formes Mac et Windows, ainsi que dans la fourniture de commentaires d'experts sur des sujets de développement de logiciels. Je suis également conférencier et instructeur professionnel, ayant donné des présentations lors de conférences technologiques à travers le monde.

Créer un thème enfant dans WordPress

Créer un thème enfant dans WordPress

Créer un thème enfant à partir d'un thème parent non modifié^{(Creating a Child Theme from an Unmodified Parent Theme)}

Creating Child Theme in WordPress