Home

jTab Guitar Tab Shortcode displays guitar chords and tab on your WordPress blog using clean SVG vector graphics, based on simple text notation entered into a shortcode. This plugin is based on the excellent open-source jTab JavaScript library by Paul Gallagher.

jTab Shortcode lets you do two things easily: 1) Display chords and tab graphics by entering text in jTab notation into your blog post, and 2) Enter & render jTab Notation in Real-Time using a form.

More show, less tell!

1. Render Chords and Tab in jTab Notation

Ex: Just chords

[jtab phrase="C / Am / F / G G7"]

C / Am / F / G G7

Ex: Tab and chords

[jtab phrase="Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 |"]

Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9 5/7 |

Ex: Just tab notation

[jtab phrase="$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9"]

$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9

2. Render jTab Notation in Real-Time

[jtab showform='true' phrase='C Am F G' buttontext='jTab me, baby!']

C Am F G

jTab Notation

The jTab Shortcode uses the notation defined by the jTab JavaScript library by Paul Gallagher. Paul’s documentation is reproduced below.

Chords

Chord notation for the jTab library is quite conventional and easy to remember, e.g. C Gm F#7 Db.

  • The root note (A..G) must be uppercase
  • Seperate every item with spaces
  • # indicates sharp
  • b (lowercase B) indicates flat
  • m (lowercase) indicates minor
  • maj (lowercase) indicates major
  • sus (lowercase) indicates suspended
  • dim (lowercase) indicates diminished
  • aug (lowercase) indicates augmented
  • add (lowercase) indicates extensions
  • Variations on the root chord: m, 6, m6, 69, 7, m7, maj7, 7b5, 7#5, m7b5, 7b9, 9, m9, maj9, add9, 13, sus2, sus4, dim, dim7, aug
  • / indicates repeat of the previous chord
  • | is a standard bar line
  • || is an ending bar line

jTab also supports CAGED major chord notation. This is a convenient method for indicating major chords at various positions on the fretboard.

Tab Notation

Representing tab notation is a little special to jTab, but aims to be as simple as possible.

Basic entry of notes on a single string is done by setting the string and then following with the notation (separated by spaces).

  • Indicating the string is done with the dollar sign (“$”) followed by the string number (1-6, high to low). e.g. $2 is the B string in standard tuning
  • Alternatively, you can use the string tuning instead of string number, EADGBe low to high in standard tuning. e.g. $B is the 2nd string in standard tuning.
  • Then you can in fact follow with anything you like – fret position, slides ( / \ ) hammerons (h), pulloffs (p), etc. Just avoid uppercase characters to avoid confusion with chords.
  • Examples:
    • $2 0 1 3 (a simple three note sequence on the B string)
    • $2 0 1 3 $1 0 1 3/5 (a sequence of notes starting on the B string, continuing on the high E string, finishing with a slide to A)
    • $B 0 1 3 $e 0 1 3/5 (same, but using string notes instead of numbers)

What about more than one note at the same time? To handle multiple notes played on different strings, join all the individual string notation together with periods (“.”)

Examples:

  • $3.6.$2.5h7 $1 5 $2 7 (start with two notes on G and B strings followed by a hammeron and two individual notes)
  • $4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 (three notes across D,G,B strings with a slide up two steps and a twist)

Tab for a whole or partial chord can be easier to enter as a full six-string block. A shorthand is possible if you want to enter notes across all 6 strings:

  • Below the 10th fret, just concatenate the six string fret positions (from low string to high) e.g. 022100 is E chord at the nut.
  • Periods are required to separate each string e.g. 8.10.10.9.8.8 is C chord at the 8th fret (which can also be written as C:4 in CAGED notation)
  • substitute an X or x for mute strings e.g. X02220 is an A chord

Mixing Chord & Tab Notation

You can mix chord and tab notation without restriction in the one phrase. This will result in a tab line being drawn, with chord charts above where relevant.

Parameters & Implementation Details

Below are the parameters you can pass to the jTab shortcode. All parameters are optional.

  • phrase – The phrase to render, given in jTab notation.
  • class – A class to assign to the jTab div. Each jTab phrase is wrapped in a separate div of class “jtab”. Specifying class will add your custom class name to the div.
  • id – An ID to assign to the jTab div. Default is nothing. When showform is true, id is ignored.
  • showform – Set to “true” to display the input field and button to allow live rendering of jTab notation. Default is “false”. If you also provide phrase, the form will start pre-populated with that phrase. showform can be used only once on a page.
    • Ex: [jtab showform='true' phrase='C Am F G' buttontext='jTab me, baby!']
  • buttontext – The text to show on the submit button when showform is true. Default is “jTab this!”

Formatting

jTab will render using the color and background-color styles of the enclosing HTML element.

jTab currently only renders in a single size. Having the ability to control the size of the rendered tab is something the jTab JavaScript library may include in a future update. Poke me if you see that the jTab library has been updated but I haven’t incorporated the newest into the shortcode plugin.

 

Recent Posts