Comment créer un shortcode WordPress : Tutoriel complet

Vous souhaitez créer un shortcode WordPress pour afficher du contenu dynamique facilement dans vos pages ou articles ? Bonne nouvelle : c’est plus simple que vous ne le pensez. Dans ce tutoriel Wordpress, vous allez apprendre pas à pas comment créer, personnaliser et utiliser un shortcode, même si vous débutez complètement avec WordPress.

• Fonctionne un shortcode WordPress pour devenir autonome dans la personnalisation de votre site
• Créer des fonctionnalités dynamiques réutilisables sans dépendre de plugins externes
• Gagner du temps en automatisant l’affichage de contenus personnalisés partout sur votre site

Dans ce tutoriel complet, vous allez apprendre à créer un shortcode WordPress de A à Z. Et surtout, vous allez comprendre ce que vous faites, pas simplement copier-coller du code sans réfléchir. Installez-vous confortablement, on va construire quelque chose de vraiment utile.

Qu’est-ce qu’un shortcode WordPress ?

Un shortcode, c’est une petite balise que vous pouvez insérer dans vos pages ou articles. Elle ressemble à ça :

[mon_shortcode]

Derrière cette apparente simplicité se cache un mécanisme puissant. Lorsque WordPress rencontre ce shortcode, il exécute une fonction PHP que vous avez définie, puis affiche le résultat.

• Un shortcode agit comme un pont entre votre contenu et du code dynamique.

Prenons un exemple très simple. Vous pourriez afficher :

[bonjour]

Et WordPress affichera :

Bonjour Alban !

Plutôt sympa, non ?

Pourquoi utiliser un shortcode ?

Avant de rentrer dans le code, prenons une seconde pour comprendre dans quels cas utiliser un shortcode.

Vous pourriez en avoir besoin si vous souhaitez :

• afficher du contenu dynamique (date, utilisateur, API…)
• créer des éléments réutilisables (boutons, blocs personnalisés…)
• simplifier l’utilisation pour vos clients ou vos visiteurs
• éviter de modifier vos templates PHP

En résumé, le shortcode vous permet de gagner du temps et de rendre votre site plus flexible.

Où peut-on ajouter son shortcode Wordpress ?

C’est souvent la première question qui bloque.

Vous avez deux options principales :

1. Dans le fichier functions.php

C’est la solution la plus simple pour débuter. Vous pouvez ajouter votre code dans le fichier : /wp-content/themes/votre-theme/functions.php

Mais attention : si vous changez de thème, votre shortcode disparaîtra.

2. Dans un plugin personnalisé (recommandé)

Si vous voulez faire les choses proprement (et durablement), créez un petit plugin Wordpress.

Par exemple :

<?php
/*
Plugin Name: Mes Shortcodes
Description: Plugin pour ajouter mes shortcodes personnalisés
*/

Ensuite, vous ajoutez vos fonctions dedans.

C’est la meilleure pratique, surtout si vous travaillez sur des projets clients.

Créer votre premier shortcode (pas à pas)

Passons maintenant à la pratique.

Nous allons créer un shortcode très simple.

Étape 1 : créer une fonction

function mon_premier_shortcode() {
    return "Bonjour et bienvenue sur mon site !";
}

Ici, on crée une fonction PHP classique qui retourne du texte. Pour cette exemple simple, vous pouvez mettre ce code dans le fichier functions.php de votre thème ou de votre thème enfant.

👉 Pour aller plus loin : Apprenez à coder un thème enfant.

Note importante : on utilise return et pas echo parce que WordPress attend un retour, pas un affichage direct.

Étape 2 : enregistrer le shortcode

Maintenant, on relie cette fonction à un shortcode. Toujours dans le fichier functions.php, à la suite de la fonction ci-dessus, ajouter ce code :

add_shortcode('bonjour', 'mon_premier_shortcode');

Étape 3 : utiliser le shortcode

Maintenant, dans un page ou un post WordPress, choisissez « code court » puis ajouter :

[bonjour]

Et voilà ! 🎉

Votre texte s’affiche automatiquement.

Ajouter du HTML dans un shortcode

Un shortcode ne sert pas uniquement à afficher du texte brut.

Vous pouvez intégrer du HTML :

function bouton_shortcode() {
    return '<a href="#" style="padding:10px;background:#333;color:#fff;">Cliquez ici</a>';
}

add_shortcode('bouton', 'bouton_shortcode');

Utilisation :

[bouton]

Résultat : un bouton stylé directement dans votre contenu.

Ajouter des paramètres à votre shortcode

C’est ici que les choses deviennent intéressantes.

• Vous pouvez rendre votre shortcode dynamique grâce à des attributs.

Par exemple :

[bonjour prenom="Alban"]

Ce code court correspond au code PHP suivant :

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 bonjour_personnalise($atts) {
    $atts = shortcode_atts(array(
        'prenom' => 'visiteur'
    ), $atts);

    return "Bonjour " . $atts['prenom'] . " !";
}

add_shortcode('bonjour', 'bonjour_personnalise');

Détaillons cette fonction :

• $atts contient les attributs du shortcode
• shortcode_atts() définit des valeurs par défaut
• on récupère ensuite la valeur avec $atts['prenom']

Cela affichera :

Bonjour Alban !

Partique.

Gérer du contenu entre les balises

Un shortcode peut aussi encapsuler du contenu :

[encadre]Mon texte important[/encadre]

Cela correspond à la fonction ci-dessous :

function encadre_shortcode($atts, $content = null) {
    return '<div style="border:2px solid #000;padding:10px;">' . $content . '</div>';
}

add_shortcode('encadre', 'encadre_shortcode');

Votre texte sera encadré automatiquement.

C’est très utile pour créer :

• des alertes
• des encadrés pédagogiques
• des citations stylisées

Sécuriser son shortcode

On ne va pas se mentir : WordPress est puissant… mais il faut faire attention.

• Si vous affichez des données dynamiques, vous devez les sécuriser.

return "Bonjour " . esc_html($atts['prenom']);

esc_html() empêche les injections HTML ou JavaScript. C’est une bonne habitude à prendre dès maintenant.

Ajouter du CSS proprement

Évitez autant que possible les styles inline.

Préférez :

function mon_shortcode_css() {
    return '<div class="mon-style">Contenu</div>';
}

Puis dans votre CSS :

.mon-style {
    background: #f5f5f5;
    padding: 15px;
}

C’est plus propre, plus maintenable… et plus professionnel.

Cas concret : créer un shortcode utile

Imaginons que vous voulez afficher l’année actuelle automatiquement.

Voua allez écrire la fonction suivante :

function annee_shortcode() {
    return date('Y');
}

add_shortcode('annee', 'annee_shortcode');

Et ensuite, pour l’utiliser :

© [annee] Mon site

Ce qui affichera :

© 2026 Mon site

Et ça se met à jour tout seul chaque année. Pas mal, non ?

Aller plus loin : shortcode + requête WordPress

Vous pouvez même afficher des articles dynamiques :

function derniers_articles_shortcode() {
    $args = array(
        'posts_per_page' => 3
    );

    $query = new WP_Query($args);
    $output = '<ul>';

    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li>' . get_the_title() . '</li>';
    }

    $output .= '</ul>';

    return $output;
}

add_shortcode('articles', 'derniers_articles_shortcode');

Résultat

[articles]

Cela affiche vos 3 derniers articles.

Vous venez littéralement de créer un mini module dynamique.

Les erreurs courantes à éviter

Soyons honnêtes, tout le monde fait ces erreurs au début.

La plus fréquente ? Utiliser echo au lieu de return. Résultat : rien ne s’affiche correctement.

Autre piège classique : oublier de sécuriser les données.

Enfin, évitez de multiplier les shortcodes inutiles. Gardez une logique claire, sinon votre site devient vite difficile à maintenir.

Quand ne PAS utiliser de shortcode ?

C’est important de le dire.

Les shortcodes ne sont pas toujours la meilleure solution.

Évitez-les si :

• vous travaillez avec Gutenberg (préférez les blocs)
• vous avez besoin d’un rendu complexe (React ou bloc personnalisé)
• vous voulez optimiser fortement le SEO structurel

Mais pour 80% des besoins, le shortcode reste une solution simple et efficace.

---

Créer un shortcode WordPress, c’est un peu comme apprendre un super pouvoir discret. Au début, cela paraît technique… puis très vite, vous vous rendez compte que vous pouvez automatiser énormément de choses.

Et surtout, vous gagnez en liberté. Vous ne dépendez plus uniquement de plugins externes. Vous comprenez votre site, vous le maîtrisez, vous le façonnez à votre image.

Alors maintenant, une question simple : quel sera votre premier shortcode utile ?