Ajouter des fonctionnalités à un thème Wordpress avec le fichier functions.php

Une fois la structure de base de votre thème WordPress mise en place, vous souhaiterez sûrement y ajouter des fonctionnalités pour le rendre plus modulable et plus optimisé. Vous aurez aussi peut-être besoin de charger des feuilles de style CSS ou des scripts spécifiques.

Pour cela, vous devrez créer à la racine du répertoire de votre thème un fichier functions.php. Ce fichier vous servira à inclure des fonctionnalités déjà existantes dans WordPress ou à en développer de nouvelles.

Si vous souhaitez découvrir comment créer un thème basé sur les blocs Gutenberg, n’hésitez pas lire l’article consacré à ce sujet en préambule.

Inclure des fonctionnalités existantes à un thème WordPress

WordPress dispose déjà de fonctionnalités de base qui peuvent s’avérer intéressantes lorsqu’on développe un thème personnalisé. Pour les activer dans votre thème, vous devrez créer une nouvelle fonction dans votre fichier functions.php, déclenchée par un hook juste après l’installation de votre thème.

Voici un exemple de ce que vous pouvez mettre en place :

<?php
/**
* Fonctions du thème
*
* @package montheme
* @since montheme 1.0
*/

if (!function_exists('my_theme_setup')) :
    function my_theme_setup() {
        /**
        * Charger les traductions du thème
        */
        load_theme_textdomain('mon_theme_textdomain', get_template_directory() . '/languages');

        /**
        * Configurer la taille de base des miniatures
        */
        set_post_thumbnail_size( 400, 400, array( 'center', 'center') );

        /**
        * Ajouter une taille d'image personnalisée
        */
        add_image_size( 'my_custom_image_size', 1024, 400, array('center', 'center') );

        /**
        * Ajouter automatiquement le titre du site dans l'en-tête <head> du site
        */
        add_theme_support('title-tag');

        /**
        * Donner la possibilité aux utilisateurs de choisir un format particulier pour leur article,
        * afin de mettre en avant l'élément central de leur publication (image, galerie, vidéo etc.)
        */
        add_theme_support('post-formats', array('gallery', 'quote', 'image', 'video'));

        /**
        * Activer le style par défaut des blocs Gutenberg
        */
        add_theme_support( 'wp-block-styles' );

        /**
        * Ajouter un style personnalisé pour l'éditeur en back-office
        */
        add_editor_style( 'style-editor.css' );
    }
endif;
add_action('after_setup_theme', 'my_theme_setup');

Charger les traductions du thème

La fonction load_theme_textdomain() permet d’ajouter des traductions à votre thème. Il suffit de renseigner le nom du domaine et le chemin du dossier dans lequel vous avez placé vos fichiers de traduction. En général, on les place dans un dossier /languages, directement à la racine du thème.

Pour traduire votre thème WordPress, vous devrez tout d’abord créer des fichiers de traduction au format .po ou .pot. Chaque fichier correspond à une langue et doit être nommé en fonction de celle-ci. Par exemple, pour des traductions en français, on créera un fichier fr_FR.po ou montheme-fr_FR.po.

Pour que WordPress détecte les traductions du thème, il faudra également générer une version .mo de tous les fichiers de traduction. Pour cela, vous pouvez utiliser des logiciels comme Poedit, qui fournit une interface simple et permet de convertir des fichiers au format .po ou .pot en .mo.

Exemple de dossier /languages avec des traductions françaises :

/wp-content/themes/montheme/
  ...
  languages/
    - fr_FR.po
    - fr_FR.mo

Configurer la taille des miniatures

La taille des images et leur poids jouent fortement sur les temps de chargement d’un site et ses performances. C’est pourquoi il est important de configurer dès le départ la taille des miniatures qui seront générées lors de l’ajout d’images sur le site.

Dans l’interface d’administration du site, vous pourrez configurer des tailles d’images par défaut dans la rubrique Réglages > Medias. Lorsque vous ajouterez un bloc image dans le contenu d’une de vos pages / d’un de vos articles, vous aurez la possibilité de garder sa taille originale, ou bien de choisir parmi ces trois variations :

Les réglages de base des images d'un site WordPress dans l'interface d'administration.

La fonction set_post_thumbnail_size() permet de renseigner une taille d’image par défaut pour les images de mise en avant des posts. Elle prend en compte trois arguments :

La largeur de l’image.
La hauteur de l’image.
Le découpage de l’image (facultatif).

Pour en savoir plus sur la fonction set_post_thumbnail_size(), consultez le guide officiel des développeurs WordPress.

Ajouter des tailles d’images personnalisées

La fonction add_image_size() permet d’ajouter de nouvelles tailles d’images, en plus de celles que vous aurez déjà configurées dans l’interface d’administration du site. Elle peut s’avérer utile pour donner une vraie uniformité au rendu du site et faire en sorte que les images chargées dans certains blocs aient toujours les mêmes proportions.

La fonction add_image_size() prend en compte quatre paramètres :

Le nom de la variation de taille.
La largeur de l’image.
La hauteur de l’image.
Le découpage de l’image (facultatif).

Pour en savoir plus sur la fonction add_image_size(), consultez le guide officiel des développeurs WordPress.

Insérer automatiquement la balise `<title>` dans l’en-tête du site

Si vous n’utilisez pas de plugin comme Yoast SEO pour gérer les méta-données de votre site, vous pouvez tout de même faire en sorte que la balise <title> s’ajoute automatiquement dans l’en-tête du site. Elle communique aux moteurs de recherche le titre de la page / publication en cours de lecture. Pour cela, utilisez la fonction add_theme_support('title-tag').

Varier les formats des posts

Vous pouvez définir différents formats pour les articles afin que leur rendu soit différent en fonction de ce que vous voulez mettre en valeur dans le contenu. Pour cela, déclarez la prise en charge des formats souhaitez à l’aide de la fonction add_theme_support().

Pour en savoir davantage sur les format des posts, consultez le guide officiel des développeurs WordPress.

Activer le style par défaut des blocs Gutenberg

Les blocs Gutenberg sont développés avec des styles par défaut. Suivant le rendu que vous souhaitez donner aux blocs Gutenberg dans votre thème, vous pouvez choisir de les activer en déclarant leur prise en charge avec add_theme_support( 'wp-block-styles' ) ou de les désactiver avec wp_dequeue_style('wp-block-library').

Ajouter une feuille de style CSS réservée à l’éditeur Gutenberg

Créer une feuille de style CSS réservée à l’éditeur Gutenberg peut s’avérer utile pour assurer une uniformité au niveau du rendu du thème WordPress côté back-office et côté front-office. Elle permet aussi éventuellement au développeur de donner un aspect visuel particulier à certains éléments de l’éditeur Gutenberg.

Pour cela, vous n’avez qu’à utiliser la fonction add_editor_style( 'nom-du-fichier.css' ).

Charger des feuilles de style CSS et scripts dans un thème WordPress

Le fichier functions.php est aussi utilisé pour charger les différentes feuilles de style CSS et les scripts JS d’un thème. Pour ce faire, il faut créer une nouvelle fonction, qui elle aussi sera déclenchée par un hook wp_enqueue_scripts :

/**
* Charger les styles et scripts du thème
*/
function add_theme_scripts() {
    // Chargement du fichier style.css
    wp_enqueue_style( 'montheme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ), 'all');

    // Chargement du fichier index.js
    wp_enqueue_script( 'montheme-script', get_template_directory_uri() . '/chemin/vers/le/fichier/index.js', array (), wp_get_theme()->get( 'Version' ), true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Le chargement des feuilles de style CSS se fait grâce à la fonction WordPress wp_enqueue_style() et celui des scripts Javascript se fait grâce à la fonction wp_enqueue_script().

Ces deux fonctions contiennent plusieurs paramètres à renseigner :

Le nom unique du style / script à charger.
L’emplacement du fichier à charger (URL absolu).
Les éventuelles dépendances du fichier (comme par exemple jQuery pour certains scripts).
Le numéro de version du fichier (qui en l’occurence sera incrémenté automatiquement lorsqu’on modifiera la version du thème).
L’emplacement de la balise chargeant le fichier (false que le fichier soit chargé en haut de page dans le <head> et true pour que le fichier soit chargé en bas de page).

Si vous avez plusieurs feuilles de style CSS ou scripts JS à ajouter, répétez simplement les appels à ces fonctions pour chacun des fichiers à charger.

Vous savez maintenant comment ajouter des fonctionnalités à votre thème WordPress. Il existe un grand nombre de fonctionnalités existantes que vous pouvez configurer dans le fichier functions.php. Cependant, si vous développez un thème compatible avec les blocs Gutenberg, certaines de ces fonctionnalités seront déjà automatiquement chargées et d’autres seront accessibles depuis le fichier theme.json.

Ajouter des fonctionnalités à un thème WordPress avec le fichier functions.php