The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Detect Gists and Embed Them

Last updated on:

Just post a link to a GitHub Gist and it will be nicely embedded. Or use the format this snippet provides and create the shortcode yourself. For your functions.php file:

function gist_shortcode($atts) {
  return sprintf(
    '<script src=""></script>', 
    $atts['file'] ? '?file=' . $atts['file'] : ''
} add_shortcode('gist','gist_shortcode');

// Remove this function if you don't want autoreplace gist links to shortcodes
function gist_shortcode_filter($content) {
  return preg_replace('/https:\/\/\/([\d]+)[\.js\?]*[\#]*file[=|_]+([\w\.]+)(?![^<]*<\/a>)/i', '', $content );
} add_filter( 'the_content', 'gist_shortcode_filter', 9);

Any of these formats will work:


Reference URL


  1. Grawl
    Permalink to comment#

    It’s PHP. What about flying JS?

    • Nathan Shubert
      Permalink to comment#

      I’m into this approach. I prefer to do any of my content stuff with php and use js for “making it fancy and rad” factor.

  2. Hamed Ghaderi
    Permalink to comment#

    I used it in my functions.php in wordpress but it doesn’t work.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed