![]() ![]() I tried to make them as much universal as possible and tested them but depending on your project this could need adjustments. Please note these snippets are just suggestions. If you have problems finding the correct ID selector just inspect element in the admin area. Just replace the bits in the ID selectors with your stuff. Just change this to your own post type name: /* Admin Menu - 16px */ # menu-posts-YOUR_POSTTYPE_NAME. 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()). You can always refer to the inline commented versions of these snippets in the github repository. This is a modification of Randy Jensen’s code idea. So the following code just injects a stylesheet snippet into the of all admin pages. control the display of the various image sizes for high-dpi devices with css media queries.hover state consistent to WordPress default menu behavior.But this is the only way to get what we want: Yes, I’m telling you to ignore the codex. So when using this template with all those icons, I suggest you use the following snippets in your functions.php instead. Furthermore, WordPress will add a default opacity to all img elements in the admin menu, with 100% opacity only on hover. 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). While register_post_type() and add_menu_page() let you define a URL for an icon this doesn’t allow for controlling hover or assets. Running them through ImageOptim or something like that afterwards is a good idea. When you’re finished designing the icons just hide the background layers and use Save for Web in Photoshop to export the sliced areas. ![]() You’re of course encouraged to make only one sprite out of it, this just made it more universal for the following code examples. Turn them on to make sure your own icon doesn’t look out of place. It’s just a starting point from where you can modify it for your own needs.Īnd because consistency is key, the default WordPress admin icon sprites are included as hidden layers for reference. This is by no means a magic bullet to make every shape look exactly like a WordPress default icon. Turn on the “Icon Frames - White” layer to see the dimensions for each icon.Īdditionally, I’ve added two shapes with base layer styles which resemble the default admin icon style. As you can see, I’ve added an umbrella icon to better illustrate the various sizes. The psd file in there has room for all the icon sizes mentioned above. You can just download the whole package right away: I’ve put the template along with the implementation examples from the next section on github. So if you value quality and want pixel perfect icons in your admin area you need to create a total of 6 icon sizes. two 16px icons for the admin menu, one non-colored and one colored icon for the hover stateĪnd 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 assets for all the icons mentioned above.No matter what case, at least 3 icons are needed if you want to get it right: 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. ![]()
0 Comments
Leave a Reply. |