Today I wanted to publish some music-related posts in another WordPress-based website: since those posts were meant to contain guitar chords, I was looking for a way to put these chords between the lyrics in a good-looking and readable way. For this reason I started looking for some plugins that could achieve such goal for me, without having to code something myself.
Long story short, I was lucky enough to find a great plugin that almost did what I was looking for: its name is WP Chords and it allows you to format and display the chords on your blog: you can set font sizes, enable transposing chords especially in your posts. It's also compatible with Google AMP (Accelerated Mobile Pages), which makes it fully usabled even with non-desktop devices such as tablets, mobile phones, as well as most of web browsers: on top of that it's also open source, being released by its author Emre Polat under GPL v2 license.
The issue
All good, then? Sadly, no. Once I've successfully installed the plugin and published my posts, I've noticed that one of the plugin's most useful features - the "chord transpose" function - isn't working very well, as explained in this post as well as other topics on the plugin's official WP support forum.
In a nutshell, the issue relies in how the plugin handles semi-tones: when you increase or decrease a semitone, flats and sharps don't overlap correctly: for example, Bb gets transposed into A# instead of A, thus making the whole transpose operation incorrect. This eventually brought me to fork the original code and release a modified version of the plugin, which I've then installed to my WordPress blog to permanently solve the issue and provide myself with a 100% working transpose feature.
The fix
In order to The transpose feature has been implemented on the client-side using Vue.js: however, since the original plugin doesn't have a public GitHub repository, I had no chance to properly fix the issue from within Vue.js: for this very reason I've just "hacked" the resulting JavaScript bundle, unobfuscating it using this JS de-obfuscator tool: once done, I was able to replace the 17-length chord list with a 12-length chord list, suppressing the flat chords and only leaving the sharp ones. Such modification fixed the transpose logic, yet also made the flat notation unusable. In order to put it back, I've added an alt property to each chord, so that I could decorate each sharp chord with its corresponding flat counterpart (Bb for A#, Gb for F#, and so on): this actually did the trick.
The only major difference with the original plugin is that the "flat" notation (b) is automatically converted to its "sharp" counterpart (#), which in my opinion is a nice addition since it kind of "normalizes" the resulting chords chart.
Credits
All credits go to Emre Polat, the author of the former WP Chords plugin: I've just fixed the transpose feature waiting for him to further improve his wonderful work. As soon as he'll release a fixed version of his WP Chords plugin with the transpose issue fixed, there will no need to use/install this fork; If the author doesn't want to do that, I'll be more than happy to improve the plugin's source code myself - as long as it will be released to GitHub!
Useful Links
- WP Chords Fork GitHub page
- WP Chords Fork WordPress Plugin Page
- WP Chords WordPress Plugin Page
- Emre Polat's personal website
