Ajouter un widget personnalisé dans le Tableau de bord de WordPress

Le Tableau de bord de WordPress peut être facilement personnalisé en ajoutant un widget sur-mesure, pratique pour ajouter des informations techniques ou commerciales. L’ajout d’un widget n’a rien de compliqué hormis la nécessité de connaitre quelques bases en HTML.

Update : le bout de code comportait une erreur. Le voici mis à jour le 07/05/2011 à 17h40.

Connectez-vous à votre administration WordPress puis rendez-vous dans Apparence puis Éditeur.

Là, dans la liste de droite, cliquez sur le fichier functions.php que vous pouvez également y accéder via un client FTP dans le dossier /wp-content/themes/NOM_DU_THEME/

Rajoutez à présent les lignes de code ci-dessous :

// Ajouter un widget dans le tableau de bord de WordPress
function wpc_dashboard_widget_function() {

// Saisie du texte entre les guillemets
echo "
<ul>
<li>Date de réalisation : mai 2011</li>
<li>Auteurs : Aurélien Denis.</li>
<li>Hébergement : Mavenhosting</li>
</ul>
";
}
function wpc_add_dashboard_widgets() {
wp_add_dashboard_widget('wp_dashboard_widget', 'Informations techniques', 'wpc_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'wpc_add_dashboard_widgets' );

Dans l’exemple ci-dessous, il convient d’ajouter le texte de votre choix dans la balise echo après les guillemets. Vous pouvez y insérer le code HTML de votre choix. Ici, il s’agit d’une liste à puces.

Pour donner un nom à votre widget – nom qui sera affiché en tant que titre, remplacez 'Informations techniques' par ce que vous souhaitez.

N’oubliez pas de cliquez sur le bouton Mettre à jour le fichier.

Voici un aperçu du résultat final :

Capture d'écran - Widget sur-mesure dans WordPress
Le widget peut contenir du code HTML et donc un logo par exemple

Si vous ne visualisez pas le widget, cliquez sur le menu Options de l’écran en haut à droite de votre écran pour cochez-le.

Dans le cadre de la réalisation d’un site Web professionnel avec WordPress, il m’apparaît comme essentiel de transformer le CMS en marque blanche et de le personnaliser pour le client. D’autres tutoriels aborderont cette thématique prochainement.

Crédits photo : dawnhops

28 commentaires

      1. Aurélien Denis auteur de l’article

        Merci de la correction que je vais m’empresser de mettre en oeuvre dans la soirée.

        Je n’avais pas fait suffisamment attention à bien renommer les bons préfixes après avoir mis en place cette fonction sur un site client.

  1. Tsigorf

    Moi ça ne marche pas, voici l’erreur :
    Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /var/www/legtux.org/users/tsigorf/index/wp-content/themes/chocotheme/functions.php on line 13
    Et pourtant, j’ai corrigé le « wpc_dashboard_setup », j’ai testé le code brut (corrigé quand même) mais rien n’y change… même sans ce code… (En gros, plus de tableau de bord.)
    J’ai donc ce code :
    <?php
    wp_enqueue_script('jquery');// Include jquery
    automatic_feed_links();

    // Ajouter un widget dans le tableau de bord de WordPress
    function wpc_dashboard_widget_function() {

    // Saisie du texte entre les guillemets
    echo "

    Date de réalisation : 22 février 2011
    Webmaster : PRENOM NOM
    Hébergement : Merveilleux Legtux.org, ne pas oublier de se connecter au moins tous les 2 mois.

    « ;
    }
    function wpc_add_dashboard_widgets() {
    wp_add_dashboard_widget(‘wp_dashboard_widget’, ‘Informations techniques’, ‘wp_dashboard_widget_function’);
    }
    add_action(‘wp_dashboard_setup’, ‘wpc_add_dashboard_widgets’ );

    register_sidebar(array(
    ‘name’=>’sidebar’,
    ‘before_widget’ =>  »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »,
    ));

    function attach_theme_settings() {
    $theme_root = dirname(__FILE__) . DIRECTORY_SEPARATOR;
    include_once($theme_root . ‘lib/theme-options/theme-options.php’);
    include_once($theme_root . ‘options/theme-options.php’);
    include_once($theme_root . ‘options/navigation-options.php’);
    // include_once(‘options/theme-widgets.php’);
    }

    attach_theme_settings();

    function print_comment($comment, $args, $depth) {
    $GLOBALS[‘comment’] = $comment; ?>
    <li >
    <div class="comment-body" id="comment-« >

    at

    comment_approved == ‘0’) : ?>

    $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>

     

    post_parent!=0) {
    $page_obj = get_page($page_obj->post_parent);
    }
    return get_page($page_obj->ID);
    }

    $nav_limit = 10;
    function choco_print_pages_nav() {
    global $post, $nav_limit;
    $current_page_ancestor = get_page_ancestor($post->ID);
    $excluded = get_option(‘header_nav_pages_exclude’);
    if ($excluded) {
    $excluded_pages = « exclude= » . implode(‘,’, $excluded);
    } else {
    $excluded_pages =  »;
    }

    $pages = get_pages(« parent=0&child_of=0&sort_column=menu_order&$excluded_pages »);

    $html =  »;

    $i = 0;
    foreach ($pages as $page) {
    $subpages = get_pages(‘child_of=’ . $page->ID . ‘&parent=’ . $page->ID . ‘&sort_column=menu_order’);
    $has_dropdown = !empty($subpages) && get_option(‘enable_dropdown’, ‘yes’)==’yes’;
    $classes = array();
    if (is_page() && $current_page_ancestor->ID==$page->ID) {
    $classes[] = « current_page_item »;
    }

    if ($has_dropdown) {
    $classes[] = « has_dropdown »;
    }
    $html .=  »;
    $html .= ‘ID) . ‘ »>’;

    if ($has_dropdown) {
    $html .=  » . apply_filters(‘the_title’, $page->post_title) .  »;
    } else {
    $html .= apply_filters(‘the_title’, $page->post_title);
    }

    $html .= ‘‘;
    if ($has_dropdown) {
    $html .= choco_get_pages_nav_dropdown($page, intval(get_option(‘dropdown_depth’, 2)));
    }

    $html .=  »;
    if ($i==$nav_limit) {
    break;
    }
    $i++;
    }
    echo $html;
    }
    function choco_get_pages_nav_dropdown($page, $max_levels, $current_level=1) {
    $html =  »;
    $subpages = get_pages(‘child_of=’ . $page->ID . ‘&parent=’ . $page->ID . ‘&sort_columnm=enu_order’);
    if (count($subpages) > 0) {
    $html .=  »;
    foreach ($subpages as $subpage) {
    $html .=  »;
    $html .= ‘ID) . ‘ »>’ . apply_filters(‘the_title’, $subpage->post_title) . ‘‘;
    if ($current_level < $max_levels) {
    $html .= choco_get_pages_nav_dropdown($subpage, $max_levels, $current_level + 1);
    }
    $html .= '’;
    }
    $html .=  »;
    }
    return $html;
    }
    function choco_print_categories_nav() {
    global $nav_limit;
    $excluded = get_option(‘header_nav_categories_exclude’);
    if ($excluded) {
    $excluded_cats = « exclude= » . implode(‘,’, $excluded);
    } else {
    $excluded_cats =  »;
    }

    $categories = get_categories(« $excluded_cats »);

    $html =  »;
    $i=0;
    foreach ($categories as $category) {
    $classes = array();
    if (is_category($category->term_id)) {
    $classes[] = « current_page_item »;
    }
    $html .= ‘term_id) . ‘ »>’ . $category->name . ‘‘;

    if ($i==$nav_limit) {
    break;
    }
    $i++;

    }
    echo $html;
    }
    function choco_print_header() {
    $nav_type = get_option(‘nav_type’);
    if ($nav_type==’pages’) {
    choco_print_pages_nav();
    } else if ($nav_type==’categories’) {
    choco_print_categories_nav();
    } else /*shouldn’t happen*/ {
    choco_print_pages_nav();
    }
    }
    function choco_get_body_style() {
    $bg_color = get_option(‘background_color’, ‘#3A2820’);
    $bg_image = get_option(‘background_image’);
    $bg_repeat = get_option(‘background_repeat’);

    $style = ‘background: ‘ . $bg_color;
    if ($bg_image) {
    $style .= ‘ url(‘ . $bg_image . ‘) center top ‘ . $bg_repeat;
    }
    $style .= ‘;’;

    return $style;
    }

    function choco_get_theme_path() {
    $map = array(
    ‘Default Scheme’=>’default’,
    ‘Dark Scheme’=>’darkgray’,
    ‘Red Scheme’=>’red’,
    );
    $theme = get_option(‘choco_color_scheme’);
    if (isset($map[$theme])) {
    return $map[$theme];
    }
    return ‘default’;
    }
    ?>
    Normal ?

    PS : désolé de la taille du commentaire mais je n’ai pas trouvé de truc du type menu déroulant…

    1. Aurélien Denis auteur de l’article

      Si tu supprimes la fonction que tu viens d’ajouter tout devrait rentrer dans l’ordre à moins que tu n’utilises un système de cache qu’il te faudra mettre à jour…

      Pour le support, rendez-vous sur le forum de WordPress francophone.

  2. Tsigorf

    Tout code XHTML n’est pas autorisé : les liens par exemple (<a href= »[votre lien] »>nom du lien<>/a> ne sont pas autorisé, le PHP affiche une erreur et… Plus de blog !). Il m’est arrivé cette erreur et j’ai du reprendre le code original afin de le réinsérer dans le fichier via http://FTP...

    Évitez de rajouter des liens !

      1. Jonathan

        Les liens ne posent pas de soucis pour les widgets présents de le Dashboard.

        Il y a en déjà pas mal dans ceux par défaut pour s’en rendre compte

        Dans le echo de la fonction que tu as rajouté, mets lui des simple quote au lieu des doubles. D’ailleurs tu as mal fermé ton echo car ce n’est pas un double quote que tu as utilisé mais un »

        C’est pour cette raison que tu as une erreur

  3. Oufdeladingue

    Bonjour,

    Est-il possible de placer ce widget au dessus des autres sur le dashboard? (Par défaut j’entends…)
    J’en ai désactivé plusieurs et il ne me reste plus que le compteur d’article (titre: aujourd’hui) et ce petit widget ajouté mais je préférerais placer ce dernier au-dessus de l’autre.
    Très bon blog, très utile à mon travail ! Enjoy

      1. Oufdeladingue

        Merci pour le lien!
        Il semble que l’utilisation de cette hooking function ne soit pas encore au top.
        Tant pis pour le changement de position des widgets….

  4. Fanny Sylvestre

    Merci, pour moi le code donné fonctionne nickel tel quel sur la toute dernière version que je viens de mettre à jour : 3.3.1

    j’ai déplacé le widget tout en haut de l’admin, par contre, je cherche à faire la même chose sur la page d’ajout d’un nouvel article…

    1. Aurélien Denis auteur de l’article

      Pour les articles, ce n’est pas du tout la même chose. On parlera de metaboxe et il ne s’agit pas d’un simple affichage d’informations mais bien de stockage ayant des conséquences sur la publication.

      Il existe de très bons articles en recherchant « metaboxes WordPress » dans Google.

  5. mihalic

    Bonjour , je n ai pas reussi…
    il y a t il un moyen de personnalise totalement le tableau de bord
    pour ne plus voir de « signe » de wordpress …

  6. Akaralda

    J’ai une nouvelle question… Si je veux créer deux widgets comme tu a fais, en dupliquant le code et en changeant les noms évidemment, la deuxième ne d’affiche pas.
    Une soluce en gardant la même structure ou alors c’est une toute autre approche ?

  7. Cédric - bécane WEB

    Bonjour Aurélien,

    Je viens de faire un bon petit tour sur le web et je n’ai pas trouvé l’info cherchées…WordPress Channel étant un des sites où je trouve 3/4 de mes infos, je te poses la question au cas ou tu aurais le tuto que je recherche :

    J’aimerai ajouter un champs « copyright » dans mon back-office WordPress (dans la section personnaliser le thème) pour que le client puisse changer facilement le copyright de son site sans aller dans le fichier footer.php.

    As tu une piste pour faire cela ?

    J’utilise le thème WordPress twentyeleven.

    Merci pour tous tes tutos.

  8. Deuns26

    Bonjour, merci pour l’article.
    Est il possible dans créer plusieurs widget personnalisé dans le Tableau de bord de WordPress?
    J’essaye mais j’arrive pas.
    Merci pour l’aide
    Deuns26

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX