Introducing plugin icons in the plugin installer

WordPress 4.0 comes with a redesigned pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party installer. Just now we’ve added one of the finishing touches to this project — plugin icons.

Plugin authors, If your plugin is compatible with WordPress 4.0, it only takes a few moments to change a readme “Tested up to:” value to 4.0. Compatibility information is prominently shown in the new plugin installer, so you’ll definitely want to update this value. For your plugin to stand out, you’ll also want to give your plugin an icon. Read on…

Akismet

Beautiful, auto-generated icons

Default icons are generated using the GeoPattern library by Jason Long of GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. If you have a banner image, it is automatically sampled to determine the primary color for the pattern, using Tonesque from @matveb. (Cool, huh?)

mosiac-2

Making your own icon

Plugin icons are 128 pixels square. HiDPI (retina) icons are supported at 256 pixels square. Like banners, these go into your /assets directory and can be either a PNG or JPG. So just create assets/icon-128x128.(png|jpg) and/or assets/icon-256x256.(png|jpg) and you have an icon.

You also have another option: SVG. Vectors are perfect for icons like this, as they can be scaled to any size and the file itself is small. For an SVG file, you simply need an assets/icon.svg file.

We may implement SVG-to-images fallbacks in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for browsers that don’t support them, so if you go the SVG route, I’d suggest also turning your SVG into a PNG. (SVG takes precedence.)

Jetpack uses an SVG icon:

Some tips when designing an icon

  • Keep it simple! The Android and iOS Human Interface Guidelines both have some fantastic design tips.
  • Avoid text, especially since these may be seen at smaller sizes in other contexts (and in languages other than English). And because this is an icon, not an ad.
  • Use the right image format for what you’re doing. Don’t use JPGs for simple designs; don’t use PNGs for photos.
  • Optimize your images! Use something like ImageOptim or your favorite web app, CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. tool, etc.
  • Please no WordPress logos. Come up with your own brand. (If you already have a banner image, you likely already have a head start here.)
  • If you haven’t worked with SVGs before, they’re pretty cool. Here’s a tutorial from Chris Coyier.
  • Keep in mind this is an icon for your plugin, not a display ad.

Some examples

Akismet, Jetpack, and Hello Dolly already have icons. You can see their assets directories herehere, and here.

Thanks to the hard work of Alex Shiels (@tellyworth) for implementing this!

#4-0, #dev-notes, #plugins, #upgrade-install