Tag Archives: plugins

How to add Icons and Banners for your Plugins hosted on WordPress.org


Screen Shot 2014-09-08 at 12.29.32

WordPress 4.0 introduced a new way to browse Plugins in the admin interface: beautiful icons show up that make Plugins looks like Mini-Apps. When a user clicks on one they get a description right there and then without the need to browse to the WordPress site in a different tab. This gives easy and instant access to important info without disrupting the user experience. Simply put: it’s beautiful!

It’s very simple to add your own icons and banners to this experience and stand out from the crowd. Let me show you how.

Plugin Icons

Create a square icon, much like you would for iOS and Android Apps. Avoid text and keep it simple. Icons can be either jpg or png (transparency is recognised in the latter format). You can upload two sizes with the following file names:

  • icon-128×128.jpg (or icon-128×128.png) for standard displays
  • icon-256×256.jpg (or icon-256×256.png) for retina/hi-res displays

The second file is optional and will show up if a suer browses on an iPad or Retina Laptop. Both files need to reside in the plugin’s assets folder. This is something that is not download when a plugin is installed and only lives on the WordPress repo.

Assets is the same folder that houses your screenshots you may have added which show up in the plugin descriptions. If yours live in the main plugin folder, perhaps now is a good time to move them into assets and keep downloads smaller.

If you don’t already have an assets folder, create one in your root directory of your svn repo (as provided by the WordPress Plugin Master), on the same level as trunks, tags and branches:

Commit your files using your favourite SVN Tool and now they’ll show up in the WordPress admin interface as seen in the screenshot above. It’s that simple.

Plugin Banners

Banners were introduced to plugin authors sometime in July 2012. Back then they were only displayed on the WordPress.org site as part of your plugin URL, like this: http://wordpress.org/plugins/child-theme-wizard

Screen Shot 2014-09-08 at 11.48.04

The new feature in WordPress 4.0 is that those banners now show up when a user clicks your plugin to get more information.

And just like with icons, those banners live in the same assets directory and follow the same pattern for standard and retina displays. Banner sizes are 772×250 and 1544×500 respectively. Again both jpg and png formats are accepted:

Here’s what a banner looks like in the WordPress admin interface:

Screen Shot 2014-09-08 at 11.50.08

How to tweak style code blocks in WP Code Highlight

I love the WP Code Highlight plugin by BoLiQuan. It brings well deserved colour to code blocks wrapped in PRE tags. I use them a lot, but until I discovered this plugin they all looked grey and bland.

Since last year I was using them on my iOS Dev Diary and thought since both sites are now running the same layout I’d integrate code highlighting here to (new for 2014).

Out of the box however it didn’t look as nice as I wanted it to:

Screen Shot 2014-01-04 at 09.41.51

I’m using it with P2 (or P2 Categories actually) so it needed some pazzazz. Here’s what I wanted to change:

  • make sure the border is cropped on the right
  • give the blocks rounded corners
  • and a bit more padding on the inside
  • make the text a bit bigger
  • offset the background and turn it light grey

And here’s what it looks like after the treatment:

Screen Shot 2014-01-04 at 09.49.48

Here’s the code that did it. Add this to the bottom of your style.css file, include it in your Child Theme or add it to a custom CSS option field (JetPack provides this for example):

The first block styles the PRE tags and gives them padding, rounded corners and a grey background. If you’re not using the WP Code Highlight plugin then this will work fine too.

The second block styles the plugin’s CSS specifically. Note how I have to repeat the padding and declare those rules as important. This is because the plugin uses inline styles that cannot be targeted with a standard override. The last line removes the cropping on the right hand side of the code blocks.

To increase the size of the code text, change the font-size property in the second block to 1.1 or higher.


How to link to graphic assets within WordPress Plugins

When you want to display graphics that reside inside your own plugin directory you can serve those via a handy built-in WordPress function called plugins_url. It works just like its counterpart get_stylesheet_directory_uri does in themes.

For example, if you’d like to link to a file that resides at

then you can write this URL out like so:

Note the usage of the PHP constant __FILE__ (that’s two underscores before and after FILE), it’s called a Magic Constant. In this case it points to your own plugin’s directory. If you leave this parameter out you’ll get the URL to the main plugins directory.

If instead you’d like to access the full server path to this file rather than its URL, you can use the plugin_dir_path function.

How to disable update notifications in WordPress

wordpress_iconsSometimes “new” doesn’t always mean “better” or “suitable”.

Sometimes we require older versions of plugins and I’d rather WordPress would not tell me that there’s a newer version available. After all, I might accidentally update a plugin – or perhaps my clients do, breaking the site or overwriting customisations.

Let’s take a look at how we can disable those notifications, both for single plugins and for the entire site.

Continue reading How to disable update notifications in WordPress