Quick Tip: How to Add a Custom Header Image for Your Plugin on WordPress.org

Quick Tip: How to Add a Custom Header Image for Your Plugin on WordPress.org

on Mar 10th 2012 with 26 comments
Tutorial Details
  • Program: WordPress
  • Version: Any Version
  • Difficulty: Medium
  • Estimated Completion Time: 5 min.

About two months ago Matt Mullenweg (the man behind WordPress) posted an update on the WordPress Developer’s blog, that plugin developers will now be able to add custom header images to their plugins’ pages. This initiative was appreciated a lot for providing plugin authors with more control over their plugins. Today, I will tell you how to add a custom header image to your WordPress plugin and what the advantages are of adding it.

What Is a Custom Header Image?

“A picture is worth a thousand words.”

First of all if you are a WordPress plugin developer, then you can now add a 772 x 250px JPG/PNG banner image on your WordPress.org plugin page. Here are some examples:

What is a Custom Header Image for WP Plugins?

How to Add a Custom Header Image to Your WP Plugin Page

Adding the image is an easy task, follow the these steps:

  1. Create a 772 x 250px sized image that must be a PNG or a JPEG/JPG. The GIF image format is not supported.
  2. Open your plugin through your SVN software (I use TortoiseSVN) and make a folder named “assets” inside your plugin’s root location. This is the same folder level that contains your trunk and other folders. See the image below.
    assets folder
  3. Put your image in the assets folder and name it “banner-772×250.[jpeg/jpg/png]“.
  4. Right-click your assets folder, then select TortoiseSVN->Add. It will add your folder and banner to your plugin in SVN.
  5. Then again right-click your assets folder and click SVN Commit.
  6. You are done! Wait 15 mins and then visit your plugin page at wordpress.org to see the banner.

Advantages & Creative Approach

One might wonder what this small image can do to promote your plugin but believe me it really works. Developers are using this banner for the following benefits:

  • To make their plugins more prominent.
  • To get a good deal of traffic to their sites.
  • To make it easier for an end user to view the NEW features in the plugin updates.

Example:

See the plugin WP MashSocial Widget‘s banner below, how it is used to put the watermark of the developer’s site and to show the latest updated features in the plugin (i.e. Ver 1.1). This plugin had no banner before 16-02-2012 and when I put the banner on you can see a major change in the plugin’s download stats.

assets folder

Your Turn Now

It’s your turn now! Make a creative banner for your plugin, and share you experience with us in the comments below.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I have been designing web pages since the early days of tables and spacers. And No – I've never used the scrolling marquee with Comic Sans fonts :P. I am doing Electrical Engineering from U.E.T Lahore, but web development is the area of my deep interest. I can write HTML, CSS, PHP, Assembly, C, C++(OOP), Visual Basic, Verilog, and MySQL etc. Personally I like tablets having Andriod OS on them. When not on the computer, I enjoy spending time with my family & Friends, taking pictures and drinking strong coffee. I blog at Freakify.com where I collected 95 Best Paid WordPress Themes in 2013. Connect With Ahmad Awais on Google+, Facebook and Twitter. Now reporting at AngryGadgets and Windows 8 Daily NEWS  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://profiles.wordpress.org/stephenh1988/ Stephen Harris

    Great tip! It’s can certainly improve a plug-in page. For those who want to preview the banner before uploading it, when logged in you can test a header by visiting: http://wordpress.org/extend/plugins/your-plugin/?banner_url=address/to/your/image.png.

    I’ve used a banner in my Markdown plug-in to help illustrate how the plug-in looks on the front-end.

    • http://freakify.com Ahmad Awais
      Author

      Hey Harris thanks for liking and a tip.

  • Pingback: Quick Tip: How to Add a Custom Header Image for Your Plugin on WordPress.org | Shadowtek | Hosting and Design Solutions

  • Pingback: Quick Tip: How to Add a Custom Header Image for Your Plugin on WordPress.org

  • Pingback: Web Savvy Marketing Launches Online Store for Premium WordPress Themes | Open Knowledge

  • Andrew

    It looks like this post was written by someone really amature and new to the WordPress. The author does not even considered the fact that people who develop plugins are most probably already aware of this change and know how to add images as their plugin header. I checked out the other post by author and it was also full of mistakes. wptuts+ should really reconsider the quality of posts they are publishing. wptuts is not as good as other tuts+ sites, the standard and quality of tutorials is detoriating in my opinion.

    • http://wp.envato.com/ Japh Thomson
      Staff

      Thanks for your feedback, Andrew. If you have some specific suggestions for improvement, please let us know. Otherwise, just because a tutorial is too basic for yourself, doesn’t mean other won’t find it useful.

    • http://freakify.com Ahmad Awais
      Author

      Mr.Andrew with due respect , no one is a born hero.I teach WordPress in my area and know a lot of developers ,who learn plugin development from tutorials provided by different sites, don’t know how to put this custom header image for their plugins.After posting this post I got 5 to 7 mails thanking me for the quick tip.Secondly, this is a “Quick Tip” not a big tutorial about anything.You can find this tip hardly on 5 blogs over the air.Finally, kindly mention the mistakes and they will be corrected sooner than later.

    • http://nabtron.com Dr Nabeel

      Andrew, this tutorial was probably obvious for routine developers but not useless atleast.

    • http://psdesignzone.com/ Jordan

      I found this post really helpful, It’s easy, and straightforward. In programming a lot of times even the most basic thing is really frustrating if there is absolutely no documentation on it.

      • http://freakify.com Ahmad Awais
        Author

        Thanks.I am glad it helped you.

  • Pingback: WordPress Community Roundup for the Week Ending March 10 - Charleston WordPress User Group

  • http://ipadiphonetips.com Ahsan Ali

    Thanks bro! Very helpful tip. I’m new to wp and this tip helped me improving my plugin page. Now it’s look more eye catching ;)

    • http://freakify.com Ahmad Awais
      Author

      Graphics Designers like you can make it way better than me :P

  • Saad

    Hey Ahmad, Thanks for this Quick Tip ! Really helpful for beginners .. Stay Blessed and keep adding value :)

  • http://www.internet-khazana.com/blog/ Mohsin Ali Waheed

    This is really amazing post. I am planing to create my own plugin and this post will really help me to customize header image of plugin page.

    • http://freakify.com Ahmad Awais
      Author

      Yup it will be very helpful.

  • http://www.coolblogheaders.com Dude7

    I didn’t know I could do all this! Thanks a lot for the tips, now I’ll go design my own stuff!!

    • http://freakify.com Ahmad Awais
      Author

      Its good you find it helpful.

  • Muhammad

    @Japh Thomson

    This guy is making grammar mistakes.

    Also, he made his friends to spam comment on the post just to feel good.

    Don’t you think Editorial standards should be set higher at Envato?

    • http://wp.envato.com/ Japh Thomson
      Staff

      Hello Muhammad, thanks for your feedback! If there’s a specific grammar mistake, please point it out and we’ll happily fix it up.

      Also, the comments on this post are good helpful, conversational comments.

    • http://freakify.com Ahmad Awais
      Author

      WOW, I don’t know why you didn’t mention any mistake.By the way If you can understand what I wrote than it will help you do what the title says.
      My friends? Is it an illegal act to share your article at your Social Profiles where your friends can see it.(I have already written a lot of your (s) :P ).

      • http://freakify.com Ahmad Awais
        Author

        *then

  • http://imdev.in Devin Walker

    Just what I needed for my plugin (queue shameless plug): http://wordpress.org/extend/plugins/wp-no-tag-base/

    • http://freakify.com/ Ahmad Awais
      Author

      Good to know that.

  • manichooo

    These steps do not work for me, help!!

  • http://www.facebook.com/auntypizza Keely Worth
  • http://twitter.com/Nick_Johnsn Nick Johnson

    These tips are highly useful in adding custom header . It is very essential also to learn this tips.