Ressources pour développeur web

Théme de la semaine : Wordpress

Personnaliser le BackOffice WordPress par le code

Temps de lecture estimé : 5 minutes
Accueil PHP 8 Personnaliser le BackOffice WordPress par le code

Vous souhaitez modifier le BackOffice WordPress pour le rendre plus clair, professionnel et adapté à vos besoins ? Dans ce tutoriel WP, vous allez découvrir comment personnaliser l’interface d’administration WordPress : logo, menus, design et fonctionnalités. Que vous soyez débutant ou en phase de création de site, vous apprendrez à transformer votre BackOffice en un espace simple, efficace et à votre image.

  • Transformez votre BackOffice WordPress en un espace clair et professionnel adapté à votre image
  • Simplifiez l’interface pour gagner du temps et offrir une meilleure expérience à vos utilisateurs
  • Prenez le contrôle total de l’apparence et des fonctionnalités sans compétences avancées

Dans ce tutoriel complet, vous allez apprendre à transformer votre BackOffice WordPress en un espace clair, professionnel et agréable à utiliser. Logo, menu, interface, couleurs… nous allons tout passer en revue, étape par étape, avec des exemples concrets et du code simple à comprendre.

Pourquoi modifier le BackOffice WordPress ?

Avant de plonger dans le code, prenons 30 secondes pour comprendre l’intérêt.

Modifier le BackOffice WordPress, ce n’est pas juste “faire joli”. C’est surtout :

  • Améliorer votre confort de travail
  • Simplifier l’interface pour vos clients
  • Renforcer votre image de marque
  • Gagner du temps au quotidien

Imaginez que vous livrez un site à un client. Il se connecte et voit… le logo WordPress, des menus inutiles, et une interface qu’il ne comprend pas. Mauvaise première impression.

Personnaliser le backoffice WordPress

Maintenant, imaginez qu’il arrive sur un BackOffice personnalisé avec votre logo, des menus simplifiés et une interface claire. Là, tout change.

Où placer votre code ?

Avant toute chose, vous allez devoir ajouter du code. Plusieurs options existent :

Option 1 : fichier functions.php

C’est la méthode la plus simple.

Chemin : Apparence > Éditeur de thème > functions.php

Option 2 : plugin personnalisé (recommandé)

Pour éviter de perdre vos modifications lors d’une mise à jour du thème, vous pouvez créer un petit plugin.

Exemple de fichier :

<?php
/*
Plugin Name: Custom BackOffice
Description: Personnalisation du BackOffice WordPress
*/

Ensuite, vous ajoutez votre code dedans.

👉 Pour aller plus loin, découvrez comment Coder une extension Wordpress

Modifier le logo de connexion WordPress

C’est souvent la première chose que l’on personnalise. Voici le code pour remplacer le logo WordPress par votre logo :

function custom_login_logo() {
    echo '
    <style type="text/css">
        #login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/logo.png);
            background-size: contain;
            width: 100%;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');
  • #login h1 a cible le logo de la page de connexion
  • background-image remplace l’image
  • get_stylesheet_directory_uri() récupère le chemin de votre thème

Placez votre logo dans un dossier /images de votre thème.

👉 En savoir plus sur les fonction add_action et add_filter.

Modifier l’URL du logo

Par défaut, le logo renvoie vers WordPress.org. Ce n’est pas très utile.

function custom_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');

Modifier le titre au survol

function custom_login_logo_title() {
    return 'Mon site super stylé';
}
add_filter('login_headertext', 'custom_login_logo_title');

Personnaliser l’écran de connexion (UI)

Maintenant, rendons cette page plus agréable.

Ajouter un fond personnalisé

function custom_login_background() {
    echo '
    <style type="text/css">
        body.login {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/bg.jpg);
            background-size: cover;
        }
    </style>';
}
add_action('login_head', 'custom_login_background');

Modifier le formulaire de connexion

function custom_login_style() {
    echo '
    <style>
        .login form {
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
    </style>';
}
add_action('login_head', 'custom_login_style');

Vous voyez ? Quelques lignes de CSS suffisent à transformer complètement l’interface.

👉 Apprenez à Ajouter un fichier CSS ou JS à Wordpress.

Formation web et informatique - Alban Guillier - Formateur

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 ?

Modifier le menu du BackOffice WordPress

C’est ici que vous allez vraiment améliorer l’expérience utilisateur.

Supprimer des menus inutiles

function remove_admin_menus() {
    remove_menu_page('edit-comments.php'); // commentaires
    remove_menu_page('tools.php'); // outils
}
add_action('admin_menu', 'remove_admin_menus');

Pourquoi faire ça ?

Si votre client n’a pas besoin de certaines fonctionnalités, autant les cacher. Moins de confusion = plus d’efficacité.

👉 Rendez Wordpress plus rapide en retirant les fonctions inutiles.

Réorganiser les menus

Vous pouvez aussi modifier l’ordre.

function custom_menu_order($menu_ord) {
    return array(
        'index.php', // Tableau de bord
        'edit.php',  // Articles
        'upload.php', // Médias
        'pages.php'  // Pages
    );
}
add_filter('custom_menu_order', '__return_true');
add_filter('menu_order', 'custom_menu_order');

Ajouter un menu personnalisé

Imaginons que vous voulez ajouter un accès rapide à une page.

function custom_admin_menu() {
    add_menu_page(
        'Mon outil',
        'Mon outil',
        'manage_options',
        'mon-outil',
        'custom_admin_page',
        'dashicons-admin-tools',
        3
    );
}
add_action('admin_menu', 'custom_admin_menu');

function custom_admin_page() {
    echo '<h1>Bienvenue dans mon outil</h1>';
}

Personnaliser la barre d’administration (toolbar)

La barre noire en haut peut aussi être modifiée.

Supprimer des éléments

function remove_admin_bar_items($wp_admin_bar) {
    $wp_admin_bar->remove_node('wp-logo');
}
add_action('admin_bar_menu', 'remove_admin_bar_items', 999);

Ajouter un lien

function add_admin_bar_link($wp_admin_bar) {
    $wp_admin_bar->add_node(array(
        'id' => 'mon_lien',
        'title' => 'Mon site',
        'href' => home_url()
    ));
}
add_action('admin_bar_menu', 'add_admin_bar_link', 999);

Modifier le tableau de bord (Dashboard)

Le Dashboard WordPress est souvent encombré.

Supprimer les widgets inutiles

function remove_dashboard_widgets() {
    remove_meta_box('dashboard_quick_press', 'dashboard', 'side');
    remove_meta_box('dashboard_primary', 'dashboard', 'side');
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets');

Ajouter votre propre widget

function custom_dashboard_widget() {
    wp_add_dashboard_widget(
        'custom_widget',
        'Bienvenue',
        'custom_dashboard_content'
    );
}
add_action('wp_dashboard_setup', 'custom_dashboard_widget');

function custom_dashboard_content() {
    echo '<p>Bienvenue sur votre espace personnalisé !</p>';
}

Personnaliser les couleurs du BackOffice

Vous pouvez aller encore plus loin en modifiant les couleurs.

function custom_admin_colors() {
    echo '<style>
        #adminmenu {
            background-color: #1e1e1e;
        }
    </style>';
}
add_action('admin_head', 'custom_admin_colors');

Par défaut : “Merci de faire confiance à WordPress”.

Vous pouvez le remplacer.

function custom_admin_footer() {
    echo 'Créé par votre agence';
}
add_filter('admin_footer_text', 'custom_admin_footer');

Sécuriser vos modifications

Petite parenthèse importante.

Quand vous modifiez le BackOffice WordPress :

  • Ne modifiez jamais le cœur de WordPress
  • Utilisez un thème enfant ou un plugin
  • Testez toujours vos modifications

Un petit bug dans le BackOffice… et vous pouvez vous retrouver bloqué. Oui, ça sent le vécu.

Exemple concret : BackOffice pour un client

Imaginez un site pour un artisan.

Vous pouvez :

  • Supprimer les menus inutiles
  • Ajouter un widget “Comment utiliser le site”
  • Mettre votre logo
  • Ajouter un lien “Support”

Résultat : un BackOffice WordPress simple, clair et professionnel.

Votre client vous remerciera. Et reviendra.


Modifier le BackOffice WordPress, c’est un peu comme ranger votre bureau avant de travailler. Au début, ça demande un petit effort… mais ensuite, tout devient plus simple, plus rapide et beaucoup plus agréable.

En personnalisant le BackOffice, vous ne faites pas que modifier une interface : vous améliorez l’expérience utilisateur, vous valorisez votre travail et vous créez un environnement sur mesure. Et franchement, entre nous… travailler sur une interface qui vous ressemble, c’est quand même bien plus motivant.