theguitarlesson

The Guitar Chords widget was originally created for <a href="https://www.theguitarlesson.com" rel="nofollow ugc">TheGuitarLesson.com</a>, and we decided to release it to the public as well, since it will be useful for other guitar related site owners.
The widget is a great addition to all guitar learning websites, since it has the ability to display 1,438 guitar chords in an instant, based on 3 parameters set by the website visitor. The parameters are:
<ul>
<li>Key of the chord</li>
<li>Type of chord (major, minor, sus4, etc., altogether 34 types)</li>
<li>Voicing (6 voicings supported, which is more than enough for players of all levels)</li>
</ul>
The widget generates not just the chord diagram and fingering chart, but includes the notes of the chord as well, which is useful for those learning music and guitar theory.
Here is a <a href="https://www.theguitarlesson.com/guitar-chords-widget-for-wordpress/" rel="nofollow ugc">demo of the guitar chord widget</a> if you want to see it in action before installing it, look in the sidebar.

Guitar Chords Widget for WordPress

Interactive guitar chord generator, with 1,438 chord diagrams.

George Lewe

rlisle

Lewe ChordPress pretty-prints ChordPro formatted text files on your pages and posts. You can configure output and formatting options. With ‘interactive’ mode on, you can transpose the chords up and down and also print the output right from the page.
Lewe ChordPress supports <a href="https://github.com/omnibrain/svguitar" title="SVGuitar chord renderer" rel="nofollow ugc">SVGuitar</a> for visual chord representation.
Your input to Lewe ChordPress needs to be a valid ChordPro formatted text. ChordPro is a simple text-based syntax used to write lead sheets, the lyrics and chords of a song. ChordPro also comes with a command line tool that pretty prints that text into other formats like PDF. 
You can read all about ChordPro here: 
<a href="https://www.chordpro.org/chordpro/ChordPro-File-Format-Specification.html" title="ChordPro file format specification" rel="nofollow ugc">ChordPro</a>
The Lewe ChordPress plugin allows to put ChordPro text inside its shortcode tags on a page or post and will pretty print it when the web page is displayed.
Simply insert a ChordPro text inbetween the [chordpress] and [/chordpress] tags and it will be rendered based on the default options of the plugin. You can change output and formatting settings on the plugin’s admin page.
A TinyMCE editor integration is also included, providing an editor menu button to insert the shortcode for you with its default paramaters, e.g. wrapping it around selected text.
The <code>[chordpress]</code> shortag allows specifying custom options for rendering ChordPro texts. For example:
<ol>
<li><code>[chordpress transpose="1"]</code> will transpose the chords rendered by one semitone.</li>
<li><code>[chordpress interactive="yes"]</code> will allow you to transpose the chords up and down and also print the output right from the rendered page.</li>
</ol>
Check out this example: 
<a href="https://sayandsound.lewe.com/heart-of-gold/" title="Lewe ChordPress Demo" rel="nofollow ugc">Lewe ChordPress Demo</a>
The <code>[chordpress-chord]</code> shortag allows you to display a guitar chord as a diagram. For example:
<ol>
<li><code>[chordpress-chord chord="112"]</code> will show the guitar chord post with ID 112 as a diagram.</li>
<li><code>[chordpress-chord barre="5,1,1" fingers="(3,2,'2'),(4,3,'4'),(5,3,'3')" title="F# Major" tuning="E,A,D,G,H,E"]</code> will show a custom guitar chord.</li>
</ol>
Check out this example: 
<a href="https://sayandsound.lewe.com/guitar-chords/" title="Lewe ChordPress Guitar Chord Demo" rel="nofollow ugc">Lewe ChordPress Guitar Chord Demo</a>
If not from the WordPress marketplace, get the plugin here: 
<a href="https://www.lewe.com/chordpress/" title="Lewe ChordPress Homepage" rel="nofollow ugc">Lewe ChordPress Homepage</a>
<h3>Features</h3>
<ul>
<li>renders the lyrics/chord format of ChordPro</li>
<li>configure output and formatting</li>
<li>transpose up and down on the fly from the rendered page</li>
<li>print the rendered output</li>
<li>show chord diagrams</li>
</ul>
Lewe ChordPress supports the following ChordPro tags:
<ul>
<li><code>{album}</code></li>
<li><code>{artist}</code></li>
<li><code>{composer}</code></li>
<li><code>{subtitle}</code></li>
<li><code>{title}</code></li>
<li><code>{year}</code></li>
<li><code>{meta}</code> for all of the above</li>
</ul>
Lewe ChordPress supports custom CSS for the following ChordPro tags:
<ul>
<li><code>{comment}</code></li>
<li><code>{start_of_chorus}</code>, <code>{end_of_chorus}</code></li>
<li><code>{start_of_verse}</code>, <code>{end_of_verse}</code></li>
</ul>
Lewe ChordPress supports note/chord translations
<ul>
<li>Chord transponation</li>
<li><a href="https://sayandsound.lewe.com/note-h/" rel="nofollow ugc">H/B Notation</a></li>
</ul>
<h3>Usage</h3>
<ol>
<li>Enter a <code>[chordpress]</code> shortcode in your page or post editor</li>
<li>Paste your ChordPro text right after it</li>
<li>Enter the closing <code>[/chordpress]</code> shortcode</li>
</ol>
Optional shortcode parameters
<ul>
<li><code>float=</code> Forces the rendered text block to float left or right.</li>
<li><code>hbnotation=</code> <a href="https://sayandsound.lewe.com/note-h/" rel="nofollow ugc">Input is H/B notation</a> (using H for B and Bb for B). Wether it is displayed as such is defined on the Options page.</li>
<li><code>interactive=</code> Enables interactive mode. A listbox will be shown on the right of the title that allows you to transpose the chords on the fly. Also, a print button will be shown fopr printing out the rendered ChordPro text.</li>
<li><code>transpose=</code> Enter a positive or negative number for the amount of semitones to transpose the chords</li>
</ul>
Use the “Lewe ChordPress” admin menu of your backend to change the default settings.
<h3>Documentation</h3>
<a href="https://lewe.gitbook.io/lewe-chordpress/" title="Lewe ChordPress User Manual" rel="nofollow ugc">Lewe ChordPress User Manual</a>
<h3>Support</h3>
Choose your preferred support channel: 
1. <a href="https://wordpress.org/support/plugin/chordpress/" title="Wordpress Support Forum" rel="ugc">WordPress Support Forum</a> 
2. <a href="https://georgelewe.atlassian.net/servicedesk/customer/portal/5" title="Lewe Service Desk" rel="nofollow ugc">Lewe Service Desk</a> 
4. <a href="https://lewe.gitbook.io/lewe-chordpress/" title="Lewe ChordPress User Manual" rel="nofollow ugc">Lewe ChordPress User Manual</a>
<h3>Credits</h3>
<ul>
<li>The <a href="https://profiles.wordpress.org/rlisle/" title="ChordPro" rel="nofollow ugc">ChordPro</a> team of course</li>
<li><a href="https://profiles.wordpress.org/rlisle/" title="@rlisle" rel="nofollow ugc">@rlisle</a> for his work on the ChordsAndLyrics plugin that he created in 2009</li>
<li>Ahkâm for the beautiful <a href="https://www.freeiconspng.com/img/17579" title="Lewe ChordPress Plugin Icon" rel="nofollow ugc">Lewe ChordPress Plugin Icon</a></li>
<li>The developers of the <a href="https://github.com/omnibrain/svguitar" title="SVGuitar" rel="nofollow ugc">SVGuitar</a> chord rendering module</li>
</ul>

Lewe ChordPress – ChordPro Text Formatter

Lewe ChordPress for WordPress pretty-prints ChordPro formatted text and chord diagrams on your pages or posts.

Guitar Chords Widget for WordPress vs Lewe ChordPress – ChordPro Text Formatter