Github README Badges in WordPress

A number of frameworks and packages on Github make use of “badges” in their README files to document various attributes of the repository. A brief set of examples include:

  • whether or not a Travis build of the repository is passing
  • the number of times a release of the code has been downloaded
  • what platforms the code supports (particularly useful when developing for Apple devices)
Alamofire Badges

Alamofire Badges

The Swift programming language has undergone a number of changes and versions since it was first introduced in June of 2014. Each release has included breaking changes. Starting with this post I’ve started using a badge to indicate which version of the Swift language the post is compatible with.

Adding a Badge

You can use badges in your WordPress posts using one of two techniques. Strictly speaking a badge is nothing more than an inline image designed to look like, well, a badge. You can either create the image yourself or use a service such as Shields.io to link to a badge. Either way, to display the badge on your page you would use the <img/> tag. An example of a badge rendered through a link to Shields.io:

<img src="https://img.shields.io/badge/Swift-2.2-orange.svg?style=flat" alt="Swift 2.2" />

This results in this badge: Swift 2.2

Alternately you can use the Markdown syntax (which is what you would see in a Github README.md file). To use Markdown in WordPress one can install the Jetpack plugin and activate its Markdown module. With Markdown support activated create a new post and in the text editor type something like:

![Swift 2.2](https://img.shields.io/badge/Swift-2.2-orange.svg?style=flat)

This utilizes the Markdown image syntax and again, results in this badge: Swift 2.2

Shields.io

Shields.io styles itself as “badges as a service”. In other words, stop worrying about creating your own badges and have Shields.io create the badge for you. Most of the Shields.io badges are semantically tied to the state of “something”. For example, the URL https://img.shields.io/github/downloads/atom/atom/total.svg provides a badge that indicates the total number of times the Atom application has been downloaded. Shields.io does the work of contacting the Github API for the actual download count, and then generates the image to hand back to you.

Our example above for Swift uses this Shields.io URL: https://img.shields.io/badge/<SUBJECT>-<STATUS>-<COLOR>.svg. We use this by supplying:

  • SUBJECT is Swift
  • STATUS is 2.2
  • COLOR is orange

Of course orange is chosen since it is the de facto color for Swift.

Closing Comments

I highly recommend any Swift blogger out there to start using badges (or something equivalent) to begin indicating what version of the Swift language is being used in the examples. For example, even though the C-style for loop has been deprecated in Swift 2.2, it will become an error in 3.0. When someone comes to your 2.2 post and tries to run code using a 3.0 compiler, they’ll at least have some understanding that it might not be compatible.