# Guitar Chords

## SVGuitar

[SVGuitar](https://github.com/omnibrain/svguitar) is an awesome Javascript guitar chord rendering module that replaces the Vexchord and jTab modules that ChordPress used before version 3.0.0. Constant problems with the latter two and that their developers seem to have abandoned them made me look for a suitable replacement. I found it in SVGuitar. It’s quality and features are far superior and I thank the developers for providing it to the community for free.

{% hint style="info" %}
**Upgrade Notice for 2.x Users**

I am sorry for the inconvenience of having to update your chord posts and shortcodes with the new release 3.0.0. But rather than fighting with the outdated and abandoned Vexchjord and jTab modules I decided to introduce the new, better and actively maintained guitar chord module “SVGuitar”. I am sure you will like it too.

Here are the steps you need to consider when upgrading to 3.0.0:

* If you have created guitar chord posts with ChordPress 2.1 – 2.5, those posts will still be available. However, you have to edit them in order to change the parameters to be SVGuitar chord compatible.
* If you have used the `[chordpress-chord]` shortcode with other than the chord= parameter, you need to edit and adjust them to the new parameters.
* If you have used the `[chordpress-jtab]` shortcode, those will not work anymore.
{% endhint %}

## Chord Post Type

After you installed the ChordPress plugin, a new post type called “Guitar Chord” is available.

<figure><img src="https://92184946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUerleWhYjFhyq0lPCj1A%2Fuploads%2FLBGIa7sqYOHttZawEKbJ%2Fguitar-chord-post-type.jpg?alt=media&#x26;token=6fea1022-e58c-4ab4-9acd-34f79d5d345e" alt=""><figcaption></figcaption></figure>

After creating a Guitar Chord post you can display the chord as a diagram anywhere on your pages or posts by using the `[chordpress-chord]` shortcut.

## Adding a Guitar Chord Post

A Guitar Chord post needs the necessary information to display it as a diagram. When adding a new post you will be presented the screen to enter these information.

<figure><img src="https://92184946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUerleWhYjFhyq0lPCj1A%2Fuploads%2Fn9tRgcQOOwCgRaTBUO2B%2Fnew-chord.jpg?alt=media&#x26;token=bf62b0a4-5948-4a39-af7c-ee27b6d7efd1" alt=""><figcaption></figcaption></figure>

The help text of each field tells you what information you need to enter.

At the bottom you will see a sample diagram of your chord and below that the shortcode to use on your pages or posts to display it there.

Here is an example of how a C-Major chord could be configured.

<figure><img src="https://92184946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUerleWhYjFhyq0lPCj1A%2Fuploads%2FEN2w0dTp2mlsj4tndlWA%2Fc-major.jpg?alt=media&#x26;token=2f5dcbc7-f1ce-4cb2-9a82-bed8ead3adbc" alt=""><figcaption></figcaption></figure>

A good source for finding guitar chords and their details is the [All Guitar Chords](https://www.all-guitar-chords.com/) page.

## Adding predefined chords

In version 3.3.0, 84 common guitar chords have been added to the plugin. However, you need to add them as Guitar Chord posts from the options page "Add Chords" tab.

## Inserting a Guitar Chord in your page

Simply copy the shortcode shown to you in the Guitar Chord post and paste it into your page editor.

<figure><img src="https://92184946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUerleWhYjFhyq0lPCj1A%2Fuploads%2FiZkwstoApGAc67nj195Q%2Finserting-chord.jpg?alt=media&#x26;token=083b540d-d514-4c08-a887-350451b70a39" alt=""><figcaption></figcaption></figure>

## The Chord Sheet Feature

The “Show Chord Sheet” feature is an option you can enable for a rendered ChordPro text.

If it is enabled, the ChordPress plugin will scan through all chords used in a song (by their shortnames you have used) and try to find a corresponding Guitar Chord post based on its shortname. All chords found will be displayed in a chord sheet underneath the rendered ChordPro text. Make sure you have created a Guitar Chord post for each chord of a song that you want to display in the chord sheet.

## Chord Sheet Example

<figure><img src="https://92184946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUerleWhYjFhyq0lPCj1A%2Fuploads%2F4aqHrJp55jrBhx0WwUTm%2Fchord-sheet.jpg?alt=media&#x26;token=2fb7279e-4786-45d8-925e-d222a4b92431" alt=""><figcaption></figcaption></figure>
