Creating and adding a Github gist into your WordPress post or page
I usually use the pre or code tag from the Visual Editor TinyMCE bar to show code. But sometimes it just comes out looking wrong when I am trying to show php code in a post/page (CSS seems to work fine). So I went looking for another way to add code to my posts. I am now testing out using a Gist through my Github account.
Adding a gist to a post
Getting the gist code to show in a post or page is a little more difficult then just pasting the URL of a gist into a post or page. One has to first add the following code to the functions.php file OR add a plugin to show the gist.
I decided on the non plugin route and added the below code into the child theme functions.php file.
(The link I pasted below is https://gist.github.com/6146811.git)
Creating a gist
1. Go to https://gist.github.com/ login to your Github account or create a new account.
2. Click the + sign next to your own name to create a new gist.
3. Creating a new Gist.
Description area: (I added) A Test gist
Name of Gist: (I added) name-of-test-gist (I have found out that it is better to only use lower letters.)
If your adding php code then add the extension .php. If CSS then .css. If Js then .js.
Code/content area: I added some text.
One can add multiple files to the same Gist by clicking Add file. When finished decide if you want to create a secret or public Gist.
4. The Gist overview.
On the right it says Embed and below it HTTPS. Add the HTTPS link to the post.
When you paste a gist into your WordPres post all of the files inside of the gist will be seen in your post/page.
If you only want to show one file inside a gist and not all the files that might be inside a gist…..
Click the title (Tooltip says Permalink) of the file you want to embed.
My example: https://gist.github.com/paaljoachim/c8155daa585ed1ea7eaf#file-name-of-test-gist
– Remove the username.
– Change the # to ? (question mark).
– Change file- to file=
– NB! If you have capital letters in the name then remember to also change the gist permalink to reflect this. I would recommend to only use lower letters.
The result: https://gist.github.com/c8155daa585ed1ea7eaf?file=name-of-test-gist
A very big thank you for inspiration and tips: An article about adding gist without a plugin at blackhillswebworks.com
Another resource. This one for Git: https://ricardofilipe.com/projects/firstaidgit/#/