Embed a Github Gist in WordPress Posts/Pages

Looking for a simple way to embed a Github Gist in your WordPress website?

I spent some time reviewing the available plugins in the WordPress plugin repository, so I thought I’d share my findings.

The plugin I ended up using is the oEmbed Gist WordPress Plugin by Takayuki Miyauchi.

I wanted a plugin that uses WordPress’ native oEmbed support so that I could simply paste the URL to a Gist in my post or page (rather than having to use a special shortcode or another overcomplicated method).

Here’s an screenshot of the plugin in action on one of my recent blog posts:

Gist Embed Example
Gist Embed Example

The plugin allows you to embed any public Github Gist. To do so, just put paste the full URL to the Gist on its own line in your WordPress post or page. For example:

https://gist.github.com/2598625

If your Gist contains multiple files, the above example will show all files in the embed.

However if you want to embed an individual file that is part of a multi-file Gist, you use a URL which points to that particular file. For example:

https://gist.github.com/2598625#file_2_safe.php

(To obtain that link, view your Gist on the Github website and click the hash link (#) near that specific file. Then copy the URL and paste it into your WordPress post or page.

It’s that easy!

Using Github Gists (and this plugin) is a great way to embed code snippets in blog posts, because it ensures that the WordPress Visual Editor doesn’t mess with your code.

If you update the Gist, the changes will be automatically visible on your website too.

4 thoughts on “Embed a Github Gist in WordPress Posts/Pages

    1. Hi, this is great, but it seems to insert an extra line break bewteen each line in the gist. The line numbers on the left are correct, but the gist itself extends way beyond them. It does it here on your site, and also when I try it on mine. Any ideas what might be causing that?

Leave a Reply

Your email address will not be published. Required fields are marked *