How To Embed Github Gist Snippets in WordPress

With EmbedPress, you can embed GitHub Gist Code into WordPress, using just a URL.

GitHub is an enormously popular service that enables developers to upload/update & share source code online. It’s like a quick and easy notepad for developers.

Github embeds are possible but 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.

Click here to find EmbedPress on

How To Setup GitHub Gist & Get The URL #

EmbedPress is a very helpful plugin that expands and improves WordPress’ capabilities. Install EmbedPress and your WordPress site will become far more powerful. Here’s how to embed any Github into your WordPress site, using the EmbedPress plugin.

Step 1. Set Up Your GitHub Account & Create GitHub Gist #

First, Login/Register to your GitHub Account with your credentials. You can Sign In to your existing account or create a new one.

Embed Github

Write your code, name your file with the proper extension such as ‘Index.php’ as shown below & click the ‘Create Public Gist’ button.

Embed Github

Once your Gist is created, all you have to do is copy the URL to be used for EmbedPress embed.

How To Embed GitHub Gist Snippets In Gutenberg? #

EmbedPress is a beneficial plugin that increases and improves the embed capabilities of WordPress. 

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

Step 1: Add EmbedPress Block In Gutenberg #

First, Go to your WordPress site. Open a post or page then click on the ‘+’ icon in the editing area. Search for the ‘EmbedPress’ block and select it. Embed the URL of your GitHub Gistn there. Click the ‘Embed’ button and you’ll now see your GitHub Gist snippet.

Embed Github

Step 2: Customize Your GitHub Gist Embed #

You can customize the ‘Width’ & ‘Height’ of your GitHub Gist embed effortlessly. Set your width or height value as you want. 

Embed Github

Publish your WordPress content and your Google sheet will be embedded, as in the image below:

Embed Github

How To Embed GitHub Gist In Elementor? #

With a single click, you can embed GitHub Gist on the Elementor page builder without any coding. Let’s see the process below

Step 1: Select The EmbedPress Widget From Elementor Panel #

First, create a new page from your WordPress dashboard by navigating to Pages→ Add New and then clicking on the blue ‘Edit With Elementor’ button. Then search for the ‘EmbedPress’ element from under the ‘ELEMENTS’ tab in Elementor Editor.

Embed Github

Step 2: Paste The Gist URL In Elementor #

Now click on the ‘Content’ tab in Elementor Editor and enter the URL of your GitHub Gist embed in the ‘Embedded Link’ section as shown below. 

Embed Github

From, The ‘Styles’ tab you can customize the ‘Margin’, ‘Padding’, ‘Width’ & ‘Height’ of your GitHub Gist embed. 

Embed Github

How To Embed GitHub Gist In Classic Editor #

Open up your preferred posts or pages on WordPress Classic Editor

Add your GitHub Gist URL into the content area, with the ‘Visual’ tab enabled. You will see a purple background with a ‘Loading your embed’ message. And within a few moments, your URL will automatically be transformed into an embed of your GitHub Gist. Then ‘Publish’ your GitHub Gist without any hassle. 

Embed Github

Get Live Experience Of Embedding GitHub Gist #

# Title: Calculate Fibonacci Sequence
# Description: A Python function to calculate the Fibonacci sequence up to a specified number of terms.
def fibonacci(n):
sequence = [0, 1]
while len(sequence) < n:
next_number = sequence[1] + sequence[2]
return sequence
# Example usage
fib_sequence = fibonacci(10)
view raw hosted with ❤ by GitHub

If you are facing problems and require further assistance, feel free to contact our support or join our Facebook Community to get in touch with WordPress experts and content creators like yourself.

Powered by BetterDocs