Any Questions?

02476 252 345

How to Create & Add a Plugin Icon in WordPress 4.0

With the release of WordPress 4.0 a whole host of new development and visual updates have been rolled out. One of the main updates implemented has been the visual improvements made to the plugin installer. In this tutorial i will be teaching you how to create the perfect icon for your plugin and how to ensure it appears next to your plugin within the plugin installer.

Creating your Own WordPress Plugin Icon

Plugin icons will appear within the installer at 128 pixels square. You can either save your icon as a PNG or a JPG, either will display fine. We recommend keeping your design as simple and as memorable as possible. The below guidelines will help you design and create the perfect plugin icon:

  • Keep the design simple.
  • Avoid the use of text –  When the icons are scaled down to smaller sizes your text may become unreadable and blurry. It may also deter users who do not speak your language!
  • Optimise your image to improve load speeds. Here at Mash we use ImageOptim.
  • Ensure you do not use the WordPress logo within the icon design.
  • This is an icon for your plugin, not an advertisement for your business!

If you follow the above design guidelines you will be well on your way to creating a perfect WordPress plugin icon. I personally recommend designing your icon at 256 pixels square, as retina icons are also supported in WordPress 4.0.

WordPress plugin icons can also be SVG Vector images. We recommend designing your icon as an SVG if you can as it is easy to scale down and the file size is minimal.

Dependant on what size you have created your plugin icon save it as either icon-128×128.(png|jpg) and/or icon-256×256.(png|jpg) in your plugins assets folder.

If you plugin icon is as SVG be sure to save it as icon.svg within your assets folder.

Plugin Icon Design

Test Your WordPress Plugin Still Works

Before uploading your plugin icon you have to first be sure your plugin still works with WordPress 4.0. Simply download the new version of WordPress and install your existing plugin. If everything runs fine then we are ready to upload your plugin icon as well as updating your “Tested Up To” value found in your readmore.txt file.

Uploading You WordPress Plugin Icon

If you already have a plugin listed on the WordPress codex then you should be familiar with accessing your plugin SVN repository. If you are not or can’t remember how to, then your can find more information about the accessing your plugins SVN Repository on the WordPress website.

I would first begin by editing your plugins readme.txt file and update the “Test Up To” value to 4.0. As compatibility information is shown in the new plugin installer you will definitely want to keep this information up to date.

Next upload your plugin icon to the assets folder within your SVN repository.

After that simply head over to your WordPress 4.0 installation, search for your plugin and you sure be able to see your icon next to your plugin within the plugin installer.

Plugin Installer Icon

Written by:

Creative Director - info@mash-webdesign.co.uk - 07541987924 - DOB: 02/1993/27

With over five years commercial experience in the web industry, Adam specialises in all things web related. Adam has a passion for CRO, ensuring that the websites he creates don't just look great but also make his clients money.

Mash Web Design