Add Dashicons to your WordPress Plugin Admin Menu Icon

Since WordPress 3.8 nice menu icons on dashboard appear beside different settings menu e.g. Posts, Pages, Media, Appearance etc. These icons do not use images but are build with CSS. If you are a WordPress plugin or theme developer, you can use these icons to have a nice icon for your product’s dashboard menu.

Admin menu items icons can only be added with register_post_type() and add_menu_page(). Both have an option to set an icon.

First you need to choose the icon you want to use: https://developer.wordpress.org/resource/dashicons/

Examples:
add_menu_page() accepts a parameter after the callback function for an icon URL, which can also accept a dashicons class. An example here below, replace dashicons-admin-media with the icons you selected before:

<?php
/**
* Register a menu page with a Dashicon.
*
* @see add_menu_page()
*/
function wpdocs_add_my_custom_menu() {
// Add an item to the menu.
add_menu_page (
__( 'My Page', 'textdomain' ),
__( 'My Title', 'textdomain' ),
'manage_options',
'my-page',
'my_admin_page_function',
'dashicons-admin-media',
);
}

// my_admin_page_function() displays the page content for the custom menu page
function my_admin_page_function() {
	if ( !current_user_can( 'manage_options' ) )  {
		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
		//echo 'You do not have sufficient permissions to access this page.';
	}	
}

In register_post_type(), set menu_icon in the arguments array. Below an example

<?php 
/**
 * Register a menu page with a Dashicon.
 *
 * @see add_menu_page()
 */
function wpdocs_add_my_custom_menu() {
    // Add an item to the menu.
    add_menu_page (
        __( 'My Page', 'textdomain' ),
        __( 'My Title', 'textdomain' ),
        'manage_options',
        'my-page',
        'my_admin_page_function',
        'dashicons-admin-media',
    );
}

This entry was posted in Wordpress and tagged , .

Leave a Reply

Your email address will not be published. Required fields are marked *