Blog

How to Improve Your Plugin Header Image?

Now that the WordPress plugin repository is available in other languages, plugin authors need to create new bidirectional header images for LTR and RTL view.

Up until now plugin authors could create header banners only for the english plugin repository (wordpress.org/plugins), but from now it’s important to see how the plugin will look like in non-english languages, in particular in right-to-left (RTL) languages.

To test your plugin page, you need choose an RTL language like Hebrew, Arabic, Persian, Urdu or any other. Navigating to local plugin repositories by adding the language prefix to the URL: Hebrew (he.wordpress.org/plugins), Arabic (ar.wordpress.org/plugins).

To test your plugins header image go to the plugin using the local repository. As mentioned above, add the language prefix to your plugin URL.

Things to Notice

Local plugin repositories in RTL align the entire text to the right, whether it’s translated to the local language or not.

More important is the plugin name. Usually the plugin name in aligned to the left, but in RTL languages the name is aligned to the right.

The text elements can be moved according to the language direction – but the header image not! This simple difference requires plugin authors to review their header image with LTR and RTL languages.

Few Bad Examples

Ninja Forms:

ninja-forms-plugin-english
Ninja Forms Plugin English
ninja-forms-plugin-hebrew
Ninja Forms Plugin Hebrew

Yoast SEO:

Yoast SEO Plugin English
Yoast SEO Plugin English
Yoast SEO Plugin Hebrew
Yoast SEO Plugin Hebrew

Widget Logic

Widget Logic Plugin English
Widget Logic Plugin English
Widget Logic Plugin Hebrew
Widget Logic Plugin Hebrew

User Role Editor:

User Role Editor Plugin English
User Role Editor Plugin English
User Role Editor Plugin Hebrew
User Role Editor Plugin Hebrew

Few Good Examples

WordPress Importer:

WordPress Importer Plugin English
WordPress Importer Plugin English
WordPress Importer Plugin Hebrew
WordPress Importer Plugin Hebrew

Hello Dolly:

Hello Dolly Plugin English
Hello Dolly Plugin English
Hello Dolly Plugin Hebrew
Hello Dolly Plugin Hebrew

TinyMCE Advanced

TinyMCE Advanced Plugin English
TinyMCE Advanced Plugin English
TinyMCE Advanced Plugin Hebrew
TinyMCE Advanced Plugin Hebrew

Pastebin:

Pastebin Plugin English
Pastebin Plugin English
Pastebin Plugin Hebrew
Pastebin Plugin Hebrew

What do you need to do?

First, you need to design a new header image for your plugin with bidirectional view.

Next, use SVN to update your plugin banner image files /assets/banner-772x250.{png|jpg} and /assets/banner-1544x500.{png|jpg}.

As more and more plugins will be translated to other languages using translate.wordpress.org, you have to adjust your plugin header for new audiences.

If you have more tips to share, use the comments area bellow.

Rami Yushuvaev

I'm an entrepreneur, a web developer and a blogger. I’ve contributed code to each and every release since WordPress 2.8. I'm the Hebrew GTE responsible for the translation and the release of WordPress Hebrew version. The founder GenerateWP.com and several other WordPress related projects. I work mainly with Israeli startups and hi-tech companies, providing development services.

3 Comments:

  • Ahmad Awais

    Thanks for the post, Rami!

    I just released CF7 Customizer, its header image looks fine. Though I need to address my old plugins.

    Reply

  • Pingback: Weekly WordPress News: RIP Alex King
  • Katz

    Never thought about RTL languages in this context. Thanks for pointing it out.

    Reply

Leave a Reply