Créer un thème enfant avec WordPress

Mais avant, expliquons l'intérêt de créer ce thème enfant.

Après tout, on pourrait bien modifier le thème sur lequel on travaille ? Ce n'est pas vraiment une bonne idée.
La raison est simple, les thèmes fonctionnent de la même manière que les extensions sur WordPress, ils sont mis à jour régulièrement.
Si vous modifiez un thème et que vous le mettez à jour ensuite, vous risquerez de ... perdre toutes vos modifications et de devoir recommencer de nouveau la personnalisation.

L'intérêt de la mise en place d'un thème enfant permet de pallier à ce problème, ce dernier modifie le thème parent (celui-ci reste inchangé). En cas de mise à jour, seul le thème parent sera impacté, pas votre thème enfant. Pratique, non ?

Maintenant que vous avez vu pourquoi il est important de créer un thème enfant, passons aux choses sérieuses 😉

Nous allons voir comment créer un thème enfant avec WordPress. Nous allons explorer deux possibilités, une en utilisant seulement un fichier CSS, et une autre en utilisant un fichier PHP.

C'est parti 😁

1ère solution : En utilisant un fichier CSS

Commençons par aller dans le dossier themes dans notre projet wordpress qui se trouve dans : wordpress (ou le nom de votre projet) -> wp-content -> themes

Créons un nouveau dossier, appelé ici, my-theme (vous pouvez l'appeler comme vous souhaitez, évitez simplement les espaces qui ne sont pas très appréciés dans les noms de dossiers 😛)

Dans ce dossier, créons un fichier appelé style.css (attention à bien respecter ce nommage ici ) avec le contenu suivant :

/*
Theme Name: My theme
Template: twentynineteen
*/

Quelques explications :

- Theme Name : c'est le nom que vous donnez votre thème (il peut contenir des espaces ici)

- Template : c'est le thème sur lequel sera basé votre thème, qu'on peut appeler thème "parent" (ici c'est twentynineteen, mais vous pouvez aller choisir le thème que vous souhaitez)

Attention à ne pas mettre d'espace après theme name et template, sinon, ça ne marchera pas.

Si vous allez dans l'interface d'administration de WordPress, dans Apparence -> Thèmes, votre thème apparaît.
Activez-le 😊

Si vous actualisez votre page web, catastrophe 😱, toute la mise en page a disparue 😢

Retournons dans notre fichier style.css et ajoutons la ligne suivante :

@import url('../twentynineteen/style.css');

Pensez à enregistrer votre fichier et actualiser votre page web, tout refonctionne 😏

N'oubliez pas d'indiquer le nom du thème que vous avez indiqué comme template dans l'url (ici twentynineteen).

Si vous souhaitez maintenant personnaliser votre CSS, il suffit de cibler un élément et de lui appliquer de nouvelles règles.
On va cibler ici .entry-title et lui appliquer une couleur en bleu :

.entry-title {
	color: #0090c5;
}

À vous de voir selon votre thème l'élément à cibler.

Actualisez votre page web et le tour est joué 😌

Voici le fichier CSS complet :

/*
Theme Name: My theme
Template: twentynineteen
*/

@import url('../twentynineteen/style.css');

.entry-title {
	color: #0090c5;
}

Allons maintenant plus loin dans la personnalisation : changeons le rendu de notre footer par exemple.
Pour cela rien de très compliqué, il suffit de copier le fichier footer.php du thème parent, et de le copier dans le dossier de votre thème).
Ouvrons ce fichier :

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

?>

	</div><!-- #content -->

	<footer id="colophon" class="site-footer">
		<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
		<div class="site-info">
			<?php $blog_info = get_bloginfo( 'name' ); ?>
			<?php if ( ! empty( $blog_info ) ) : ?>
				<a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>,
			<?php endif; ?>
			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
				<?php
				/* translators: %s: WordPress. */
				printf( __( 'Proudly powered by %s.', 'twentynineteen' ), 'Karim' );
				?>
			</a>
			<?php
			if ( function_exists( 'the_privacy_policy_link' ) ) {
				the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
			}
			?>
			<?php if ( has_nav_menu( 'footer' ) ) : ?>
				<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'twentynineteen' ); ?>">
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'footer',
							'menu_class'     => 'footer-menu',
							'depth'          => 1,
						)
					);
					?>
				</nav><!-- .footer-navigation -->
			<?php endif; ?>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->

</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Apportons lui la modification suivante, on va ajouter le texte : "Mon premier thème enfant" à la suite de "Fièrement propulsé par WordPress".
Voici le code à jour :

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

?>

	</div><!-- #content -->

	<footer id="colophon" class="site-footer">
		<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
		<div class="site-info">
			<?php $blog_info = get_bloginfo( 'name' ); ?>
			<?php if ( ! empty( $blog_info ) ) : ?>
				<a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>,
			<?php endif; ?>
			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
				<?php
				/* translators: %s: WordPress. */
				printf( __( 'Proudly powered by %s.', 'twentynineteen' ), 'WordPress' );
				?>
			</a>
			<p>Mon premier thème enfant</p>
			<?php
			if ( function_exists( 'the_privacy_policy_link' ) ) {
				the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
			}
			?>
			<?php if ( has_nav_menu( 'footer' ) ) : ?>
				<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'twentynineteen' ); ?>">
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'footer',
							'menu_class'     => 'footer-menu',
							'depth'          => 1,
						)
					);
					?>
				</nav><!-- .footer-navigation -->
			<?php endif; ?>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->

</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Rien de bien compliqué, on a simplement ajouté une balise HTML de paragraphe.

Félicitations, vous venez de créer votre premier thème enfant 👏

Allons maintenant un peu plus loin dans la personnalisation du thème enfant. Même si cette solution fonctionne, elle n'est pas idéale, dans la mesure où l'utilisation de la règle @import n'est pas idéale, elle réduit les performances de la page web.
Si vous souhaitez en savoir plus, vous pouvez regarder l'article de Steve Souders

Voyons la deuxième solution qui va résoudre ce problème.

2ème solution : En utilisant un fichier PHP

On va légèrement modifier notre thème enfant en créant un nouveau fichier appelé functions.php (dans le dossier de votre thème).
Ce fichier va contenir le code suivant :

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

}

Pensez à enregistrer votre fichier, à retirer la ligne qui contient @import dans votre fichier CSS et actualisez votre page web.

Le résultat est le même.

À vous de jouer maintenant 😏

Retour au blog

Ajouté le : 03/01/2019 par Karim