Creating Beautiful Header Images For Plugins Hosted At WordPress.Org

You must have noticed header image on various plugin download pages at WordPress.Org. On December 21, 2011 Matt Mullenweg announced that they have enabled custom headers functionality for plugins hosted at WordPress plugin directory.

How To Add Header Image To Your WordPress Plugin Download Page ?

You can easily add a hear image to your plugin download page by following few easy steps:

  1. First create a 772px×250px image in jpeg or png. (Important: No animated GIFs. )
  2. Check it in to your plugin’s SVN directory with the path assets/banner-772x250.(jpg|png). (assets directory is added to your plugin’s root directory, not main trunk containing your plugin files.)
  3. That’s all for repo. Now visit your WordPress Plugin Page and refresh a few times and you should see your header image start showing up on your page (sometimes it takes up to 7 to 9 minutes.

How To Create Beautiful Header Image For Your WordPress Plugin ?

Creating WordPress Plugin Header Images

You can quickly and easily create your WordPress plugin header images. Most important thing to keep in mind before designing your WordPress plugin header image is its size, it should be 772px wide and 250px in height. In this tutorial again we will be using Fotor.Com because it is a free online service that works right from your web browser. So visit Fotor.Com and follow the given steps:

Step-1 Creating WordPress Plugin Header Image:

  • Click ‘Photo College’ link
  • From the left ‘Template’ sidebar pick a photo college template:Facebook Timeline Cover Creator
  • Now scroll down to ‘Background Setting’ and set width to 772px and height to 250px, select a background color.
  • Use right sidebar’s ‘Add Photos’ button to upload photos you like including in your header image.
  • Drag photo(s) to main template, you can adjust all layout by clicking and dragging lines.

Step-2 Adding Text, Clip Arts To Your Header Image

  • After you finish up creating your header image, click ‘Paint Brush Icon’ right to Fotor logo text on from top left corner below header.
  • A pop up will appear asking you to apply settings, click the ‘Apply’ button.
  • Click small ‘T’ icon present just above save button on bottom left corner:
  • Now select your favorite text style and click insert text button, you can manage text color, size, position, color etc from the pop-up that appears as you click ‘ Insert Text‘ button
  • There are other options to add Clip Arts, Frames, Effects and more.

Step-3 Save And Use Its As Your FB Timeline Cover

  • Finally click the ‘Save’ button, download image to your computer then use as your Facebook Timeline Cover.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.