How To Easily Embed Gist In WordPress Blog Posts

Written By: | Last Updated On: November 30, 2020

Gist is one of the services from GitHub which allows you to share code samples, notes across the internet easily. If you want to use Gist to share code on your WordPress site, here is how you can easily embed Gist on your blog posts.

How To Embed Gist In WordPress

I do share a lot of code on MetaBlogue, mostly because of small tips around customization of WordPress Themes and Plugins. It’s always easy to create code samples on Gist and share on WordPress.

Not only it looks clean and provide easy interface for your readers, it can also provide language syntax support. The only problem is that WordPress doesn’t provide the direct embed options for Gist, so you need to manually add the Gist on your posts.

Embed Gist In WordPress Blog Posts

There are multiple ways you can embed Gist on your WordPress blog posts and we will look at all these options in this post.

I use GeneratePress WordPress Theme on this blog that provides amazing customization options. So, I prefer no plugin solution for Gist support and not using any WordPress Plugin here. Though I will talk about some of the WordPress Plugins, if you prefer to go that route.

Let’s first understand what we need to embed the Gist on WordPress blog posts.

Gist provides an embed code which you can get from your Gist page. We need to copy and put that code on the page where we want to display the Gist.

Gist Embed Script Code From Gist Pages

Gutenberg Block

Though there is no official support for Gist on the WordPress, but you still can easily add Gist to your WordPress Posts with the help of Gutenberg Blocks. Gutenberg editor comes with a block called – Custom HTML.

Just add Custom HTML block and paste the embed code in that block. That’s it, you will have your Gist added to your WordPress Posts.

Embed Gist With Custom HTML Block

You can even use the Preview mode to see the Gist in the WordPress Gutenberg editing screen.

Preview Gist Embed On Gutenberg Editor

If you are using Gutenberg Editor, then that’s all you need to add Gist on your blog posts. This approach will work for any Blog that are not using AMP pages on their blogs.

AMP pages strips all the direct Script tags on the page which means your Gist added with this method will not be visible on AMP pages. If you are using AMP pages on your blog, you may want to use the next method of adding the Gist.


Gist Shortcode

As I mentioned earlier that I like native solutions rather than installing plugin for every small work. So, I have created a WordPress Shortcode which should work on most WordPress sites.

If you are publishing AMP pages and would like them to support the Gist snippets, we can easily do that with a simple shortcode. The shortcode should identify if the page is AMP and puts AMP compatible tags for Gist.

I am using AMP WordPress Plugin to generate AMP pages on MetaBlogue. It automatically adds the Gist script if it identifies Gist tag on the page. So, I only need to add the Tags for AMP pages. If you are using any other AMP plugin, please check the Gist support for that plugin.

You can use this shortcode in multiple formats to include the Gist on your pages. It can display the complete Gist or specific files from the Gist based on your supplied parameters.

[gist]Gist-snippet-ID[/gist]
[gist id=“Gist-snippet-ID” file=“Gist-file-name” /]
[gist id=“Gist-snippet-ID” /]

You can use any of the above format and it will automatically convert it into a Gist embed for regular as well as AMP pages. The code checks if it’s an AMP page and outputs the tags accordingly so that it will work across your site.

You can add the code to function.php and this shortcode will be available on your site. Just use Shortcode block to add the Gist to your pages.

The code might need small modifications based on the AMP plugin you are using on your site. You need to modify the lines to identify the AMP pages correctly according to the function available in your Plugin.


JetPack WordPress Plugin

If you are using JetPack WordPress Plugin on your blog, you don’t need anything. The plugin comes with a support of Gist Embeds. You can enable the Shortcode Embed Module from Jetpack → Settings → Writing.

JetPack Shortcode embed module

Once the Shortcode Embed module is enabled, you can use the Gist URLs or shortcode to embed gist snippets to your pages. Here is a detail guide of the supported shortcode formats.

The easiest way is to directly paste the Gist URL on your page. Just make sure that it is written as text not as a link, JetPack will do the rest. It also supports AMP pages, so it will display the Gist correctly on the AMP pages also.

I personally prefer using a shortcode format as if you later want to remove the JetPack Plugin, you can easily remove shortcode from your blog posts. I would use below format as its common between the Shortcode above and Jetpack, which means I can easily shuffle between the support without editing the posts.

[gist]Gist-snippet-ID[/gist]

There are some other plugins which are available in WordPress repository. They are not updated for long time but still works with Classic editors.

There are very few which provides support to Gutenberg Editor and AMP pages, so I would suggest checking the support before installing any other plugin.

Full Disclosure: This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). We only hyperlink the products which we feel adds value to our audience. Financial compensation does not play a role for those products.

About Sanjeev

A passionate blogger and technology enthusiast with more than 20 years of experience in enterprise software development. Over 12 Years of experience in successfully building blogs from scratch.

>
Share via
Copy link