Tuto: using GitHub Gist with WordPress shortcodes

I have been using GitHub for a few weeks now, and all I want to say is : that’s great! No, really, it’s awesome, very powerful, and so useful! So if read some of my previous posts, you saw that I am using GitHub Gist to insert code on my website instead of inserting and formatting it directly inside the post itself. There are some reasons for that, the first one is that acting this way allows me to use the code I host on GitHub in other circumstances (in a forum, in the support, linking to it in an email…), and the second one is that I like the way code is embed and formatted…

So today I decided to explain in a few lines of code how to create a simple plugin to insert GitHub Gist into your posts, pages, or custom post type using WordPress shortcodes. But before we start please make sure you have an account on GitHub.

First of all, you need to know how to create a simple shortcode in WordPress, you can find more informations on the codex. Than it’s pretty simple because GitHub has a nice function to help Gist display using a portion of javascript. For example when you create a gist, GitHub automatically creates a “Embed All Files” link (see screenshot).

If you click on that link you’ll see a javascript code, and this is our starting point. All we have to do is embed this javascript code into a shortcode, where we place an ID variable to target a specific gist instead of the current Gist ID… and that’s it!

The code below is pretty simple and commented, so i hope you’ll understand it!

Code

What’s next?

Well to be honest this tutorial is just a pretext to create a simple plugin that i will use in my next tutorial that will explain how to publish a plugin on the official WordPress Plugins Repository with the brand new Coda 2 software from Panic inc (and for once SVN seems to be simple!).