How to Spruce Up and Customize Your Plugin Directory Listing

Spruce Up Your Plugin Directory Listing

You’ve just been approved on the WordPress Plugin Directory. Or perhaps you’ve had your plugin listed for a while, but need to add a fresh coat of paint to your listing.

In this tutorial, I’ll show the various ways you can help your plugin stand out just a bit more.

Let’s start with your profile

Your profile gets clicked on, especially when users are searching for support or a way to contact you. Having a profile configured makes you appear more human, so it’s a great idea to start with your profile first.

Set an avatar

Contributors Review on a Plugin Listing
Contributors Review Avatar on a Plugin Listing

Use the email you signed up with on .org and get your own avatar through the Gravatar service.

Gravatars are shown everywhere, so it’s important to claim this avatar for yourself.

Associate Avatars with an Email Address Using Gravatars
Associate Avatars with an Email Address Using Gravatars

Fill out your .org profile details

Fill Out Your .org Profile
Fill Out Your .org Profile

It’s important to flesh out your profile should others wish to look up who is behind a particular plugin. Fill out a small bio, your WordPress story, and configure any related services.

Here is my profile on .org, for example.

Ronald Huereca's Profile on WordPress.org
Ronald Huereca’s Profile on WordPress.org

Fill out your forum profile

Fill Out Your Forum Profile
Fill Out Your Forum Profile

Fill out your forum profile so that your plugin users can know a bit more about you and view a link to contact you if necessary.

Forum Profile Filled In
Forum Profile Filled In

Up next, we’ll start configuring the actual plugin’s .org listing.

Let’s set your plugin’s assets

When your plugin was initially approved, you were granted SVN access to your plugin repository. Within SVN, you’ll notice an assets folder. Within this section, you can set the plugin’s banners, icons, and screenshots.

Samples Assets Folder Using the Versions App
Samples Assets Folder Using the Versions App

Let’s first start with the banner images.

Set a banner image

Banner for plugin Simple Comment Editing
Banner Image for plugin Simple Comment Editing

The assets folder in SVN is where you’ll want to place your banner images.

The banner images need to be specifically named and sized accordingly:

  • banner-1544×500 – Useful for retina devices.
  • banner-772×250 – For non-retina devices.

Extensions can be png, jpg, or even an animated gif. It’s shown throughout your .org plugin profile and even within WordPress itself when viewing more details about the plugin.

Plugin Details Modal for Simple Comment Editing Plugin
Plugin Details Modal for Simple Comment Editing Plugin

Add an Icon

Just like with the banners, you’ll want to place them in the assets folder in your SVN repository.

The icon specs are as follows and they can be a jpg, png, or even an animated gif.

  • icon-256×256 – Useful for retina devices.
  • icon-128×128 – For non-retina devices.

Your icon is shown in several places. Here are a few examples.

I’ve had luck finding icons on stock sites, but you’ll typically need an extended license to re-use it on .org.

Add screenshots for your plugin

Plugin Screenshots on .org
Plugin Screenshots on .org

It’s very important to include screenshots, even if your plugin does very little. Users want to see what your plugin does, especially if there are any visual pieces. If you only have an admin panel, include that in your screenshots!

Screenshots go in the assets folder in SVN, and are organized as follows:

Screenshots in the SVN Assets Folder
Screenshots in the SVN Assets Folder
  • screenshot-1
  • screenshot-2
  • screenshot-3
  • etc…

Screenshot extensions can be a jpg, png, or even an animated gif. Here’s how it would look inside your readme.txt file.

== Screenshots ==

1. Edit Button and Timer.
2. Styled Buttons and Compact Timer.
3. Default button theme.
4. Dark button theme.
5. Light button theme.Code language: AsciiDoc (asciidoc)

Each number will correspond to the screenshot’s extension. For example, “1” would refer to screenshot-1, “2” screenshot-2, etc.

Let’s move onto other readme.txt optimizations that you can make.

Readme.txt optimizations and tweaks

Your readme.txt file is a crucial file for your plugin. Outside of support, it includes everything the user should know about your plugin before the user installs it. Here are a few ways to make your readme stand out just a bit more.

Add a video

Video on a Plugin Page
Video on a Plugin Page

Adding a video to your plugin’s readme.txt file is fairly simple.

[youtube https://www.youtube.com/watch?v=8eKDCEoXGKU&rel=0]Code language: JSON / JSON with Comments (json)

Just use the [youtube] shortcode as shown above. You can also include the link on its own line, assuming it is embeddable.

You can even embed videos in the FAQ section.

Video in FAQ Section on WordPress.org
Video in FAQ Section on WordPress.org

Here’s an example in a readme.

== Frequently Asked Questions ==

= Is the card-flipping effect cross-browser compatible? =

Yes, it is compatible with most recent browsers, except for Opera (but IE10+ works!)

= How do I create my own template? =

This video shows you how:

[youtube https://www.youtube.com/watch?v=hFsVrjQXV_E]Code language: AsciiDoc (asciidoc)

Use Callouts

Callout Example
Callout Example

Prefix an area with the > symbol and you can have a callout on your plugin profile.

== Description ==

> Credits: Originally developed and maintained by <a href="https://www.b-website.com/">Brice CAPOBIANCO</a>.Code language: plaintext (plaintext)

Use headings to split out sections in your description

Use Headings to Split Content
Use Headings to Split Content

You are able to use headings in your readme to split up sections. Simply wrap your headlines in = characters.

= Setup Guide =
Looking for help setting things up? [Read Our Setup Guide](https://mediaron.com/event-tracking-for-gravity-forms/?utm_source=wordpress_org&utm_medium=documentation&utm_campaign=event_tracking)

= Minimum Requirements =
- Gravity Forms 2.5
- Google Analytics Universal Analytics v3
- Google Tag Manager (optional)

= Features =
- Submit events to Google Analytics using the Measurement Protocol, JavaScript, or using Google Tag Manager
- Add multiple event feeds with conditionals
- Custom event categories, actions, labels and even values
- Track form pagination events
- Dynamic event value on payment forms (integration with the payment add-ons including Paypal Standard, PayPal Pro, Stripe, etc...)Code language: JavaScript (javascript)

For other readme hacks, please visit the basic markdown syntax that you can use in your readme.txt files. Don’t forget to validate your readme when you’re finished optimizing it.

Lastly, we’ll go over block icons.

Utilize block.json to set your block icons

Generic Block Icons
Generic Block Icons

If you are using block.json, you can set your icons and labels for your block quite easily.

Block Icons on .org
Block Icons on .org

Conclusion

Now that you have a pretty and completed .org profile, it’s now to go scream to the heavens about your fancy new plugin.

If you have any questions or suggestions, please comment below, and I’ll be sure to address them.

Ronald Huereca
By: Ronald Huereca
Published On: on February 7, 2023

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.

Leave Your Valuable Feedback

Your email address will not be published. Required fields are marked *

Shopping Cart
  • Your cart is empty.
Scroll to Top