How to Embed a Specific Gist File into WordPress

From time to time I have posted some handy code snippets to help you alter and enhance your WordPress web site. I have been inserting them as <pre> formatted text or using the <code> formatting option from within the WordPress classic editor menu.

At the time, this was the most expedient way of getting the code displayed within my article or post. However, many visitors simply copy and paste these pre-formatted snippets which can result in formatting or other issues.

To help save time and frustration on behalf of my visitors I am now providing my WordPress code snippets through my GitHub Gist account, a free service provided by GitHub. Please allow me some time to complete this task for all of my prior articles and posts. I have to manually transfer all these WordPress code snippets over to my GitHub Gist account while ensuring proper formatting. Then they have to be manually embedded back into their proper places with my articles and posts.

In this article I will show you how to embed your own GitHub Gists into your WordPress website article post or page. This will also work for other sites that permit embedded JavaScript.

 

Embed a Gist File #

While adding the first few Gists to my article posts, I discovered an issue with embedding them. Many of my code snippets were split into different files within my Gist and I wanted to access them individually, for various reasons. However, using the embed feature from the Gist website would not allow this. Rather it would embed the entire Gist and all of the files within it at once.

To get the embed code, click the clipboard icon next to the Embed URL of a Gist. To embed a specific Gist file, append the Embed URL with ?file=FILENAME

 

 

The instructions (above) for embedding a gist was straight forward enough but something was missing. I copied the Gist FILENAME I wanted to specifically post by right clicking on the filename and coping the link. But when we did as instructed the Gist embed would fail. Coping and pasting the Gist provided file URL was the issue! See example below:

 

 

If you copy a specific Gist file URL you get a link to the specific file:

• https://gist.github.com/endurtech/0016602#file-remove-replace-discussion-metabox-php

Attempting to append #file-remove-replace-discussion-metabox-php to the embed URL script won’t work.

[su_list icon=”icon: close” icon_color=”#ff0000″]

• <script src=”https://gist.github.com/endurtech/0016602.js#file-remove-replace-discussion-metabox-php“></script>

[/su_list]

You’ll need to manually adjust that URL, see example below:

[su_list icon=”icon: check” icon_color=”#15ae34″]

• <script src=”https://gist.github.com/endurtech/0016602.js?file=remove-replace-discussion-metabox.php“></script>

[/su_list]

Notice the small differences? You have to switch the “#” for “?” and “file-” to “file=” as well as the file’s extension of “-php” to “.php”

Making these adjustments to the URL allowed me to embed any specific Gist. Hope this all made sense!

It is a bit time consuming to have to manually adjust each embedded script. But I think it’ll be worth it since it displays the code beautifully and allows visitors to easily copy the code.

Embedded Gist Example #

 

Embed a Gist on WordPress.com #

If you are using a WordPress.com powered website, they have created a handy and simple shortcode to help you embed your Gist files. Visit their Gist shortcode support article on how to utilize it.

 

End of File #

I welcome your thoughts, questions or suggestions on my article on embedding a specific GitHub Gist file on your web site.

You may support my work by sending me a tip using your Brave browser or by sending me a one time donation using your credit card.

Let me know if you found any errors within my article or if I may further assist you by answering any additional questions you may have.