WordPress Plugin Directory Tips

I wrote a WordPress plugin recently called Admin Stylur and I thought this would be a good time as any to explain the process a bit and share some inside knowledge I gained while submitting to the WordPress plugin directory. This won’t be one of those posts where I tell you each facet about making a plugin or how to generate that awesome plugin idea. I’m simply saying “here are a few things I caught along the way and here is a post about said things.” Hopefully all that will help to make the process more simplistic, and less stressful as you begin.

screenshot of plugin on the WordPress plugin directory

Admin Stylur as seen on the WordPress plugin directory

To start, plugins submitted to the WordPress plugin directory are required to use SVN. To those not familiar with SVN, it’s a bit like Git only weirder. I won’t take the time to explain SVN, but here are some links to get you started.

In order to be accepted into the plugin directory you have to have a solid and validated README.txt which you can validate using this simple validator tool from WordPress. Here’s a few tips you may want to know about before you validate your README and make your first SVN commit:

The Tips

  1. Make sure your main heading sections in your README.txt look like this
  2. Make sure your screenshots are labeled screenshot-[1|2|3|..].png and tucked into your SVNs “assets” directory. When your screenshots have been properly ordered and named it will look like this in your README.txt when you’re done.
  3. Banner images used for the plugin directory has to be named “banner-772x250.png” and placed in your project’s SVN “assets” directory. For retina you can use “banner-1544x500.jpg.” Full details are listed here. No GIFs.
  4. Screenshots in the “assets” directory take precedence over screenshots in the plugin’s directory.
  5. README.txt files can accept Markdown formatting. Don’t be scared.
  6. Do your best to make sure the plugin directories banner caption is no more than 22 words or 150 characters. This piece of text is pulled from your plugins README.txt file and looks like this
  7. The plugin page in the directory should include no more than 12 tags
  8. Last, but not least have fun!

If you need a helpful template for your plugins banner and icons take a look here for a full blown PSD that contains a preview of what the plugin’s banner will look like once it’s published to the plugin directory, a retina template along with icon templates for the plugin directory. When using these templates make sure you have Helvetica Neue installed for best representation of the real thing.

I hope these tips help to make the process a bit more friendly and give you the proper warnings and heads up needed to make your plugin look super awesome for the WordPress plugin directory. If you have any questions feel free to leave a comment or give me a shout on Twitter.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
  1. ❧ Steve shouted:
    2014/10/03 • 2:11 pm

    Thanks Dennis for the tips. Do you also happen to know how to upload an image for my plugin for the plugin overview? http://screencast.com/t/11QrRSMpn. I’ve been looking for a while now and cannot find an answer.

  2. NP Steve. As you can see in this screenshot the naming convention must be in a particular fashion http://cl.ly/image/2U3R1g3E0l1r.

    If you’re only using raster (i.e. .png) it would look like this…

    assets/icon-128x128.png
    assets/icon-256x256.png < -- For Hi-Res

    or if you have a vector it would be…

    assets/icon-128x128.png < -- This size and format is still used on wordpress.org plugin directory search results
    assets/icon.svg <-- This would be used in the WordPress Dashboard plugin directory search Results

    I also presented on this at WordCamp Buffalo which you can see those slides here http://speaking.grayghostvisuals.com/wordcamp/2014/designing-for-wordpress/#/8/2

    TIP: You can also open up DevTools and inspect the markup on that view if you wanna know the size of the icon in case you forget ;)

Leave a Reply

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

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2014/08/21