11 KiB
| author | comments | date | layout | slug | title | wordpress_id | categories | tags | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Matthias Kretschmann | true | 2012-05-15 16:00:44+00:00 | post | wp-icons-template | WordPress Admin Icons Template | 2043 |
|
|
Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.
There are basically two scenarios where you really need custom icons for WordPress’ admin area: when creating custom post types and when creating option pages for a plugin/theme. No matter what case, at least 3 icons are needed if you want to get it right:
-
two 16px icons for the admin menu, one non-colored and one colored icon for the hover state
-
one 32px icon for the actual screen
And since the admin area gets constantly optimized for devices which happen to have high-dpi screens (like 3rd generation iPad’s Retina screen) it’s a very good idea to include double sized @2x assets for all the icons mentioned above.
So if you value quality and want pixel perfect icons in your admin area you need to create a total of 6 icon sizes.
The Template
I’ve put the template along with the implementation examples from the next section on github. You can just download the whole package right away:
Usage
The psd file in there has room for all the icon sizes mentioned above. As you can see, I’ve added an umbrella icon to better illustrate the various sizes. Turn on the “Icon Frames - White” layer to see the dimensions for each icon.
Additionally, I’ve added two shapes with base layer styles which resemble the default admin icon style. This is by no means a magic bullet to make every shape look exactly like a WordPress default icon. It’s just a starting point from where you can modify it for your own needs.
And because consistency is key, the default WordPress admin icon sprites are included as hidden layers for reference. Turn them on to make sure your own icon doesn’t look out of place.
The psd is sliced for multiple sprites. You’re of course encouraged to make only one sprite out of it, this just made it more universal for the following code examples. When you’re finished designing the icons just hide the background layers and use Save for Web in Photoshop to export the sliced areas. Running them through ImageOptim or something like that afterwards is a good idea.
Implementation, or: Ignore The Codex
While register_post_type() and add_menu_page() let you define a URL for an icon this doesn’t allow for controlling hover or @2x assets. That’s because this will put the icon as an img element into the menu as opposed to the icons for the built-in items (they’re css background images from sprites). Furthermore, WordPress will add a default opacity to all img elements in the admin menu, with 100% opacity only on hover.
So when using this template with all those icons, I suggest you use the following snippets in your functions.php instead. Yes, I’m telling you to ignore the codex. But this is the only way to get what we want:
-
hover state consistent to WordPress default menu behavior
-
control the display of the various image sizes for high-dpi devices with css media queries
So the following code just injects a stylesheet snippet into the <head> of all admin pages. This is a modification of Randy Jensen’s code idea.
You can always to refer to the inline commented versions of these snippets in the github repository.
Custom Post Type Icons
WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in register_post_type()). Just change this to your own post type name:
[php gutter="true"]<?php /**
- Custom Post Type Icon for Admin Menu & Post Screen */ add_action( 'admin_head', 'custom_post_type_icon' );
function custom_post_type_icon() { ?>