Ajouter des icônes aux Custom Post Types de WordPress

Vos utilisateurs y gagneront en ergonomie et votre back office aura une allure des plus professionnelles.

2 méthodes existent pour ajouter un icône :

1. La première reste la plus simple bien qu’elle ne permette pas d’appliquer un état de survol. L’image restera identique quel que soit l’état. Le seul préalable est de créer une image de 16 pixels par 16 pixels ;
2. La seconde, légèrement plus complexe, prend en charge l’état survolé mais nécessite l’ajout de lignes de code supplémentaires. Des packs d’icônes sont disponibles au téléchargement de façon gratuite ;

Nous allons voir ensemble les 2 méthodes dans ce tutoriel, accompagné d’un podcast vidéo HD.

Méthode n°1 – Modification du custom post types

La plupart du temps les custom post types sont initialisés dans le fichier functions.php mais peuvent l’être dans un fichier dédié. A vous d’effectuer une recherche de la fonction register_post_type.

Ajoutez ensuite la ligne de code suivante dans les paramètres :

'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',  // URL de l'image

Pour vous donner un aperçu complet, voici le code complet pour créer un custom post types intitulé Podcasts :

add_action( 'init', 'register_cpt_podcast' );

function register_cpt_podcast() {

    $labels = array(
        'name' => _x( 'Podcasts', 'podcast' ),
        'singular_name' => _x( 'Podcast', 'podcast' ),
        'add_new' => _x( 'Add New', 'podcast' ),
        'add_new_item' => _x( 'Add New Podcast', 'podcast' ),
        'edit_item' => _x( 'Edit Podcast', 'podcast' ),
        'new_item' => _x( 'New Podcast', 'podcast' ),
        'view_item' => _x( 'View Podcast', 'podcast' ),
        'search_items' => _x( 'Search Podcasts', 'podcast' ),
        'not_found' => _x( 'No podcasts found', 'podcast' ),
        'not_found_in_trash' => _x( 'No podcasts found in Trash', 'podcast' ),
        'parent_item_colon' => _x( 'Parent Podcast:', 'podcast' ),
        'menu_name' => _x( 'Podcasts', 'podcast' ),
    );

    $args = array(
        'labels' => $labels,
        'hierarchical' => true,

        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'comments', 'revisions' ),
        'taxonomies' => array( 'genre' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,

        'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'podcast', $args );
}

Il vous suffit de modifier l’URL du fichier image comme dans cet exemple.

Retournez à présent dans le back office de WordPress puis remarquez l’apparition de votre icône pour le custom post type concerné.

Méthode n°2 – Ajout d’un style CSS via le functions.php

Cette seconde nous permet d’ajouter un icône via le CSS de l’administration de WordPress. Elle est incompatible avec la première : retirez donc la ligne de code ajoutée si tel est le cas.

Ouvrez donc le fichier functions.php puis ajoutez les lignes suivantes en fin de fichier :

add_action( 'admin_head', 'wpc_cpt_icon' );

function wpc_cpt_icon() {
    ?>
    <style type="text/css" media="screen">
        #menu-posts-podcast .wp-menu-image {
            background: url("<?php bloginfo('template_url') ?>/images/clapperboard.png") no-repeat 6px 6px !important;
        }
       #menu-posts-podcast:hover .wp-menu-image, #menu-posts-podcast.wp-has-current-submenu .wp-menu-image {
            background-position:6px -18px !important;
        }
        #icon-edit.icon32-posts-podcast {background: url(<?php bloginfo('template_url') ?>/images/clapperboard.png) no-repeat;}
    </style>
<?php }

Mon custom post type s’intitule podcast au singulier. Il vous suffit de modifier ce terme dans les lignes ci-dessous. Pour vous aider, utilisez Firebug puis analyser l’icône d’un ou plusieurs éléments.

Modifiez également l’URL de l’icône associé aux différents états. Dans mon cas, le lien est identique car j’utilise cet excellent pack d’icônes prêts-à-l’emploi :

Il ne vous reste plus qu’à piocher dans ce pack de qualité puis de les envoyer dans un dossier images de votre thème – par exemple.

Ce tutoriel vous montre une fois de plus la capacité de personnalisation du back office de WordPress pour une utilisation en marque blanche du CMS.