Embedding GitHub Gists in WordPress

Embedding source code in WordPress isn’t an easy task. Although few plugins have tried to simplify this task of sharing and embedding codes, it’s easy to get the code messed up with other text and content in the WordPress editor.

Wouldn't it be awesome if we could directly embed the code snippets from Gist using oEmbeds?

In this post, I will walk you through few ways that you can easily embed GitHub Gists in WordPress posts. I will also show you some additional controls and options with Gist that you can achieve by installing different plugins.

First, if you have stumbled on this article and do not know idea about Gist, here’s a brief introduction to the code snippet service – Gist.

GitHub Gists Introduction

Gist is a service from Github that allows you to share your git repositories with all the functions of Github. You can add your chunk of codes to a Gist and share it anywhere you like.

GitHub introduces gist as a Git repository that can be forked, cloned, and manipulated in every way.

The introduction is pretty self-explanatory, and if you’ve used Github before, it won’t take you long to understand and start using Gist.

Embedding Gists in WordPress

As Gists have become a popular way of sharing codes, there exist many ways you can embed it within your WordPress post.

GitHub itself provides a default way to embed Gist in other websites, and it requires inserting a “script” tag. But like I mentioned above inserting codes with “script” tags can get messed up with the TinyMCE editor used in WordPress.

Plugins or some custom code that enables oEmbeds for Gist should be an ideal solution. Let’s get started with the easiest one – Adding oEmbed support using plugins.

Embedding Gist Using Plugins

1. Shortcode Embeds – Jetpack Plugin

If you use the popular Jetpack plugin, you can just activate the Shortcode Embeds feature to add oEmbed and shortcode support for several platforms including Gist.

Once activated, let’s look into few ways you can embed Gists using the shortcode embeds feature of Jetpack plugin.

1.1 Using oEmbeds – Sharing URL directly

Jetpack supports oEmbeds for Gists, which makes it really easy to share them within your posts or pages.

To embed any specific Gist, all you have to do is copy the URL of the gist and paste it into a single line.

First copy the URL as you can see in the URL bar.

Paste it on a single line of its own in WordPress editor.

This should automatically pull in the gist and make it embedded into your post or page – wherever you are looking to display the Gist.

Note: please make sure you do not turn the URL into a link.

1.2 Using Shortcodes to Embed Gist

Shortcodes allow greater flexibility of where and how you can display the Gist in your blog.

If you prefer using Shortcodes within post/page editor, you will need to;

i) Find and copy the URL of the Gist that you want to embed

ii) Put it in a format like this Shortcode

iii) Alternatively, just use the number part in the URL to embed it in this format.

2. GistPress Plugin

GistPress is one of the most advanced stand-alone plugins built to integrate Gist with WordPress. The plugin is exclusively hosted on Github and is available to download for free.

GistPress allows you to add oEmbed support and Shortcodes to embed Gists similar to Jetpack feature discussed above.

In addition to providing all features of Jetpack Shortcode embeds, GistPress provides some additional features that might be useful if you are looking to customise further how Gist appears on your blog.

Some notable additional features of the plugin include,

Ability to display only specific lines from the gist that can be useful if you are explaining lines from your code.

Ability to highlight specific lines within a Gist.

Ability to add additional CSS classes for better styling.

GistPress is also built with developers in mind, allowing you to add CSS styling hooks and advanced features such as letting you debug embedded Gists using a custom panel for the Debug Bar plugin.

2.1 Using oEmbeds with GistPress

This is straightforward. All you have to do is paste the URL to a Gist in a single line in the WordPress editor.

2.2 Using Shortcodes for additional features

The advantage of using Shortcodes over oEmbeds is that you can further customise the way Gists appear in your post.

a. General Shortcode

The shortcode includes id of the Gist file, just make note of the syntax.

b. Displaying only single files

By default, both oEmbeds and general shortcode above will display all the files in the Gist (Yes, a Gist could be a combination of multiple files – Multi-Gist).

You can further specify the name of the file in shortcode to display the single file.

c. Display specific lines from a Gist File

You can further limit tot display only a specific line from a file. Add the lines attribute to the shortcode and specify the range of lines (see the shortcode below).

d. Highlight lines of a Gist File

Just add highlight attribute and specify a comma-separated list of lines or line ranges to highlight from the gist file.

So, far we discussed ways that you can use plugins to add Gists in different ways. Although I strongly recommend using above plugins, you can easily add oEmbed support by adding few lines of custom code to your theme.

Custom Code to Add Gist Support

Here’s a custom code that you can code to your theme’s function.php file (use Child Theme and always backup your file) or use as a plugin.

As you can see in the Gist file embedded below (using oEmbeds), the code is from Ninnypants.

You can find several other custom codes by searching for it, but I suggest sticking to the above plugins if you are not an advanced user.

Conclusion

I hope you are now familiar with GitHub Gists and ready to share your code snippets with Gists. We should hopefully see support for Gist oEmbeds by default in WordPress core soon!

Comments

As one of the contributors to GistPress, naturally, I’m going to think that GistPress is the most powerful and flexible of the options listed here – but I still think it would be good to improve it further!

Best WordPress Deal

Free Domain Name

Best SEO Tool

Top WordPress Developers

WPism (WordPress-ism) is a blog on everything WordPress covering tutorials, tips, themes, plugins, hosting, help on WordPress topics and more. Our main focus is helping marketers using WordPress for content marketing, SEO, and Social Media. Learn more about WPism .

Disclosure: Like several websites on the internet, some of our posts might include affiliate links. You can support our hard work by using those links to make any purchases. We earn tiny commission at no additional cost to you. Read our full FTC disclosure .

Check Your Website SEO

WPism is the best source for all things WordPress. Our mission is to empower bloggers and publishers.