We are building a new site for a musician and one of the features is a songbook where we are posting his songs for people to discover and play. As a so-so guitar player I often grab songs from sites like chordie and I wanted to give visitors a similar experience so after a bit of searching and experimenting I’ve found a combination of plugins and a jquery powered chord library that give me the effect I was after. I thought I would share what I’ve learned.
The first part is a songbook. One could do this by hand but wp-songbook does a nice job. It creates a custom post type and adds meta data and the ability to add videos and files, and tag it with album, genre, language, date, and author info into a sortable list. In this case we are uploading songsheets as .pdfs to go with the songs. It has some very nice options for what to display on the list and individual page. I’m not crazy about some of the plugin authors design choices but they can be overwritten in the plugin’s css.
The plugin creates a song page item. On this page I want to display the chords played above the lyrics and the chords themselves. To create this result I’m using a javascript library I found that draws chords and tablature, and a plugin that creates a shortcode for placing the chord names above the lyrics.
The chords above the song song lyrics are enabled by a plugin called chords and lyrics. It generates a shortcode that puts the chords of a song along the lyrics. The plugin hasn’t been updated in quite a while but I thought it was pretty simple and it works on 4.6.
The chords are being pulled in using jtab a javascript library that uses jquery.js and raphael.js to draw chords and full tab using css and svg graphics. I’m just using it to show the basic chords in the song but the library can be used to draw full tablature. One of the tricks to getting this working is to know that WordPress loads jquery by default and calling it again can break things so leave it out. We are building this site using the Genesis framework and have the script to the header of the pages by using the Genesis Custom Headers plugin which enables a lot of customization on a page by page basis, plugging it into the headers area of the Genesis theme settings works well too. Another way to do it would be to enqueue the libraries.
The song posts look like this in text view:
<div class=”jtab”>A E D Bm</div>
[chordsandlyrics]
my [a] daddy is an engineer
my [e] brother drives a hack,
my [d] sister takes in washin’
an’ the [bm] baby balls the jack,
an’ it [a] looks like
i’m [e] never gonna cease my [d] wander[a]in’.
[/chordsandlyrics]
For the library code in the header which is documented on the jtab.tardate site we;ve made the following change.
NOT USING THIS LINE –