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 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 song posts look like this in text view:
<div class=”jtab”>A E D Bm</div>
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’.
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 –