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:

Plugin Page Without a Banner

To add a banner:

  1. 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 assets directory.

    Local Assets Directory

  2. Next, right-click on the assets directory 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)
  3. 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)

  4. 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)
  5. 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:

How to Add a Banner and Icon to The WordPress Plugin Page

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:

An Empty Space on a Banner

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:

Default Icon of Plugin

After we add an icon

How to Add an Icon to Our WordPress Plugin

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.

SVG File

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

List of Browsers That Support SVG Image

Source: caniuse.com

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)

Default Icon

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.

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social