How to Add Banner and Icon to The WordPress Plugin Page
Previously, we have discussed how to upload a plugin to wordpress.org plugin directory, this time, we’ll discuss how to add/show banner and icon on our plugin page at wordpress.org
I. How to Add Banner to The WordPress Plugin Page
This banner will be displayed on our plugin page on wordpress.org, an example of plugin page: https://wordpress.org/plugins/aph-prism-highlighter/
Before using a banner:
To add a banner:
- Create an image with the name banner-772×250.(png|jpg). (png|jpg) mean that we only allowed using jpg or png image format. The image size is exactly 772px width and 250px height. Store that image to our local
- Next, right-click on the
assetsdirectory and select SVN Commit. Before clicking the OK button, don’t forget to give an appropriate message (WordPress will display this message on our profile page)
- Click OK to continue the process.
Note that we can’t immediately see the changes. We have to wait until WordPress refresh the plugin directory (usually every 15 minutes)
- We can create an additional image to be displayed on the “retina display” (HiDPI-screen with very high resolution). This image size is 2x larger than the normal image, which is 1544px x 500px. The image name should be banner-1544×500.(jpg | png)
- On a RTL website, the plugin title (added by WordPress) will be placed on the right side, so, that if on the right side of the banner contains a text (for example a description of the plugin), then it will be covered by the plugin title.
To solve this, we can create an additional banner image using the file name banner-772×250-rtl.(png | jpg). WordPress will load this image first on the RTL website. If it can’t be founded then WordPress use the default image: banner-772×250.(png | jpg)
An example of plugin page that has a banner:
Consider an empty space of the banner image
When designing a banner image, consider an empty space that may occur in the small view port, such as when user opens our plugin page using smartphones, this empty space occurs when the plugin title shifted down, for example:
One way to solve this is to fill the left side with an image so they will still look good both in the small viewport and the normal viewport.
II. How to Add an Icon to Our WordPress Plugin
This plugin icon will generally appear in two location:
- When we want to install the plugin through the administration page from Plugins »Add New menu. The page will display a list of plugins along with its icon.
- In addition, this icon will also appear on the plugin page in wordpress.org https://wordpress.org/plugins/
An Example of plugin without an icon:
After we add an icon
To add our own icon, we need to add an image with the following criteria:
- File name: icon-128×128.(png | jpg), the image size is 128px x 128px
- Optionally, to display the icon on the retina display (HiDPI – screen with very high resolution), we can add an additional image using file name icon-256×256.(png | jpg). The image size is 256px x 265px.
First, WordPress will load this file, if it can’t be founded, then WordPress will use the default icon: icon-128×128.(png | jpg)
- Using SVG file. File name: icon.svg. If the file is available, it will be the top priority for display.
The advantage of using this type is it can be resized to any size without losing its quality, in addition, the file size is small too.
However, not all browsers support this file format. If we use an SVG file, then it still needs to be accompanied with png or jpg file, so that for the browser which doesn’t support .svg file, the jpg or png file still can be used.
Here is list of browsers that support SVG image
Some tips while designing an icon:
- Design the icon as simple as possible.
- Avoid using text (if possible), because, when the icon is displayed in a small size, then the text will not visible, also, it only covers one language.
- Don’t design the icon such as an ads.
- Don’t use WordPress logo, use our own brand.
- Compress images to optimize its file size (e.g. using sortpixel)
If we don’t add an icon, WordPress will generate an icon using geo pattern created by JasonLong, an example of the pattern can be seen on its GitHub page: jasonlong/geo_pattern: Create beautiful generative geometric background images from a string.