Créer un thème enfant dans WordPress Tutoriel étape par étape

Dans cet article, vous apprendrez comment créer un thème enfant dans WordPress étape par étape, toutes les bases des thèmes enfants WordPress.

Vous apprendrez comment importer des styles CSS de thème parent, comment remplacer les styles de thème parent et pourquoi vous devriez créer des thèmes enfants WordPress.

Pour savoir pourquoi les thèmes enfants WordPress sont importants, vous devriez lire notre Guide de démarrage pour le développement de thèmes parents et enfants WordPress

Que pouvez-vous faire avec les thèmes enfants WordPress ?

Avec les thèmes enfants WordPress, vous pouvez très facilement personnaliser votre thème WordPress actif par défaut. Vous n'avez pas besoin de connaître HTML, CSS, PHP ou JavaScript avancés pour créer des thèmes enfants.

Une compréhension de base ou bonne de HTML, CSS et PHP pourrait être très utile.

Lectures complémentaires : Comment choisir un thème WordPress gratuit ou premium parfait

Vous pouvez utiliser un thème enfant WordPress pour modifier votre site avec CSS, ajouter de nouvelles zones de widgets, des menus de navigation supplémentaires, modifier des fichiers personnalisés pour créer de nouvelles pages avec un style personnalisé.

Avec les thèmes enfants, vous pouvez également réorganiser les éléments du site, ajouter de nouveaux contenus/éléments et modifier n'importe quelle fonctionnalité.

Pourquoi vous devriez créer un thème enfant WordPress

La raison pour laquelle les thèmes enfants existent est que vous pouvez personnaliser un thème "parent" (votre thème existant/actif) sans perdre vos changements et modifications lorsque vous mettez à jour le thème parent.

Par exemple, si vous avez directement modifié le fichier single.php, vos personnalisations fonctionneront bien au début.

Cependant, lorsque vous mettrez à jour votre thème vers une version plus récente de votre thème modifié, vous perdrez toutes vos modifications et il n'y aura aucun moyen de restaurer votre personnalisation.

De quoi as-tu besoin

Vous pouvez créer un thème enfant rapidement et le télécharger sur votre serveur, mais il est recommandé d'installer WordPress localement sur votre PC.

Avec l'installation locale de WordPress, vous pouvez rapidement créer et tester votre thème, vous n'avez pas besoin d'une connexion Internet tout le temps.

Avec le site WordPress local, vous pouvez faire des erreurs sans affecter votre site en direct et c'est beaucoup plus rapide et meilleur.

Il existe de nombreuses façons d'installer WordPress localement sur Windows, MAC ou Linux. Lisez ce didacticiel pour savoir comment installer WordPress sur un PC local avec la pile Bitnami WordPress.

Nous avons déjà publié un tutoriel étape par étape pour les débutants.

Comment installer WordPress sur le serveur WAMP sous Windows 8

Comment installer WordPress sur Windows 8 à l'aide de Bitnami Stack

comment créer un thème enfant dans le guide étape par étape de WordPress ?

Pour chaque thème enfant dans WordPress, deux fichiers sont requis.

• fonctions.php
• style.css

Dans le fichier style.css, nous pouvons ajouter des informations sur notre thème enfant, par exemple le nom du thème, la description du thème, le nom de l'auteur, les détails du thème parent, les balises, etc.

Nous avons également besoin d'un fichier functions.php pour enregistrer la feuille de style des thèmes parent et enfant. Avec le fichier functions.php, nous pouvons également ajouter de nouvelles fonctions, enregistrer de nouveaux menus de navigation, des zones de widgets, etc.

Commençons donc à créer votre premier thème enfant. Dans ce thème enfant, nous n'allons pas ajouter de nouvelles zones de widgets, menus de navigation, etc. Nous utiliserons notre thème enfant pour apporter quelques modifications CSS simples. Nous remplacerons les styles CSS par défaut.

Vous pouvez utiliser n'importe quel thème WordPress comme thème parent, pour ce tutoriel, je vais créer un thème enfant pour le thème TwentySixteen.

Créez un nouveau dossier et enregistrez-le sous vingt-six-enfants ou nommez-le comme vous le souhaitez, par exemple design.

Créez deux nouveaux fichiers et enregistrez-les en tant que fichiers functions.php et style.css dans notre dossier de thème enfant. Le nom de mon dossier de thème enfant est designbomb.

Ajoutez maintenant les informations suivantes dans le fichier style.css de votre thème enfant et enregistrez votre fichier.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Connectez-vous maintenant à votre tableau de bord WordPress. Allez dans Apparence > Thèmes > Ajouter nouveau et téléchargez ce nouveau thème enfant. Vous verrez un nouveau thème sans aucune capture d'écran. Passez votre souris sur le thème et cliquez sur le bouton Détails du thème.

Vous verrez les détails suivants pour votre nouveau thème enfant.

Dans la capture d'écran ci-dessus, vous pouvez voir toutes les informations de base sur notre thème enfant. Nom de notre thème enfant, qui est l'auteur de ce thème, description du thème enfant et vous pouvez également voir Ceci est un thème enfant de Twenty Sixteen. message.

Nous avons ajouté Modèle : vingt-six dans le fichier style.css de notre thème enfant. Cette ligne indique à WordPress que vingt seize est le thème parent.

Si vous utilisez un autre thème, remplacez TwentySixteen par le nom de votre thème parent.

Activez maintenant votre nouveau thème enfant et rechargez votre page d'accueil. Vous devriez voir tout le contenu sans aucun style. Ne vous inquiétez pas, c'est normal. C'est parce que nous n'avons pas inclus le fichier style.css de nos thèmes parent et enfant

Après avoir activé le nouveau thème enfant, allez dans Apparence > Éditeur et sélectionnez le fichier functions.php (Fonctions du thème), ajoutez le code suivant dans le fichier functions.php et cliquez sur le bouton Mettre à jour le fichier pour enregistrer vos modifications.

 <?php function theme_enqueue_styles() { $parent_; 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 ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Maintenant, visitez le front-end de votre site WordPress et rechargez votre page, vous devriez voir le site normal avec tous les styles TwentySixteen.

Modification des styles existants

Cela signifie que notre thème enfant est prêt, il est temps de personnaliser notre thème parent avec de nouveaux styles CSS. Maintenant, sous Apparence> Éditeur, sélectionnez le fichier style.css. Nous allons ajouter de nouveaux styles.

Ajoutez le style suivant dans le fichier style.css de votre thème enfant et enregistrez votre fichier.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

rechargez le front-end de votre site et ouvrez n'importe quelle page. Nous avons modifié les styles par défaut pour l'élément de menu actuel. Voir capture d'écran ci-dessous.

Pour l'élément de menu actuel, j'ai ajouté une nouvelle couleur d'arrière-plan, un rayon de bordure, une couleur et une ombre de boîte. Il était très simple et facile de changer de style avec les outils Chrome Dev.

C'est tout

Vous savez maintenant comment créer un thème enfant. N'était-ce pas simple et facile. Avec les thèmes enfants WordPress, vous pouvez personnaliser presque tous les fichiers de votre thème parent, mais il n'est pas recommandé de modifier chaque fichier de votre thème parent.

Utilisez toujours des thèmes enfants pour ajouter les fonctions, fonctionnalités ou pages personnalisées nécessaires.

Télécharger le thème enfant Designs