As of December 2011 every plugin hosted on WordPress.org has the option to display a visually pleasing banner image at the top of its plugin page.
If you are publishing a quick ad-hoc plugin you might not want to go to the effort, but for everyone else, especially plugins that represent a brand we consider a good banner to be a must. Not creating a banner leaves your plugin looking distinctly unprofessional. Besides, it need not be elaborate; a simple colored gradient is better than nothing at all.
Banner Dimensions and Font
The basic plugin banner is 772x250 pixels wide-by-tall and it will be overlaid with the plugin's name in 30px Helvetica Neue font. The rounded black box containing the plugin name will be aligned 30px from the banner's left margin and 24px from it's bottom margin. You can see this in the following annotated white banner image:
Design with Plugin Name in Mind
Be aware that WordPress.org will overlay your plugin name on top of your banner. This mean you should not add your plugin's name to your banner images but you should design the banner to accommodate the name being overlaid.
Note the dimensions and font in the annotated banner image above. You get a left margin of 30px and a bottom margin of 24px and then the length of your plugin name at 30px using Helvetica Neue determines how much space you need to reserve for your plugin name.
Use Chrome's "Inspect Element" to Preview
Given that the plugin name overlays your image it can be a real pain to get your banner design "just right" so we came up with a way to use Chrome's "Inspect Element" to see what it will look like. Using Chrome navigate to any plugin page that has a banner on WordPress.org and right-click on the banner; you'll get a menu option to select the element inspector:
Then upload your banner to a live site somewhere on the web via FTP or other method (note our screenshot below shows using a local
file:/// reference, which does not work.)
Next add a CSS select for the
#plugin-title element and add a CSS
background-image property to reference a local copy of your banner:
The last step is to right-click on the exiting plugin name to have Chrome select its HTML element in the HTML viewer and then you can double click on the inner text of the
<h2> element change the plugin's name so you can preview your own plugin's name:
There is supposedly a method that allows you to add
?banner_url=<url-to-your-banner> to the end of your own plugin's URL but I was never able to get it to work. Besides, the browser approach is more flexible so why not just use it?
Optionally Add High DPI/Retina Images
In July 2012 WordPress.org also added optional support for high DPI (a.k.a. "Retina") images at a dimension of 1544x500 pixels. If you provide a high DPI image WordPress.org will serve it instead when it senses that the device viewing is a high DPI device such as an Apple MacBook Pro with Retina Display.
If you are going to provide a High DPI image it's probably best to design at the larger size and then also save the image to the smaller size. However, since we are a plugin coding blog and not a design techniques blog we might not be giving you the best advice here; consult your favorite web designer for best practices instead.
Save in Either .PNG or .JPG Format
Choose one of these two (2) image formats for your banner. Again we are not a design techniques blog but I think the rule of thumb is to use .JPG for photos and for everything else use .PNG. But again, consult your favorite web designer:
Keep the Design Simple
There is a well-known aphorism that goes something like this:
"Perfection is finally attained not when there is no longer anything to add but when there is no longer anything to take away."
We believe the same is true for plugin banner design; the more you add the worse your results will be. Most visitors will only spend a split-second of their attention to decide it they want to learn more about a plugin so we sure not to overwhelm them with complexity in your graphic.
So plugin banners should only attempt to capture the most important aspect of the plugin in an easy-to-comprehend visual and not be used as a menu of features. If the banner can capture the visitor's attention then they are more likely to actually read about the features and benefits in the description below.
We think the Tumbler Importer is a good example of this done right (except they could have done a better job of reserving "white space" around the plugin name):
Three Example Banners
No such post would be complete without three examples so we selected several plugins we developed for clients to showcase. Note that in all cases our clients had their own designers design the banners, we just built the plugins for them:
The reason we didn't include those things because we plan to write other posts where we drill down into the technical aspects of actually publishing plugins via Subversion (SVN) so we didn't do it here. And honestly it was late, I'd spent all day writing the post, still had other work to do and so I just wanted to click "Publish" and be done with it. 🙂
Still, after thinking about it this post does feel incomplete without that information so I decided to go ahead and update it since I don't know how long it will be before we can write the follow up post. Also Otto came along and mentioned as few things I thought it would be good to add in the body of the post.
Banner File Naming
Banner image files need to be saved with specific names, respectively:
Where to Store Banner Files
If you don't already know how to publish a plugin using Subversion then you can wait your our tutorial or better yet look for another tutorial on the web to explain using SVN to publish your plugin, like this one by @jalaine.
If you do know how you use Subversion for your plugin but don't yet know how to get the banner to work then here's how. In the root directory for your plugin you'll have these three directories:
Add a 4th directory called
assets and that's where you commit your banner files from up to the plugin repository's SVN server. This is also where screenshots go now, btw.
Important note: It's really easy to get confused and think you need to create an
assets directory in the root of your plugin, especially if you are using GitHub to maintain your plugin's development history. By nature you won't have an assets directory above your plugin directory in a Git repository unless you proactively structure it that way which wouldn't make sense for people who might want to use your plugin directly from GitHub.
So, be sure to put your assets directory as a top level directory for SVN:
Keep Banner File Sizes Small
As Otto mentioned, keep your images small. WordPress.org offers free plugin hosting so don't look a gift horse in the mouth, and you want your own plugin page to load fast anyway. And if you are using .PNG files be sure to shrink them with something like PunyPNG (thanks @photomatt.)
And Beware the Multiplication Sign
As Scott Reilly commented below, be careful not to cut-and-paste banner file names from WordPress blogs that contain the multiplication sign (
×) instead of what you really want which is is the lowercase 'X' (
x). Anytime WordPress sees two numbers separated by an
x — i.e.
772x250 — it does you the "favor" of converting to a multiplication sign — i.e.
772×250 — and that doesn't work for a banner image file name.
But thanks to Scott we've made sure our post has banner file names that are safe to copy-and-paste.
So in summary:
- Design a Banner Image
- Design as 1544x500 pixels for High DPI/Retina
- Also save as 772x250 pixels
- Accommodate the Plugin Name
- Uses 30px Helvetica Neue
- With a 30px left margin and 24px bottom margin
- Use Google's Chrome to Preview
- Save in One of:
- .JPG for Photos
- .PNG for Anything Else
- Keep the Design Simple
- Focus Visuals on One Key Aspect
- About Banner Files
- Name the Files Correctly
- Store the Files in the Right Place
- Keep the Files Small
- And use a real lowercase
Related Links and Posts
We just went in-depth about the banner but didn't cover how to get your banner actually published. We didn't cover that because we plan a future post to cover all the technical aspects of published plugins. But until we do you might have questions we didn't answer so we thought it would be nice to give you some other links that might answer them for you:
Last December, we added header images to the top of plugin screens. Since then, we’ve made more changes to the plugin directory and started supporting HiDPI images for those plugin headers as well. by Otto (@Otto42) on Make WordPress Plugins (2012)
Plugin authors can now add custom header images to their WordPress.org listings by Ryan Imel (@ryanimel) on WPCandy (2011)
Been giving a lot of thought to how to give plugin authors more control over their plugin pages. In WordPress custom headers have been hugely beneficial in people’s ability to make a theme their own without having to be a designer. (And designers can make them really sing.) by Matt Mullenweg (@photomatt) on Make WordPress Plugins (2011)
Did We Miss Anything?
Got any suggestions? Things we should have mentioned? Let us know in the comments.