WordPress Logo

Adding Dashicons to Custom Post Types Admin Menu

OK, WordPress Designers and Developers. I finally have figured out how to use the new Dashicons. If you do not know what the Dashicons are, go to the website here. With WordPress getting a nice overhaul in the admin theme, Dashicons are used throughout the new admin theme. So I just got finished making a new plugin which required a custom post type. So I wanted to give the new post type a cool new Dashicon then the default pin. So here are the steps:

1. In the custom post type script where you normally state the menu_icon this is what your syntax will be (see highlighted line # 22):

function create_orl_books()
{
register_post_type( 'orl_books',
  array(
    'labels' => array(
    'name' => 'ORL books',
    'singular_name' => 'ORL Book',
    'add_new' => 'Add New',
    'add_new_item' => 'Add New ORL Book',
    'edit' => 'Edit',
    'edit_item' => 'Edit ORL Book',
    'new_item' => 'New ORL Book',
    'view' => 'View',
    'view_item' => 'View ORL Book',
    'search_items' => 'Search ORL Book',
    'not_found' => 'No ORL Book found',
    'not_found_in_trash' =>
    'No ORL Book found in Trash'
    ),
    'public' => true,
    'menu_position' => 15,
    'menu_icon' => 'dashicons-[book]',    'supports' => array('title', 'editor', 'thumbnail')
    )
  );
}

2. OK. Now we know where to place the code correctly, how do we get the Dashicons? Go to the Dashicons website and find the icon that you would like to use.Click on the icon and go back to the top of the Dashicon home page and click on copy html. There you will see what the CSS class is and get that name and place it in the brackets on the menu-icon line.

3. Save your css page and then refresh your admin webpage and this is what you should see:

Blog, Web Design, Web Development, WordPress,

Leave a Comment

Your email address will not be published.