How to Embed Github Gist Snippets in WordPress

With EmbedPress, you can embed Github Code to WordPress, using just a URL.

Github is an enormously popular service that enable developers to upload/update & share source code online.

Github embeds are possible, but they’re not easy to use via normal methods. EmbedPress is different. With EmbedPress, you don’t have to mess around with embed code. All you need is the Github Snippet URL.

Here’s how to embed any Github into your WordPress site, using the EmbedPress plugin.

Step #1. Install the EmbedPress plugin #

EmbedPress is a very helpful plugin that expands and improves on WordPress’ capabilities. Install EmbedPress and your WordPress site will become far more powerful. Click here to find EmbedPress on WordPress.org.

Step #2. Set Up Your Github Account #

  1. Login/Register to your Github Account
    screenshot_4
  2. Write your code, name your file with proper extension such as “Index.php” as shown below & click “Create Public Gist” button.
    screenshot_1
  3. Once your Gist is created, all you have to do is copy the URL to be used for EmbedPress embed.
    Embed Github

Step #3. Embed Github Gist & Publish #

Now you have the Github Gist URL, you can add it to WordPress.

  1. Go to your WordPress site.
  2. Edit a post or page.
  3. Add your Github Gist URL into the content area, with the “Visual” tab enabled.
  4. You will see a purple background with a “Loading your embed …” message:
  5. Your URL will automatically be transformed into an embed of your Gist Embed.

Step #4. Edit your Github Gist Embeds #

While editing your WordPress content, you can also edit your embed, thanks to EmbedPress.

    1. Hover over the embed, and a purple button will appear.
    2. Click the pencil and a pop-up screen will appear with more options.
      google-docs-pencil
    3. You can now change the embed URL, plus you can also control the maximum width and height of the embed.

Powered by BetterDocs