Quelle est l’importance du fichier functions.php dans WordPress ?

Présent dans tous les thèmes , ce fichier functions.php dans WordPress a une importance fondamentale dans le paramétrage de votre thème WordPress.
Dans cet article, nous définirons ce fichier, verrons son utilité et des exemples de codes à y insérer.

Qu’est-ce que le fichier functions.php dans WordPress ?

Ce fichier PHP est l’un des fichiers fondamentaux présents dans le développement des thèmes WordPress. Composé de snippets, il se retrouve dans vos thèmes et thèmes enfants de votre structure WordPress.

Ce fichier est chargé à chaque fois que le thème est activé, il met en place les personnalisations et les paramètres de votre thème WordPress.

Le fichier functions.php est l’un des fichiers indispensables utilisés dans le développement et la personnalisation des thèmes WordPress. Il s’agit d’un fichier qui fait partie intégrante de la structure d’un thème WordPress.
Situé dans le répertoire du thème actif, le fichier functions.php est chargé chaque fois que le thème est activé, ce qui lui confère un rôle central dans le processus de chargement et de personnalisation du thème. Grâce à lui, vous pouvez ajouter des filtres, charger vos styles, des codes JavaScript, des blocs Gutenberg, mais également agir sur l’expérience utilisateur en paramétrant les menus, les tailles d’images, etc.

Sans le fichier functions.php, votre thème ne peut pas fonctionner.

Que gère le fichier functions.php dans WordPress ?

Chargement de scripts et de styles :

Dans ce fichier, les scripts JavaScript ou JQuery sont chargés, avec des chemins établis pour que ces fichiers présents dans le thème puissent être chargés. Pour les thèmes enfants, le style du thème parent peut également être chargé pour récupérer les données déjà paramétrées. Il est important de veiller à ce que certains fichiers soient chargés dans le footer pour optimiser le temps de chargement de votre site WordPress.

Définition de fonctions personnalisées :

Vous pouvez y créer de nouvelles fonctions qui modifient le fonctionnement du noyau de WordPress ou ajoutent de nouvelles fonctionnalités à votre site. Parfois, quelques lignes de code suffisent. Cela peut s’avérer bien plus pertinent que de charger un énième plugin sur votre site.

Actions et filtres :

Également appelées “Hook WordPress“, ces actions interviennent dans le comportement de WordPress. Les actions permettent d’exécuter des comportements spécifiques à des moments clés du processus de chargement de WordPress. Par exemple, des actions sont déclenchées lorsqu’un article est publié, lorsqu’un utilisateur est connecté, lorsqu’un thème est activé, etc.

Les filtres permettent de filtrer des données avant leur affichage à l’écran ou leur sauvegarde dans la base de données de WordPress. Vous pouvez par exemple modifier le contenu d’un article, d’une page, d’un bouton, avant qu’ils ne soient traités par WordPress.

Initialisation de fonctionnalités :

Vous pouvez configurer vos tailles d’images, créer vos menus, gérer la prise en charge des fichiers, et bien d’autres paramètres utiles pour personnaliser votre thème.

Quels sont les codes indispensables à ajouter dans le fichier functions.php de son site WordPress ?

Ajout de scripts ou de styles

Pour charger vos fichiers JavaScript ou CSS dans votre thème, vous devez ajouter ces quelques lignes de code dans votre fichier functions.php. Attention ! Il n’est pas recommandé de mettre le lien en dur depuis le fichier header.php.

<?php function inumedia_scripts() {
    wp_enqueue_style( 'identifiant-style', get_stylesheet_directory_uri() . '/css/style.css' ); // ici dans le dossier css du thème
    wp_enqueue_script( 'identifiant-script', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true ); // ici dans le dossier js du thème
}

add_action( 'wp_enqueue_scripts', 'inumedia_scripts' );

Explications :

• get_stylesheet_directory_uri() vient chercher de manière automatique le dossier qui contient le style.css. Si vous êtes dans un thème enfant, il faudra alors remplacer get_stylesheet_directory_uri() par get_template_directory_uri().
• Il est important d’utiliser un identifiant unique et facilement reconnaissable. Par exemple, si mon JavaScript pointe vers un carrousel, je mettrais “carousel-script” comme identifiant. Ainsi, si vous devez le retirer, il faudra utiliser la fonction wp_dequeue_script( ‘carousel-script’ ).
• Pour les scripts:
  • array() correspond aux dépendances nécessaires au bon fonctionnement. Par exemple, s’il dépend de jQuery, alors il vous faudra écrire array(‘jquery’). Si vous avez besoin d’en ajouter d’autres, indiquez-les dans le array(), séparés par des virgules.
  • 1.0.0 correspond à la version de votre script.
  • True correspond au chargement différé. Si votre script est chargé de manière différée, alors il se chargera dans le footer de votre page (et non pas dans l’en-tête) sans bloquer l’affichage. Ceci fait partie des critères d’optimisation. Attention cependant à l’ordre de vos scripts. Si votre script 1 dépend de l’existence de votre script 2, alors chargez le script 2 en premier, sinon vous obtiendrez une erreur.

Prise en charge de JQuery

Dans les thèmes from scratch, jQuery n’est pas pris en charge par défaut. Il va falloir indiquer à WordPress de charger la version de cette bibliothèque JavaScript présente dans le cœur de WordPress.

Pour cela, ajoutez ceci dans votre fonction de chargement des scripts :

<?php function inumedia_scripts() {
       wp_enqueue_script('jquery');
       // ici vos autres scripts*/
}

add_action( 'wp_enqueue_scripts', 'inumedia_scripts' );

WordPress peut vous retourner l’erreur “jQuery is not defined“. Si c’est le cas, je vous donne la solution dans cet article.

Charger des scripts ou des styles selon les types de posts

Plutôt que de charger un script sur l’ensemble de votre site, vous pouvez conditionner son chargement en fonction du type de contenu, par exemple, sur une page d’accueil ou un article spécifique.

Par exemple, si mon carrousel n’est présent que sur la page d’accueil, je peux indiquer dans ma fonction de chargement des scripts ceci :

<?php function inumedia_scripts() {
 if ( is_front_page() ) { // is_page() , is_category(), is_single()...
        wp_enqueue_script( 'carousel-script', get_template_directory_uri() . '/js/casrousel.js', array(), '1.0.0', true ); // ici dans le dossier js du thème
    }
}

add_action( 'wp_enqueue_scripts', 'inumedia_scripts' );

La création / ajout de menus

<?php function inumedia_ajout_menus() {
  register_nav_menus(
    array(
      'menu-principal' => __( 'Menu principal' ),
      'menu-social' => __( 'Réseaux sociaux' ),
      'menu-legal' => __( 'Mentions légales' )
    )
  );
}
add_action( 'after_setup_theme', 'inumedia_ajout_menus' );

Une fois que votre navigation est intégrée dans votre fichier PHP, elle apparaîtra dans la liste de vos menus, vous permettant d’y ajouter vos liens :

Pour utiliser votre menu dans votre thème, il vous faudra utiliser cette fonction à l’endroit souhaité :

<?php wp_nav_menu( array( 
    'theme_location' => 'menu-principal', // ici on récupère l'identifiant du menu
    'container' => 'nav', 
    'container_class' => 'menu-principal-class' 
) ); ?>

Si vous ne connaissez pas l’identifiant du menu concerné, consultez l’astuce dans le point suivant.

La suppression de menus existants dans votre thème

Dans le cas inverse, il se peut que le thème inclut des menus qui ne sont pas nécessaires. Vous pouvez les supprimer de la liste.

Pour cela, vous devez identifier leur identifiant. Pour trouver l’identifiant du menu concerné, faites un clic droit sur le menu en question, puis inspectez la balise label.

Ici, notre menu s’appelle “menu-principal“. C’est donc ce dernier qu’il faudra désenregistrer grâce à cette fonction :

<?php function inumedia_suppresion_menu() {
    unregister_nav_menu('identifiant-menu');
}
add_action('after_setup_theme', 'inumedia_suppresion_menu');

La taille des images

Lorsque vous téléchargez des images dans WordPress, le CMS les redimensionne automatiquement en plusieurs tailles, paramétrées dans votre fichier functions.php.

Pour définir les tailles, vous pouvez ajouter ce code :

<?php function inumedia_tailles_images() {
    add_image_size( 'miniature', 300, 200, true ); // Nom de la taille, largeur, hauteur, recadrage
    add_image_size( 'bandeau', 1000, 9999, false ); // Nom de la taille, largeur, hauteur automatique, sans recadrage

     remove_image_size( 'identifiant-image'); 
}
add_action( 'after_setup_theme', 'inumedia_tailles_images' );

Si vous ajoutez ce code après avoir téléchargé des images sur votre site WordPress, n’oubliez pas de régénérer vos miniatures à l’aide de plugins tels que “Regenerate Thumbnails” pour que les nouvelles tailles prennent effet.

Les types de fichiers acceptés

Certains fichiers ne sont pas acceptés par défaut, parfois pour des raisons de sécurité, pour être téléchargés. Vous pouvez indiquer à WordPress de faire des exceptions :

<?php function inumedia_ajout_fichiers_autorises ( $existing_mimes ) {
    // Ajoutez ici les types de fichiers que vous souhaitez autoriser
    $existing_mimes['pdf'] = 'application/pdf';
    $existing_mimes['doc'] = 'application/msword';
    $existing_mimes['docx'] = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

    // Retourne les types de fichiers modifiés
    return $existing_mimes;
}
add_filter( 'upload_mimes', 'inumedia_ajout_fichiers_autorises' );

La longueur des extraits de vos articles

Vous pouvez également indiquer à WordPress le nombre de mots désirés pour les extraits d’articles :

<?php function inumedia_extrait( $length ) {
    return 20; // Remplacez 20 par le nombre de mots que vous souhaitez afficher dans l'extrait.
}
add_filter( 'excerpt_length', 'inumedia_extrait', 999 );

Prise en charge de WooCommerce pour un thème à partir de zéro

Dans un thème créé à partir de zéro, WooCommerce doit être déclaré pour être pris en charge. Pour ce faire, il vous suffit d’ajouter ces quelques lignes de code :

<?php function inumedia_theme_woocommerce() {
    add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'inumedia_theme_woocommerce' );

Alternatives au fichier functions.php pour la personnalisation de WordPress

Cependant, le fichier functions.php a ses limites, comme vous l’avez compris, car il dépend de votre thème. Si vous souhaitez changer de thème à l’avenir, toutes les modifications que vous avez apportées disparaîtront ou devront être réimportées.

L’autre solution consiste à créer un plugin qui pourra s’appliquer à n’importe quel thème WordPress. Pour ce faire, accédez au dossier wp-plugins, créez un dossier (par exemple inumedia) et à l’intérieur, créez un fichier index.php.

<?php
/**
 * Plugin Name: Inu Media Plugin
 * Description: Ce plugin reprend les paramètres personnalisés du thème Inu Media.
 * Version: 1.0
 * Author: Aurélie Schmitt
 */

// Vérifie si WordPress est chargé, sinon sort
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Définition de la classe principale du plugin
class Inu_Media_Plugin {
    // Constructeur de la classe
    public function __construct() {
        // Ajoute les actions pour les fonctionnalités
        add_action( 'wp_enqueue_scripts', array( $this, 'inumedia_scripts' ) );
        add_action( 'after_setup_theme', array( $this, 'inumedia_ajout_menus' ) );
        add_action( 'after_setup_theme', array( $this, 'inumedia_suppression_menu' ) );
        add_action( 'after_setup_theme', array( $this, 'inumedia_tailles_images' ) );
        add_filter( 'upload_mimes', array( $this, 'inumedia_ajout_fichiers_autorises' ) );
        add_filter( 'excerpt_length', array( $this, 'inumedia_extrait' ), 999 );
        add_action( 'after_setup_theme', array( $this, 'inumedia_theme_woocommerce' ) );
    }

   // On liste les fonctions qui correspondent aux actions
    /* Ajout des scripts*/
    public function inumedia_scripts() { 
        // Ajoute des scripts et des styles spécifiques
        wp_enqueue_script('jquery');
        wp_enqueue_style( 'identifiant-style', get_stylesheet_directory_uri() . '/css/style.css' ); // ici dans le dossier css du thème
        wp_enqueue_script( 'identifiant-script', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true ); // ici dans le dossier js du thème
        if ( is_front_page() ) { 
            wp_enqueue_script( 'carousel-script', get_template_directory_uri() . '/js/casrousel.js', array(), '1.0.0', true ); // ici dans le dossier js du thème
        }
    }

      /* Ajout des menus*/
    public function inumedia_ajout_menus() {
        register_nav_menus(
            array(
                'menu-principal' => __( 'Menu principal' ),
                'menu-social' => __( 'Réseaux sociaux' ),
                'menu-legal' => __( 'Mentions légales' )
            )
        );
    }

      /* Suppression de menus */
    public function inumedia_suppression_menu() {
        unregister_nav_menu('identifiant-menu');
    }

      /* Ajout / suppression des tailles d'images */
    public function inumedia_tailles_images() {       
        add_image_size( 'miniature', 300, 200, true ); 
        add_image_size( 'bandeau', 1000, 9999, false ); 
        remove_image_size( 'identifiant-image'); 
    }

      /* Liste des fichiers autorisés */
    public function inumedia_ajout_fichiers_autorises ( $existing_mimes ) {
        $existing_mimes['pdf'] = 'application/pdf';
        $existing_mimes['doc'] = 'application/msword';
        $existing_mimes['docx'] = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        return $existing_mimes;
    }

     /* Modifie la longueur des extraits */
    public function inumedia_extrait( $length ) {
        return 20;  // ici 20 mots
    }

    /* On ajoute la prise en charge de WooCommerce dans le thème */
    public function inumedia_theme_woocommerce() {
        add_theme_support( 'woocommerce' );
    }
}

// Instanciation de la classe principale pour démarrer le plugin
new Inu_Media_Plugin();

Assurez-vous que votre plugin est bien chargé dans les extensions de WordPress et activez-le. Si vous avez suivi le tutoriel et ajouté les fonctions précédentes dans functions.php et que vous souhaitez tester le rendu en tant que “plugin”, changez de thème et activez votre plugin.

Une fois activé, s’il signale des erreurs dans la console car il ne trouve pas vos fichiers carousel.js et exemple.js, alors que ces fichiers n’existent pas dans le thème, cela montre qu’il applique ce que vous lui avez demandé dans le plugin.

Il en est de même pour les menus qui apparaissent bien dans mon nouveau thème.

En conclusion :

Apprendre à gérer son fichier functions.php, c’est apprendre les indispensables au bon fonctionnement d’un site WordPress. Grâce aux snippets, vous serez capables de pousser les limites de votre thème et de votre site internet. Cependant, si vous produisez plusieurs thèmes que vous exportez, il peut être plus pertinent de créer un plugin qui viendra agir sur le site, peu importe le thème utilisé.