Embedding Code in WordPress Posts and Pages

If you purchase through a link on our site, we may earn a commission. Learn more.

Embedding code in WordPress posts and pages can be a fiddly process. Lets learn what are our options for displaying code on our sites.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

Embedding code in WordPress posts and pages can be a fiddly process.

There is a page in the WordPress codex dedicated to Writing Code in Your Posts, which is a good place to start from.

In the past few years, the preferred way of embedding code was through the use of a plugin, such as Syntax Highlighter Evolved or Crayon (which is becoming even more popular than Syntax Highlighter).

As GitHub became more popular in the past two years, many leading WordPress developers have switched to Gists to display their code.

Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versionedforkable and usable as a git repository.

Bill Erickson moved all his code to Gists and blogged about it:

“Keeping WordPress from messing up code you’re sharing in the post editor can be difficult, and a lot of my old posts had mangled code. By moving everything to github I don’t have to worry about this anymore. It also means I can have a single source of code linked from multiple places (in a blog post, in a code snippet post…).”

Take a look at these two examples:

http://www.billerickson.net/reusing-wordpress-theme-files/

I’m still undecided whether to switch to Gists, my main concern is that I’d like to keep full ownership, although GitHub is unlikely to be going anywhere in the next few years, considering how popular its become.

I think at the next instance of finding a post with mangled post on my site, I will take the plunge.

Inserting Shortcodes in Documentation

If you have are preparing some documentation and want to insert shortcodes, but not have them run within your post or page, you’ll probably start looking for a plugin to save your day.

It happened to me and I found these two excellent plugins:

The only alternative is to use a full blown syntax highlighter from the plugins mentioned earlier, but that’s overkill in my opinion.

You can also replace ‘[‘ and ‘]’ with their HTML character entities, but that’s a massive pain in the backside.

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.

Jean Galea

Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Discover more from our archives ↓

Popular articles ↓

18 Responses

  1. The code resides on Github servers and anyone can share that code in their blog posts right. If that saves a plugin from our WordPress installation , that’s good thing for WordPress blogs hosted in shared hosting

  2. By the way, for those who are interested in Markdown (mentioned by Mike above), I’ve found one Mac app which is currently free (Mou and another free online app (Dillinger).

    1. Mou is a great find; I’m definitely checking it out to see if it addresses the few issues I’m having with Markdown Pro.

      Also, as far as online here’s another one that also does WordPress plugin-specific Markdown:

      1. Aha! This is just what I needed 🙂 Takes the pain away from creating the readme.txt file for WordPress plugins. Thanks!

  3. Sounds great Mike, you’re making me feel a bit jealous, I really miss being in the US when I read about all you guys meeting at WordCamps. But the virtual world will have to do for now 🙂

    1. Jean,

      Ha! Two old sayings for you: “Grass is always greener” and “Be careful what you wish for.” 🙂

      1. True haha. Well right now I really can’t complain, been in Thailand for the last 3 months, and hitting the beaches in the south for a full two weeks from next Wednesday. I guess that will compensate for the lack of WordPress activities 🙂

  4. Thanks for the writeup on this. Had me excited. But after testing for a little bit I realized that the syntax coloring for PHP doesn’t register unless you add the starting PHP tag at the top. For snippets I don’t actually want that because it can confuse users.
    I bet they will improve this with time, but for now I think I am going to stick with Google Syntax Highlighter for WordPress. I love the idea though of GIST, and managing all my code snippets from blog in a central location.

    1. Brian, you’re referring to Gist in your first sentence about syntax coloring right? Just to clarify for other readers.

  5. Hi Jean,

    I considered using Gist for HardcoreWP but decided against it because I find their color syntax highlighting less than inspiring and I don’t like the fact that the “View Raw” loads another page vs. a pop-up. Instead I’m using Better WordPress Syntax Highlighter which uses GeSHi on the server side vs. a Javascript highlighter.

    To resolve the editor situation I wrote a simple plugin to disable WYSIWYG mode and then I write my posts in Markdown Pro (which I love). But it’s still a pain because I have to manually change the markup surrounding the code before I post.

    However, you’ve got me thinking about creating another plugin that will let me name and add code snippets in a metabox and then use a shortcode to merge them into the post by name exactly where I want them. Something else for my todo list!

    1. Hi Mike,

      That seems like a nice solution. I haven’t really adopted Markdown yet, I quite like WYSIWYG mode and wouldn’t like to do away with that just for inserting code.

      As I said, not sure yet, although I’ll probably end up using Gists.

      BDW I wasn’t aware of HardcoreWP, some killer articles there, really needed the ones about classes as I’m looking to start building plugins in that style. You’re very welcome to post guest articles here if you’re interested in that.

      1. Thanks Jean for the nice comments. BTW, the way I’m doing code in my posts is not related to Markdown, it’s just that I do both. Also, Markdown Pro has WYSIWYG in the right-hand pane with markdown in the left-hand pane; really nice but it’s Mac only.

        And my blog is a new blog but I’ve got lots of things to write about; I’m putting effort into it instead of WordPress Answers where I posted almost 400 answers to date. I might take you up on the offer to guest post once you announce your future plans (assuming you plan to) so I can an idea of what might be a good fit for your site that I have expertise in. But time is always a limiting factor. 🙂

        1. Welcome. I’ll look into Markdown a bit more when I have time, I’m on a Mac so it could be a good thing.

          Your blog is a most welcome addition, I only know of Pippinsplugins.com and Tommcfarlin.com which really deal with plugin development mostly exclusively. I do plan to do more writing about plugin development here on WP Mayor, mainly because that’s the direction I’m taking myself, so I’ll have more material and things to share as I learn more myself.

          1. Yes, working with Markdown is just so much easier than raw HTML, and once you get the hang of it it can be quicker than working in WYSIWYG mode.

            Thank you. Yes both Pippin and Tom have a lot of offer and I’ve been following their blogs closely. Matter-of-fact I met Tom IRL tonight at the WordCamp Atlanta after party at the 8Bit offices; definitely a great guy and a great asset to the WordPress community.

            Hopefully between the four of us (and more) we can churn out some great plugin-related content in 2013 and beyond.

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.