wp_enqueue_scripts : Charger un fichier CSS ou JS WordPress

Vous souhaitez ajouter proprement un fichier CSS ou JS dans votre thème WordPress ? Le hook wp_enqueue_scripts est la méthode officielle pour charger vos fichiers CSS et JS de façon fiable, optimisée et sans conflit. En quelques lignes de code, vous pouvez améliorer les performances, la structure et la compatibilité de votre thème Wordpress.

• Charger proprement vos fichiers CSS et JS dans votre thème WordPress sans casser votre site ni créer de conflits
• Améliorer les performances et la stabilité de votre site en utilisant les bonnes méthodes de chargement et de dépendances
• Adopter des réflexes de développeur pour structurer votre thème et gagner en efficacité sur tous vos projets

WordPress a tout prévu. Avec wp_enqueue_scripts, vous allez apprendre à charger vos fichiers CSS et JS proprement, comme un développeur expérimenté. Et surtout, vous allez comprendre pourquoi on fait comme ça.

Pourquoi ne jamais inclure un fichier CSS ou JS “à la main” ?

Avant même de parler de wp_enqueue_scripts, prenons une mauvaise habitude très répandue.

Beaucoup de débutants ajoutent ceci dans leur thème :

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

Sur le moment, ça fonctionne. Mais en réalité, vous contournez complètement le système de WordPress.

Résultat :

• Impossible de gérer les dépendances entre scripts
• Risque de charger plusieurs fois le même fichier
• Conflits avec des plugins
• Mauvaise gestion du cache
• Mauvaise performance globale

• Ça marche… jusqu’à ce que ça casse.

WordPress propose donc une solution officielle, robuste et intelligente : le système d’enqueue.

wp_enqueue_scripts : le cœur du système

Le hook wp_enqueue_scripts est un point d’entrée dans WordPress qui permet de dire :

“Hé WordPress, voici les fichiers CSS et JS que je veux charger.”

C’est simple, propre et surtout… puissant.

Voici un premier exemple très simple. Il suffit d’ajouter ce code au fichier functions.php de votre thème Wordpress :

function mon_theme_scripts() {
    wp_enqueue_style('mon-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'mon_theme_scripts');

Traduction en langage humain :

• On crée une fonction (mon_theme_scripts)
• On demande à WordPress de charger un CSS
• On “branche” cette fonction au hook wp_enqueue_scripts

Et là, magie : WordPress gère tout pour vous.

Charger un fichier CSS correctement

Entrons dans le concret. Imaginons que vous avez un fichier CSS dans votre thème :

/wp-content/themes/mon-theme/assets/css/style.css

Voici comment le charger, toujours depuis le fichier functions.php :

function mon_theme_scripts() {
    wp_enqueue_style(
        'mon-style', 
        get_template_directory_uri() . '/assets/css/style.css'
    );
}

add_action('wp_enqueue_scripts', 'mon_theme_scripts');

Décryptage :

• 'mon-style' → identifiant unique (très important)
• get_template_directory_uri() → chemin vers votre thème
• /assets/css/style.css → votre fichier

Conseil : choisissez toujours des noms uniques pour éviter les conflits avec les plugins.

Charger un fichier JS proprement

Passons maintenant au JavaScript.

function mon_theme_scripts() {
    wp_enqueue_script(
        'mon-script',
        get_template_directory_uri() . '/assets/js/script.js',
        array(),
        false,
        true
    );
}

add_action('wp_enqueue_scripts', 'mon_theme_scripts');

Explication des paramètres

Cette fois, il y a un peu plus de choses :

wp_enqueue_script(
    'handle',
    'chemin',
    array('dependances'),
    'version',
    true // footer ou non
);

• handle : identifiant unique
• chemin : URL du fichier JS
• dependances : scripts nécessaires (ex : jQuery)
• version : utile pour le cache
• true : charge le script en bas de page (recommandé)

Charger en bas de page améliore les performances. Vos visiteurs vous remercieront (même s’ils ne le savent pas).

👉 Pour aller plus loin avec les performances, consulter notre Tutoriel sur Page Speed Insights.

Gérer les dépendances

C’est ici que WordPress devient vraiment intéressant.

Imaginez que votre script dépend de jQuery :

function mon_theme_scripts() {
    wp_enqueue_script(
        'mon-script',
        get_template_directory_uri() . '/assets/js/script.js',
        array('jquery'),
        false,
        true
    );
}

add_action('wp_enqueue_scripts', 'mon_theme_scripts');

WordPress comprend automatiquement :

“Je dois charger jQuery AVANT ce script.”

Sans ça, vous auriez des erreurs JS incompréhensibles… et quelques cheveux en moins.

Charger uniquement quand c’est nécessaire

Voici une erreur classique : charger tous les scripts partout. Mais… avez-vous vraiment besoin de votre JS sur toutes les pages ?

Non.

Voici un exemple intelligent :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

function mon_theme_scripts() {

    if (is_page('contact')) {
        wp_enqueue_script(
            'contact-form',
            get_template_directory_uri() . '/assets/js/contact.js',
            array(),
            false,
            true
        );
    }

}

add_action('wp_enqueue_scripts', 'mon_theme_scripts');

Résultat :

• Script chargé uniquement sur la page contact
• Site plus rapide
• Meilleure expérience utilisateur

C’est exactement ce que Google aime.

Versionning et cache : le détail qui change tout

Vous avez déjà modifié un fichier CSS… mais rien ne change sur votre site ? Bienvenue dans le monde du cache.

La solution simple :

wp_enqueue_style(
    'mon-style',
    get_template_directory_uri() . '/assets/css/style.css',
    array(),
    filemtime(get_template_directory() . '/assets/css/style.css')
);

Un utilise filemtime() :

• WordPress ajoute automatiquement une version basée sur la date de modification
• Le navigateur recharge le fichier dès qu’il change

Magique. pratique.

👉 Pour aller plus loin : Découvrez les différences entre Cache serveur et cache navigateur.

Différence entre thème parent et thème enfant

Si vous utilisez un thème enfant (et vous devriez), attention à ceci :

Évitez cette mauvaise pratique :

get_template_directory_uri()

Préférez :

get_stylesheet_directory_uri()

Pourquoi ?

• template_directory → thème parent
• stylesheet_directory → thème enfant

Et là, vous évitez des bugs subtils mais très pénibles.

👉 Apprenez à Coder un thème enfant Wordpress.

Charger jQuery correctement

WordPress inclut déjà jQuery. Pas besoin de l’ajouter vous-même.

wp_enqueue_script('jquery');

C’est simple, propre, efficace.

Si vous voulez utiliser une version CDN :

function remplacer_jquery() {
    wp_deregister_script('jquery');

    wp_enqueue_script(
        'jquery',
        'https://code.jquery.com/jquery-3.6.0.min.js',
        array(),
        null,
        true
    );
}

add_action('wp_enqueue_scripts', 'remplacer_jquery');

⚠️ Attention : certains plugins peuvent casser si vous remplacez jQuery.

Charger des scripts uniquement dans l’admin

Parfois, vous avez besoin de CSS ou JS dans le back-office WordPress. Dans ce cas, on utilise :

add_action('admin_enqueue_scripts', 'mon_admin_scripts');

function mon_admin_scripts() {
    wp_enqueue_style(
        'admin-style',
        get_template_directory_uri() . '/assets/css/admin.css'
    );
}

• Très utile pour créer des interfaces personnalisées.

Désenregistrer un script (cas avancé)

Parfois, vous voulez supprimer un script existant.

wp_dequeue_script('ancien-script');
wp_deregister_script('ancien-script');

À utiliser avec précaution car vous pourriez casser des fonctionnalités.

Bonnes pratiques essentielles

Prenez ces réflexes dès maintenant :

• Toujours utiliser wp_enqueue_scripts
• Ne jamais charger à la main dans le HTML
• Nommer vos handles clairement
• Charger les scripts uniquement quand nécessaire
• Utiliser le footer pour le JS
• Gérer les versions pour éviter le cache

Ce sont ces petits détails qui font la différence entre un site Wordpress amateur et un site pro.

Exemple complet d’ajout de fichier CSS et JS à votre thème Wordpress

Voici un exemple propre, complet et prêt à l’emploi :

function mon_theme_assets() {

    // CSS
    wp_enqueue_style(
        'theme-style',
        get_stylesheet_directory_uri() . '/assets/css/style.css',
        array(),
        filemtime(get_stylesheet_directory() . '/assets/css/style.css')
    );

    // JS principal
    wp_enqueue_script(
        'theme-script',
        get_stylesheet_directory_uri() . '/assets/js/script.js',
        array('jquery'),
        filemtime(get_stylesheet_directory() . '/assets/js/script.js'),
        true
    );

    // Script uniquement sur une page
    if (is_page('contact')) {
        wp_enqueue_script(
            'contact-script',
            get_stylesheet_directory_uri() . '/assets/js/contact.js',
            array(),
            null,
            true
        );
    }

}

add_action('wp_enqueue_scripts', 'mon_theme_assets');

---

Maîtriser wp_enqueue_scripts, ce n’est pas juste “charger du CSS et du JS”. C’est comprendre comment WordPress pense, comment il organise ses ressources et comment il optimise les performances de votre site.

À partir de maintenant, vous n’allez plus “ajouter un script”… vous allez l’intégrer intelligemment dans votre écosystème WordPress. Et ça, c’est une vraie montée en compétence.

Prenez le temps de tester, de casser (un peu), de corriger… c’est comme ça qu’on progresse. Et très vite, vous verrez : ce qui vous semblait complexe deviendra un automatisme.

Pour aller plus loin :

• Coder une extension Wordpress (temps de lecture)
• Coder un plugin Wordpress (vote like Reddit)
• Coder un plugin de stats d’articles