Ajouter des Fonctions à votre Child Theme WordPress

Nous avons appris comment créer un thème enfant (ou child theme) WordPress afin de personnaliser notre thème WordPress parent et y apporter des modifications visuelles via le fichier style.css.

Nous allons voir maintenant comment prendre plus de contrôle de ce qui est généralement accordé par le CSS, en créant un nouveau fichier functions.php dans notre child theme. Ce fichier, contrairement au fichier CSS, n’écrase pas celui du thème parent. Il est juste chargé en plus du fichier functions.php du thème parent, sachant que celui du thème enfant se charge avant.

Pour illustrer cela, nous allons faire en sorte que notre barre du menu de navigation puisse se fixer en haut de la page lorsqu’on scrolle vers le bas.

Créer un fichier Javascript pour fixer le menu de navigation en haut de la page

Comme dans tout thème propre, créez un sous-dossier /js dans le répertoire du thème enfant. Dans ce dossier, créez un nouveau fichier qu’on nommera menu-fixe.js. Dans ce fichier, insérez le code suivant :

jQuery(function( $ ) {
      $(window).scroll(function(){
            var scrollTop = 90;
            if($(window).scrollTop() >= scrollTop){
               $('.nav-menu').css({
                     position : 'fixed',
                     top : '0'
                });
             }
             if($(window).scrollTop() < scrollTop){
                    $('.nav-menu').removeAttr('style'); 
              }
      })
});

Le menu de navigation devient fixe lorsqu’on descend à 90px à partir du haut. Remplacez .nav-menu par la classe CSS de votre menu.

Charger le jQuery dans le fichier functions.php du child theme

Créons tout d’abord notre fichier functions.php à la racine du thème enfant. Ce fichier doit commencer par un <?php et se terminer par ?>. Voici comment se fait le chargement du jQuery dans le fichier functions.php :

<?php
      add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
      function custom_enqueue_script() {
            wp_enqueue_script( 'menu-fixe', get_bloginfo( 'stylesheet_directory' ) . '/js/menu-fixe.js', 
            array( 'jquery' ), '', true );
      }
?>

On utilise ici le Hook wp_enqueue_scripts qui permet de mettre en file les éléments qui sont censés s’afficher sur le site. Puis on définit la fonction qui permet de charger le fichier javascript.

C’est tout..

Voilà, en très peu de lignes de code on a réussi à ajouter une nouvelle fonction à notre child theme.

Si vous voulez ajouter des couleurs ou modifier le style de votre barre de navigation lorsqu’elle est dans l’état fixe, vous pouvez ajouter ceci à la suite de la ligne .css({ dans le fichier menu-fixe.js , ou alors utiliser la fonction jQuery .addClass() et définir les classes CSS dans le fichier CSS du child theme.

Si vous avez d’autres fonctions que vous voulez ajouter à votre child theme alors n’hésitez pas à laisser un commentaire ici.