Create A Embed Github Gists Shortcode

Github is a popular open source code hosting website, that will use Git to allow you to push code on into their repositories. A sister site of Github is Gist which allows you to store code snippets on their website to share with everyone else. This is great resource for finding code snippets to use in your projects. This is also a great place to store your code snippets, if you have a web development blog Gist provides a great way of sharing your code snippets. Because this is a great place to store your code snippets you should be able to use Wordpress to get these snippets from Gist and display them on your site. In this tutorial we will create a Wordpress shortcode that would use a Gist ID and display the code snippet for this Gist.

#Create A Shortcode

First we need to add a new shortcode to Wordpress so that we can use this in our content. To add a shortcode to Wordpress you need to use the function add_shortcode(), which takes two parameters, the first is the name of the shortcode and the second parameter is the function to use when this shortcode is called.

add_shortcode('github-gist', 'pu_embed_gist');

function pu_embed_gist($atts, $content = null)
{

}

When you use a function as your shortcode the function will have two parameters, which are the attributes you assign to the shortcode and the second is the content of the shortcode. We can use these values inside the function to get the information that we need. The shortcode is going to be defined with one attribute of ID and the value of the attribute will be the ID of the Gist. ## Extracting The Shortcode Attributes

When you assign attributes to a shortcode they will come through to the function as the first parameter. There is a Wordpress function called shortcode_atts(), which will allow you to populate variables to use in your function. The only attribute we are expecting from this shortcode is " id", so this is the only one we need to extract and do a check to see if this is empty.

extract(shortcode_atts(array('id' => null), $atts));

if( $id != null)
{

}

#Get The Gist From Github

Once we have the ID of the Gist we can use this with the Gist API to get the data on the Gist. To use the **Gist API ** all you have to do is call the following URL and get the contents of what is returned.

https://api.github.com/gists/[GIST-ID]

With Wordpress you have the function wp_remote_get() which will make a HTTP request to a URL and return with the contents of this request, so we can use this to get the content of the Gist API.

$args = array('sslverify' => false);
$result = wp_remote_get('https://api.github.com/gists/' . $id, $args);

$json = json_decode($result['body'], true);

The $json variable will now be populated with the response of the Gist API. ## Displaying The Code Snippet

With the $json object populated we have the content of the Gist we can now display on the page. We first need to check if the API has returned the data we are expecting for this we use the PHP isset() function to make sure that we have the correct data. Now get the description value which we can use as a title for the code snippet. Then we can search the $json array to get the content of the code snippet, after we get this data and store it in a variable we can wrap this up in a pre tag so that the code can be displayed on the screen.

if(isset($json['description']))
{
	$description = $json['description'];

	if(isset($json['files']['gistfile1.txt']['content']))
	{
		$content = $json['files']['gistfile1.txt']['content'];

		$html = '<h2>'.$description.'</h2>';
		$html .= '';
		$html .= $content;
		$html .= '';
                return $html;
	}
}

#Putting It All Together

The above explains how we create the entire function, now we can put them all together to create the final function. Below is the entire code we use for the shortcode.

add_shortcode('github-gist', 'pu_embed_gist');

function pu_embed_gist($atts, $content = null)
{
	extract(shortcode_atts(array('id' => null), $atts));

	if( $id != null)
	{
		$args = array('sslverify' => false);
		$result = wp_remote_get('https://api.github.com/gists/' . $id, $args);

		$json = json_decode($result['body'], true);

		if(isset($json['description']))
		{
			$description = $json['description'];

			if(isset($json['files']['gistfile1.txt']['content']))
			{
				$content = $json['files']['gistfile1.txt']['content'];

				$html = '<h2>'.$description.'</h2>';
		                $html .= '';
		                $html .= $content;
                		$html .= '';
                                return $html;
			}
		}
	}
}

#Use The Shortcode

To use the shortcode that we have just created you need to go to your text editor and type in the following shortcode github-gist and add an attribute of id="" with a value of the Gist Id.

[github-gist id="GIST-ID"]

Here's an example of using the shortcode with a real Gist Id.

[github-gist id="3989393"]

#Embed Gist Code Snippets

Along with the Gist API there is another way of adding Gists on your website. You are able to add a piece of Javascript to your webpage to embed the gist directly. On the Gist pages there is a textbox which displays a Javascript script tag, which you can code and place in your webpage.

<script src="http://gist.github.com/2059.js"></script>

This works by taking the ID of the Gist and adding this to the end of the gist URL, followed by a Javascript extension. Adding the above code to your webpage will create this.

<script src="http://gist.github.com/2059.js"></script>

The difference between using this method and the API is that using the API you can style the code snippets from Gist exactly the same as all the other code snippets on your website.