How to Insert Code into Your WordPress Blog

If you do any coding whatsoever – either for a website, your blog or an Arduino, you have seen code blocks in a web page. Every now and then I need to do the same in this website. My first thought was – this is WordPress, the most popular blogging software in the world. The functionality I need is either built-in or a plug-in is readily available. While I found that belief to be true, it was not nearly as easy as I had expected it to be. Instead of readily finding a quick and simple solution, I found a lot of confusing and non-working ideas and articles. I have put together what I consider a simple and straightforward solution which I will detail here. It requires two plugins and is a WYSIWYG implementation.

Fixing TinyMCE

The first thing you must do is to make some changes to the default TinyMCE configuration. This is the editor called Visual in your WordPress admin page. This is easily done with a very safe plugin called Visual Code Editor. This plugin basically facilitates writing code in the TinyMCE editor. Some of its more necessary features are:

  • Adds <pre> and <code> to block format menu
  • Allows extra attributes for compatibility in some syntax highlighters (ie, <pre lang="php" line='5'>)

Without this plugin, TinyMCE might strip out the html code you need to present your code blocks. This plugin is so simple, consisting of a few WordPress filters, that I just copied out the code itself and pasted it into my functions.php file. After pasting it, I changed the block format menu to suit my needs better. Here is what I ended up with:

// Modify Tiny_MCE init
add_filter('tiny_mce_before_init', 'smartenTinyMCE' );
function smartenTinyMCE($init) {
    // Add PRE and CODE to the block formats menu
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,h5,h6,p,blockquote,pre,code';

    // Allow extra attributes for some syntax highlighters, IE: <pre lang="php" line="5">...</pre)
    // Allow iFrames for live examples
    $init['extended_valid_elements'] = 'pre[*],code[*],iframe[*]';

    return $init;
}

In my version, I took out the <h1> since I never used it, and added the <blockquote> tag. If you make your own customizations, after saving your changes you will see your version in the Visual Editor’s Format menu after refreshing your Edit Post page.

Now if you want to add some html attributes to your <pre> or <code> tags, you can’t easily do that in the TinyMCE editor. This plugin code however, now permits you to switch to the HTML editor (the tab next to the Visual tab). Locate your <pre> and <code> tags there and add your attributes such as a CSS class or a language if you plan to use a Syntax Highlighter (more it that subject in a bit).

<Code> or <Pre>

The next problem I had was whether to use the <code> or <pre> tags. I naïvely assumed that the <code> tag was for code blocks. After banging my head against the wall several times whenever I tried to style code blocks with the <code> tag and getting very bad results from TinyMCE, I learned that the <pre> tag should be used for code blocks, and the <code> tag should be used for inline code. It is analogous to using <div> or <p> tags for a multi-line block of text and the <span> tag for text within a line. Once I started using <pre> for my multi-line blocks of code, everything was well with my WordPress world. I could edit my code in either editor and it stayed just as I wanted it.

Styling Your Code

The last step to displaying beautiful code blocks in your blog posts is styling them read here. Your CSS defaults will use a monospace font and the <pre> tag will ensure your spacing and line breaks are just as you wrote them. At this point you can either just write some custom CSS for displaying these blocks in a different foreground and background color, or you can make use of a Syntax Highlighter. Syntax Highlighters are a powerful code module that will color your code syntax depending on the language you are using – just like your code editor does. It will also optionally add line numbers to your code block as well.

There are several Syntax Highlighters available for WordPress. The one I settled on is called Better WordPress Syntax Highlighter. After installing its plugin, you must add a language attribute to your <pre> and <code> tags to specify the language you are using. This plugin supports 17 languages and you can even add your own. It doesn’t have C++ (amazingly), but does support CSharp which seems close enough for Arduino code. You can also specify other custom attributes to more precisely specify this plugin’s options.

Here’s an example:

<pre lang="csharp" extra="5">some code...</pre>

My syntax will be highlighted for the CSharp/C++ language, and the extra attribute will highlight line number 5. I did find that I needed to also add this section to my style.css file in order to get the highlighting to show:

/* class used by BWP syntax plugin for highlighted line */
.ln-xtra {
    background-color: lightgreen;
}

You’ll want to specify your own color scheme of course. If you are using the Firefox browser, you will want to make sure you are using the Firebug plugin to examine your CSS and customize it to suit your own needs.

Conclusion

That is all there is to it. If you follow my steps you will be adding code blocks to your WordPress posts in no time. Everything is easily customizable, even down to your own language syntax coloring. You can also choose a different syntax highlighter if you wish. Just search for the term Syntax in the WordPress plugins page and find one that suits you better.

Please add your own discoveries and observations in the comments below.

How to Insert Code into Your WordPress Blog by Provide Your Own is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

This entry was posted in Tech and tagged , . Section: . Bookmark the permalink. Both comments and trackbacks are currently closed.

35 Comments

  1. Posted April 3, 2018 at 1:07 pm | Permalink
  2. Posted April 6, 2018 at 2:22 pm | Permalink

    Ice cream sure sounds good right about now.

  3. Posted April 7, 2018 at 2:43 pm | Permalink

    Keep up the amazing work!

  4. Posted April 8, 2018 at 10:06 am | Permalink

    I ate rice for lunch.

  5. Posted April 8, 2018 at 3:19 pm | Permalink

    I’m not a big fan of sauce.

  6. Romeztpseup
    Posted April 9, 2018 at 4:23 pm | Permalink

    viagra 20mg dosage find all posts by
    http://xlviagragtr.com – viagra pills for sale online
    viagra and alcohol interaction username
    viagra for sale
    – www .viagra
    viagra e cardura

  7. Miltozsob
    Posted April 10, 2018 at 3:26 am | Permalink

    viagra generic reviews mark forums read
    http://glviagragtr.com – viagra for sale cheap
    viagra and alcohol mix register
    viagra sale
    – viagra more:drug_side_effects
    should i take one or two viagra tablets

  8. Posted April 10, 2018 at 7:56 am | Permalink

    You sure know how to make a squirrel smile.

  9. Posted April 10, 2018 at 11:18 am | Permalink

    canadian pharmacy
    cheap cialis online europe http://cialisy.com

  10. Posted April 12, 2018 at 4:05 am | Permalink

    Eat much rice?

  11. Posted April 12, 2018 at 9:25 am | Permalink

    Hello, this weekend is good for me, for the reason that this point in time i
    am reading this impressive educational paragraph here at my residence.

  12. Posted April 13, 2018 at 5:26 am | Permalink

    Got milk?

  13. Posted April 13, 2018 at 2:57 pm | Permalink

    Way to go Edward. This blog is amazing!

  14. Posted April 13, 2018 at 7:36 pm | Permalink

    Your style is very unique compared to other people I
    have read stuff from. Many thanks for posting when you’ve got the opportunity, Guess I will just bookmark this web site.

  15. Posted April 13, 2018 at 7:42 pm | Permalink

    No one can ever say this site is boring!

  16. Posted April 14, 2018 at 3:25 pm | Permalink

    Would you like some popcorn?

  17. Posted April 15, 2018 at 12:52 am | Permalink

    These two are some real messy eaters!

  18. Posted April 16, 2018 at 12:53 am | Permalink
  19. Posted April 16, 2018 at 7:54 am | Permalink

    Howdy! This article could not be written much better!
    Looking through this article reminds me of my previous roommate!
    He always kept preaching about this. I’ll send this article to him.
    Fairly certain he’s going to have a good read. I appreciate you for sharing!

    My web site: Billige Golden Goose Starter

  20. Posted April 16, 2018 at 4:12 pm | Permalink

    erectile rehabilitation therapy
    best erectile dysfunction medication
    erectile tissue function
    best erectile dysfunction pills

  21. Posted April 16, 2018 at 5:08 pm | Permalink

    erectile supplement gnc
    erectile pills over the counter
    erectile problems
    new drugs for ed

  22. Posted April 16, 2018 at 10:53 pm | Permalink

    Howdy! Would you mind if I share your blog with my facebook group?
    There’s a lot of folks that I think would really appreciate your
    content. Please let me know. Thank you

    Here is my page :: Golden Goose Tenisice Flag Ltd Muške

  23. Posted April 17, 2018 at 1:15 am | Permalink

    erectile stimulant
    erectile prescription pills
    are erectile dysfunction pills covered by aca

  24. Posted April 17, 2018 at 5:20 am | Permalink
  25. Posted April 17, 2018 at 9:48 pm | Permalink

    what erectile dysfunction herbs effect her es
    best erectile pills
    erectile vacuum
    erectile enhancement pills

  26. Posted April 18, 2018 at 12:22 am | Permalink

    erection pills

  27. Posted April 18, 2018 at 3:49 am | Permalink

    One thing I’d prefer to say is the fact before purchasing more computer system memory, look into the machine in which it could be installed. Should the machine is actually running Windows XP, for instance, the actual memory limit is 3.25GB. Using in excess of this would just constitute some sort of waste. Make sure that one’s motherboard can handle an upgrade amount, as well. Interesting blog post.

  28. Posted April 18, 2018 at 4:58 am | Permalink

    erectile disorder psychology
    cheapest ed drugs
    erectile booster method reviews
    ed drugs list

  29. Posted April 18, 2018 at 2:49 pm | Permalink

    Hello, yes this piece of writing is genuinely good and I have learned lot of things from
    it about blogging. thanks.

    Here is my site; Golden Goose Running Mens

  30. Posted April 18, 2018 at 7:28 pm | Permalink

    You said it nicely..

  31. Posted April 19, 2018 at 1:18 am | Permalink

    erectile icd 10
    when does erectile dysfunction start
    erectile enhancement products

  32. Posted April 19, 2018 at 4:40 pm | Permalink

    VPN for telegram

  33. Posted April 19, 2018 at 6:57 pm | Permalink

    erectile vacuum systems
    http://toperectiledysfunctionpills.com/ – ed drugs list
    erectile d with matt lauer
    best drugs for ed

  34. Posted April 19, 2018 at 11:47 pm | Permalink

    cialis couponfree cialiscialis dosagecialis usa
    buy cialis
    Buy Cheap Cialis usacialis without a doctor’s prescription
    http://jvrimages.com/#viagra+or+cialis

  35. Posted April 20, 2018 at 4:07 am | Permalink

    erectile aliments