How to Spruce Up and Customize 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

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.

Fill out your .org profile details

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.

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.

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.

Let’s first start with the banner images.

Set a banner image

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.

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

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:

• 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

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.

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

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

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

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

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.