Home Blog Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs)

Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs)


In a sense, musical composition can be thought of as code… making some of our earliest composers pioneer coders. Sheet music, or any musical notation, is a readable bunch of code-esque instructions and commands that is interpreted by a biological machine that produces an output. Certainly, digital music has almost mandated that some musicians have an understanding of code so that they can manipulate their online music, or have it shared or represented online in different ways. In working with our own music (and we write a lot) we’ve struggled with different ways of sharing it online. This is the first of a long series that’ll deal with different ways of rendering musical notation… or having it rendered into MIDI files or converted into other formats.


There are a number of excellent libraries available for rendering musical notation, and Paul Rosen’s abcjs is the first that we’ll look at. Initially I initially wanted to use his own WP plugin for a project but I found it more suited to those that were familiar with his library rather than the average muso or music teacher (the latter group using ABC notation extensively)… not to mention that Paul’s shortcode loads the extensive JavaScript library on every page by default which is a behaviour I wanted to avoid. Our own code is a complete replacement for Pauls. While we’ve provided shortcode, it might be best to install our plugin (download below) because the functionality will invariably be improved upon.

We’ve found that abcjs isn’t ideal for larger and more complex musical scores, and it vacates the standard ABC Notation at times meaning that some files aren’t compatible. While we’ve generally decided against using abcjs ourselves, it is worth looking at, and over time it’ll likely be developed into the most definitive product for web based renderings.

What is ABC Notation?

ABC notation is a system designed to notate music in plain text format, and it’s widely recognised as the most popular notation format on the Internet. What might differentiate ABC from some of the available notations (and packages) is that ABC can be read and played directly from the transcribed text. It’s easy to write, easy to edit (in text files), and it’s easy to read.

There’s thousands of resources available that make pre-formatted music available for download, and there’s a large number of traditional and online packages available that will convert the code into other formats or integrate it with musical hardware.

The Result

The shortcode of:

T:The A team
f2 cf4-f|Bc2F3 zA/2c/2|fc gf4-f|e3/2d/2 c/2B3/2 c4|
f3/2f/2 cf4-f|AB3/2zcF3-F/2|=A3/2B/2 =de4-e-|e8|
e^d zB e2 d2|^A3/2B/2 cf4-f|cB/2z3/2F c2 B2|BA F=F ^F4|
DD CD zC zD|zC zC G2 F2|DD CD zC zB,|zB, zB, C4|
DD CD zC zD|zC zC G2 F2|DD CD zC z3/2B,/2-|B,/2zB,3/2B, A,4|
E=D/2z3/2B, Ez E2-|E4 [/abcjs]

… will return the following:

We can alter the size of the notes with an attributes as follows:

[abcjs staffwidth="580" scale="2.0"]X:1
M: 4/4
L: 1/8
K: Emin
|:D2|EB{c}BA B2 EB|[/abcjs]

The result:

Because including ABC Notation into WordPress can be problematic – not to mention the potential for the visual editor to screw things up – we can use the attribute of notation to specify the filename of the .abc file. This might be a more efficient way of providing source ABC for a couple of reasons; it means we can share the .abc file with others via a direct link, and we can more easily create a working MIDI file from the data (more on our ‘ABC to MIDI API’ another time). The shortcode of [abcjs staffwidth="580" scale="0.8" notation="twinkle-twinkle-little-star.abc"][/abcjs] will return the notation below (note we’ve included the closing shortcode tags despite no content; this is because WP doesn’t like mixing of opening and closing tags on the same page). To use this you must define a default directory where abc files are stored.

You may also define an external abc file as an attribute. The external abc will first be copied to your local WordPress installation before rendering in your posts. Subsequent engravings will be made using the locally stored copy; this is done to ensure that the music will be available after the source potentially removes it. You will need to consider any copyright that might apply. The following notation for Baa Baa Black Sheep, sourced from abcnotation.com , is rendered using the shortcode of [abcjs notation="http://abcnotation.com/getResource/downloads/text_/air-de-lopera-francoise-hsjj054.abc?a=www.atrilcoral.com/Partituras_ABC/a.zip/a/0299"][/abcjs].

Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs)

External .abc file stored as a hash of the source URL

There’s no security here so you’ll have to be certain that you don’t import potentially nasty stuff. If it’s just you that’ll be using it, it should be fine.

Additional Examples

The difficulty with ABC Notation will have everything to do with learning the specifics of the notation, and because it’s so extensive, it’s well beyond the scope of this article. While there’s a number of excellent websites with examples and tutorials, we’ve provided just a few examples below.

Mary Had a Little Lamb is always a good start for anything musical when learning. For the rendered result the following notation applies.

[abcjs]X: 507
T:Mary Had A Little Lamb

An example of Grace Notes:

T:Grace notes
{g}A3 A{g}AA|{gAGAG}A3 {g}A{d}A{e}A|][/abcjs]

The Result:

An example of chords. In this case we’ve referenced a local file: [abcjs notation="chords.abc"][/abcjs]

An example using Treble and Bass Clef. “Mazurka” by Chopin. Op33. No.1. Shortcode of [abcjs notation="mazurka.abc"][/abcjs] returns:

Shortcode Attributes

Paul’s official documentation on Github page should be referenced for information on the parameters we provide.


If the number passed is between zero and one, then the music is printed smaller, if above one, then it is printed bigger. Defaults to 1.


The width of the music, in pixels. Set in your shortcode to the default width of your post container. Defaults to 580.


The spacing that the music should have on the webpage. Defaults to 15,


The spacing that the music should have on the webpage. Defaults to 30.


The spacing that the music should have on the webpage. Defaults to 50.


The spacing that the music should have on the webpage. Defaults to 15.


If true, then when a note is clicked, it is highlighted and a callback allows the editor to move the cursor. Defaults to false.


Pay attention to margins and other formatting commands that don’t make sense in a web page. Defaults to false.


Only parse the ABC header. Defaults to false.


Only parse until the first warning is encountered. Defaults to false.

The Shortcode Function

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.


  • For complex compositions, abcjs isn’t quite as accurate as some of the other packages; in fact, in some cases, it doesn’t render notation at all. However, it is in a constant state of development and is one of the easiest to use.
  • The shortcode we’ve provided above is quite basic and will likely be developed. For that reason, consider our plugin option and follow us on Facebook for updates.
  • Before you can use the shortcode you must first download the latest JavaScript library from Github and change the location of the script in the code. You should reference just the abcjs_plugin_latest-min.js file (included in the download below). This isn’t necessary with our plugin.
  • If you choose to include your ABC notation files in a directory you must also alter the path in the code (as a shortcode attributes) to your storage directory. This isn’t necessary with our plugin.


Title: Embed ABC Musical Notation in WordPress
Description: Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs).
Download: Shortcode (V0.2) | WP Plugin (V0.2) | Plugin Page

■ ■ ■

Interested in WordPress and Web Design? Subscribe to our list and we'll send you subscriber-only tools and plugins

Short URL for this post: http://shor.tt/Jna


  1. Hi, I just stumbled on this post, and wanted to say thanks for the thoughtfulness of the critique.

    I’m about to update the plugin and was interested in using some of the ideas you implemented. In particular, I’ll add the ability to link to an external file and a conditional loading of the JS so it isn’t loaded on a page that doesn’t contain an abcjs shortcode.

    I’d like to give you credit for these ideas. Please contact me so I can figure out how to best do that.

    Also, you say, “We’ve found that abcjs isn’t ideal for larger and more complex musical scores, and it vacates the standard ABC Notation at times meaning that some files aren’t compatible.” If you have some examples of ABC strings that aren’t rendering properly, please post them as an issue in github and I’ll look at them. https://github.com/paulrosen/abcjs/issues

    And I also want to mention that the newer versions of the plugin also support a MIDI control.


Please enter your comment!
Please enter your name here