Personnaliser l’icône d’un custom post type avec la police dashicons

Lorsque vous créez un type de publication, ou custom post type, vous pouvez personnaliser l’icône du menu WordPress avec une image de votre choix ou en utilisant la police de pictogrammes intégrée dans WordPress : Dashicons.

Rappel : les types de publications

Par défaut WordPress en possède 2 : les articles, pour écrire des actualités, et les pages, pour créer les différents contenus de votre site.

Si vous vouliez ajouter par exemple un portfolio, ou un annuaire par exemple, il faudrait créer un type de publication.

Le code de base est disponible par exemple sur GenerateWP. En ne conservant que les éléments essentiels on obtient ceci :

[pastacode lang=”php” manual=”function%20create_post_types()%20%7B%0A%20%20%0A%20%20%2F%2F%20Post%20Type%0A%20%20%24labels%20%3D%20array(%0A%20%20%20%20’name’%20%3D%3E%20’Entreprises’%2C%0A%20%20%20%20’all_items’%20%3D%3E%20’Tous%20les%20entreprises’%2C%0A%20%20%20%20’singular_name’%20%3D%3E%20’Entreprise’%2C%0A%20%20%20%20’add_new_item’%20%3D%3E%20’Ajouter%20une%20entreprise’%2C%0A%20%20%20%20’edit_item’%20%3D%3E%20%22Modifier%20l’entreprise%22%2C%0A%20%20%20%20’menu_name’%20%3D%3E%20’Entreprises’%0A%20%20)%3B%0A%0A%20%20%24args%20%3D%20array(%0A%20%20%20%20’labels’%20%3D%3E%20%24labels%2C%0A%20%20%20%20’public’%20%3D%3E%20true%2C%0A%20%20%20%20’has_archive’%20%3D%3E%20true%2C%0A%20%20%20%20’supports’%20%3D%3E%20array(‘title’%2C%20’editor’%2C’thumbnail’%2C’custom-fields’)%2C%0A%20%20%20%20’menu_position’%20%3D%3E%205%2C%0A%20%20%20%20’menu_icon’%20%3D%3E%20’dashicons-store’%2C%0A%20%20)%3B%0A%0A%20%20register_post_type(‘entreprises’%2C%24args)%3B%0A%0A%7D%0A%0Aadd_action(‘init’%2C%20’create_post_types’)%3B” message=”” highlight=”” provider=”manual”/]

Il faudra l’insérer dans le fichier functions.php de votre thème actif (wp-content/themes/nomdutheme) ou alors dans le fichier de votre plugin si vous en développez un.

Les pictogrammes de WordPress : Dashicons

L’interface de WordPress est livrée avec une police d’écriture qui, au lieu de contenir des lettres, contient des pictogrammes utilisés un peu partout dans l’interface d’administration : les menus, l’éditeur visuel…

Une page leur est dédiée sur wordpress.org. Vous pourrez naviguer par catégorie de pictos, et même faire une recherche :

On retrouve tout type d’icônes, et même une carotte et un palmier.  Pour découvrir ces pictos :

[smoothie_button url=”https://developer.wordpress.org/resource/dashicons/” label=”Dashicons”]

Appliquer un picto à votre Custom Post Type

Récupérez le nom du picto que vous souhaitez assigner à votre Type de publication. Il est indiqué à côté de celui-ci, en haut de page :

Dans votre tableau $args, ajoutez une ligne ‘menu_icon’ et indiquez le nom ‘dashicons-store’ :

[pastacode lang=”php” manual=”%20%20%24args%20%3D%20array(%0A%20%20%20%20’labels’%20%3D%3E%20%24labels%2C%0A%20%20%20%20’public’%20%3D%3E%20true%2C%0A%20%20%20%20’has_archive’%20%3D%3E%20true%2C%0A%20%20%20%20’supports’%20%3D%3E%20array(‘title’%2C%20’editor’%2C’thumbnail’)%2C%0A%20%20%20%20’menu_position’%20%3D%3E%205%2C%0A%20%20%20%20’menu_icon’%20%3D%3E%20’dashicons-store’%2C%20%0A%20%20)%3B” message=”” highlight=”” provider=”manual”/]

Au passage, vous pouvez aussi indiquer la position de l’emplacement du menu grâce à ‘menu_position’.

Et voici le résultat :

Vous pouvez faire ceci pour chaque type que vous créerez. De cette manière vos Custom Types sont plus engageants et se démarquent mieux dans le menu parfois très chargé de WordPress.