WordPress Code Snippets

A fresh mix of code snippets and tutorials

WordPress readme.txt tricks

275

The readme.txt file plays a central role when developing WordPress plugins, especially when hosting them at the WordPress.org Plugin Directory. In this post I share some esoteric readme.txt tricks that plugin and theme developers may find useful.

Adding links

Use markdown syntax to add a link to your readme.txt file, for example:

[Link Text](http://example.com/)

Alternately HTML also works:

<a target="_blank" href="http://example.com/">Link Text</a>

Using HTML for links enables you to include other attributes such as target, et al.

Adding screenshots

Adding screenshots of your plugin can be done by adding a “Screenshots” section to your readme.txt. Here is an example:

Then you can use SVN to add the images that correspond to each of these descriptions, for example:

Notice that the file type doesn’t matter, only the file name (e.g., screenshot-1) is important. That is, the number specified in the screenshot name corresponds to the description number.

Alternately you can use the following syntax if you want to host the images at an external location (i.e., instead of bundling them with your plugin files):

A benefit of this technique is that you can name the image files whatever you want, and change the images quickly without having to update your plugin or use SVN.

Note also that you can include other information in the “Screenshots” section, but it will not be displayed by default at the Plugin Directory. Maybe useful for sharing more information to any users who are reading the readme.txt directly.

Display screenshots in browser

If you are including screenshots in your plugin, you may notice that they are downloaded to the user’s browser when clicked from your plugin page. To prevent the download, and instead get the images to display in the browser, run whichever of the following commands applies to your image(s):

These commands set the MIME types for ALL images of type (e.g., .gif, .jpg, .png), so they will definitely cover all of your screenshots. But you can also target individual images like so:

svn propset svn:mime-type image/jpeg screenshot-1.jpg
svn propset svn:mime-type image/jpeg screenshot-2.jpg
svn propset svn:mime-type image/jpeg screenshot-3.jpg

Etc., so that you apply the mime-type to whichever specific screenshots are desired. After doing so, your screenshots and other images will be displayed in the user’s browser instead of getting downloaded to their local drive.

Adding video

To add a video to your plugin’s readme.txt, you can use the following syntax:

[youtube https://www.youtube.com/watch?v=1234567890]

Or simply include the video URL on its own line:

https://www.youtube.com/watch?v=1234567890

As far as I can tell, this technique uses WP’s oEmbed feature. So the video must be hosted at a supported location. Other options may be available. Check the WP Codex for more information.

Adding Banners & Icons

To add banners and icons, create the following image files:

Notes:

  • This: (jpg|png) just means that you can create the files in either JPG or PNG format
  • As the path suggests, you want to add these files to your plugin’s /assets/ directory
  • You can also add an SVG-format icon, if desired

Add popout text

To add a popout text box, precede the text with a right-angle bracket:

> This is boxed text

That will display the line of text in a light-grey colored box. To box multiple lines, you can do this:

This is useful for making content “pop” on the page.

Adding other images

To add other images elsewhere in the readme/documentation, use <img> tags, for example:

<img src="http://example.com/image.jpg" alt="An amazing image" />

Alternately, I am guessing that maybe just adding the image URL on its own line might work as well:

http://example.com/image.jpg

But I haven’t tested this, so can’t say for sure.

Formatting text

To format text as lists, strong, emphasized, and so forth, use markdown.

Now go forth and document thy plugins!

Learn more

WordPress Themes In Depth


Show Support

Like our new Facebook Page to show support!