A. Basic Lyrics Editing

If you are familiar with WordPress, you will find out that this theme is using completely standard administration interface. Just make sure that one post is only one song and you can start adding or updating your lyrics database. Post title is a song title, post text is song lyrics; also, pick a category (categories) for your song, add keywords, and that’s it. The only new field in administration panel is Subtitle which you can use for adding some interesting song information.

If you’re brand new to WordPress, take a few minutes to familiarize yourself with admin panel layout. Notice that you can navigate to various administration panels by choosing the menu items in the left side main navigation panel. For simple adding or editing songs in your database you will need just the first menu block – Posts which has sub items Posts, Add New, Categories and Post Tags. You will use Posts menu for updating existing song (post) in your database, Add New to add a new song, Categories and Post Tags to define categories and keywords for your song. You should make up the way you are going to categorize songs in the database, so you can prepare some categories before entering song lyrics. Later you can make changes of your category list either from the menu Categories, or you can do it on the fly when you add/edit song lyrics in Post Edit panel. The same rule should be applied for building Tags list, you can edit them from Post Tags panel, or when you add/edit song lyrics in Post Edit panel. Here is the scheme that will help you understand Post Edit panel and song parts:

Note that you have The Edit button link at the bottom of your song. This button is visible only when you are already logged in the administration panel, and for that session it will be visible for all your songs!

B. Advanced Lyrics Editing

1. Emphasizing Text

If you like to emphasize a part of lyrics text, like song chorus, simply select those lines in text editor and apply block-quote style formatting.

2. Insert chords with lyrics

If you’d like to have chords together with lyrics for some song, you should first prepare your file in some text editor, and make the proper position of chord signs related to the lyrics lines below. For this editing use Arial font because this font is used on your site for lyrics text, and this way you will keep the proper positioning of chords and lyrics text. OK, now open your post edit panel, switch this time to Visual mode in this editor, copy/paste the text with chords that you’ve just prepared. Now, to keep chords positioned, you need to apply Preformatted format to the chord lines. First click the last button in format buttons line to show the additional format buttons in the second line (if they are not visible), then select the chord line in the text and apply Preformatted format. You should repeat this formatting for all chord lines. See the results in this example on demo site.

3. Direct Link

If you want to create direct link from one song text to another song (or any other location), just insert link text, select it and insert link to desired location (use Permalink for that page). Finally, you can apply code style to this text that will add a little link icon in front of the text. This feature is useful for making a short list of songs that you always sing together or a few songs that make a medley, or any time you like to make direct link from one song to another. Check this example on my demo site.

4. Insert Image

You can insert images in your lyrics post using standard wordpress procedure: upload the image you want to your Media Library, then use Add an Image button in post editor to insert the image to a desired location. You can set left, right or central image alignment. Central aligned images should not be wider than 550px, for this is the main content block width. You can use the image as a link object that connect all songs that share same tag, category or some group, like in this example.

5. Insert Large Image

You might find useful to have some scanned images of sheet music, chords or tablature for your song. Such images will probably be wider then your main content block of 550px, so you should make sure you’ve activated Fancybox plugin, insert some text link at the beginning/end of song lyrics, upload your image in Media Library and set it as link location. It will automatically be displayed with Fancybox. To make those links you can also use link buttons I provided you in the Upload folder of the material for this theme. Check the demo of this feature in this example.

6. Backing Tracks

You can also link song lyrics with some karaoke – backing track in mp3 or some other music file format. Upload your backing track file in Media Library, and make text link or use link button from Upload folder of material for this theme. This feature will work properly out of the box only if you are using the local installation of this theme. You also have to set your browser to automatically open music files with your default music player (WINAMP, AIMP…) and not to show any warning or download dialogs. These settings can easily be done in Mozilla Firefox and Opera, so I recommend you these browsers if you’d like to use this feature often. Check the demo in this example.

C. Using Widgets

We started making our lyrics database using only Categories and Tag Cloud. These two widgets should stay your main organization and navigation tools for this database, but let us see what else can be useful in this project. Calendar is presenting you the dates when you entered some songs to your database. You can also use Recent Posts to see the last 5 or 10 songs you added into the database. There are Text widgets to enter some comments, little images, internal or external links, special song lists that are not defined by Categories or Tags. You can create new pages with all these content elements and then show them in Pages sidebar widget. My advice is: don’t make it complicated, if it can work in a simple way. Use only those tools that can improve the functionality of your lyrics database!

Meta widget, which gives you access to WP admin panel and some other administration features, is not needed. I am sure you have already noticed three simple menu buttons in header area: Home, Admin and Google Search, which obviously take you to the home page, admin panel, or google search for lyrics.

1. Activation

First go to the admin panel and choose Appearance > Themes from the side menu. You will see that you have three new themes, i.e. three variations of Lyrics Organizer: Dark, Light and Mini. Activate the Dark theme. When you finish all the settings, you can always get back here and change theme variation.

2. Site Title

Go to the Settings > General in admin panel menu. Here you can change the site title and subtitle (tagline). Save changes and go to site view to see what it looks like:

3. Sidebar Widgets

Initially, you have some widgets which are not needed for this theme. Get back to the admin panel and click on Appearance > Widgets in the side menu. In this theme you have two sidebar columns, left and right. From Available Widgets panel drag Categories widget and put it in the Left Sidebar, and drag Tag Cloud widget to the Right Sidebar. These two widgets will be your main organization and navigation tools, therefore you should make a plan how to organize your lyrics in categories, and which keywords will be used in tag cloud. Check my demo presentation site and see that my songs are organized by style, and that I am using artist’s names and tempo values as tags. When using this theme on live performances, this way of organization will help you in planning song sets, and give you nice song lists with smooth flow from one song to the next.

4. Installing Plugins

This theme requires two plugins – CQS and wp-subtitle to work properly. The third plugin – Fancybox is optional – you can install it if you plan to use big images in your lyrics project. All the plugins are already copied – installed in your theme (chapter B.2 of this tutorial), and now you have to activate them and set options.

1. CQS (custom-query-string-reloaded) – posts in standard WordPress themes are always ordered by date/time of post creating. In this project we want all our song lists to be ordered by Song Title, and this plugin will help us achieve that goal. In admin panel go to the Plugins, locate Custom Query String Reloaded and activate it. Now, in WP admin panel find Settings > CQS (at the bottom of side menu). In this dialog you will define conditions for listing your posts (songs), and for this purpose you will need just the top – query line of dropdown lists dialog. First select is_archive (or just leave it if it’s already selected) from the Condition column, then in column Show write how menu posts (songs) do you want to be displayed on one page: 50, 100 or use -1 to show all posts (songs). Finally, in column named Order By select title and ASC, which means that your songs will be ordered by Song Title ascending (from A to Z). Use the same settings for defining next two conditions: is_category and is_search. Now you have three defined conditions for correct displaying of all song lists in your project:
   
2. WP Subtitle – go to the Plugins section in admin panel and activate this plugin. When you add or edit posts (i.e. songs) a new field appears in the admin panel and you can use it to add brief information about the author, artist, song key, or tempo. There are no settings for this plugin.
3. FancyBox is a kind of “lightbox” tool for displaying images, html content, and multi-media. You can use it in this project for displaying big images of chords, music sheet, tablatures, and other pictures. You activate it from Plugins section in admin panel. It will automatically open all images that are used in link tags. Settings for this plugin are located in the Settings > Fancybox for WP menu (at the bottom of side menu), and you can experiment here with various display, animations, and other options.

5. Creating Homepage

This theme is very simple and clean, so we will make the homepage in the same style – just a nice frontpage image with a title. Inside the folder uplads of the downloaded material for this theme, you will find the image singers_01.jpg that will be just fine for this purpose. First upload this image to your WP project media library. In admin panel go to Media > Add New and click Select Files. Find image singers_01.jpg click open, and save it in media library. Now navigate to Pages > Add New to create a home page. Create new page (Pages > Add New), give it a title – Lyrics Book (it is just for the reference and won’t be shown on your page). In text edit field choose HTML view (instead of Visual view). Click on Add an Image icon on top of this editor, then in this dialog choose Media Library from the top tab menu, choose your image and click Show. In the picture dialog delete Link URL (you don’t need any link from this image), set alignment – Center and size – Full Size, and click Insert into Post button. Publish your new page. To set it as homepage navigate to Settings > Reading in the admin panel side menu, choose A Static page and for frontpage select Lyrics Book page that you have just created. Save changes and go to your site view to see how your front-page looks.

You can add a simple line on top and bottom of an image by adding the following code in your home page editor. Check that your editor is in HTML mode, the first line goes before the image tag, and the second after the image tag.
<div style="margin: -28px 5px 34px; width: 540px;"></div>
<div style="margin: 20px 5px 30px; width: 540px;"></div>
Of course, you can set any other image you like for the home page. Just take care that the available width of main content block is 550px. Later, when you create your lyrics database, you can add more elements to your homepage, for example some text, your favorite song lists, or internal – external links.

1. Install Web Server on Your Computer

If you want to install this WordPress theme on your computer, you will need a web server installed on it, as well as a support for MySQL and PHP. Although it may sound quite complicated, there are some nice, open source projects that support Apache web server and provide very easy to install Apache distribution containing MySQL and PHP. XAMPP is one of these projects and it supports installation on all contemporary computer operating systems, including Mac OS, MS Windows (from WindowsXP Home to Windows 7) and Linux distributions. You simply follow the instructions from XAMPP project installation guide, accepting default installation parameters, and in a few minutes you will have a web server installed on your computer. After installation open a browser and enter http://localhost/ into the address bar. The Test Page for Apache installation should be displayed into your browser.

It is also important to remember where is the default location for your web projects on local web server; usually it is C:/xampp/htdocs/ (if you did not change the default setting during the installation).

It is beyond the scope of this text to provide full help on installing Apache web server, but you can find plenty of tutorials on the Internet. Just use your search engine or go to youtube for video tutorials.

2. Install WordPress on Your Computer

Now, when you have web server running on your computer, you can install WordPress locally and create your new project. There are some slightly differences compared to standard web server installation in creating WP config file and database, so let’s do it step by step.

1. Create a new database on your local MySQL server for WordPress. Open your browser and type http://localhost/, and it should now take you to the XAMPP start page. Now click on phpMyAdmin – it’s the tool you will use to manage your databases on MySQL server. In the phpMyAdmin page, create a new database and name it lyrics-01.
2. Go to wordpress.org and download the latest build of WordPress (current version is 3.2.1). Extract downloaded zip archive in some location (Desktop or My Documents folder).
3. Go to the htdocs folder (where you installed the XAMPP). In this folder create a folder LYR_01 for your WordPress site with Lyrics Organizer theme. Copy all the files and folders from downloaded WP installation folder to folder LYR_01.
4. Locate file wp-config-sample.php in your project folder LYR_01 and rename it to wp-config.php. Open wp-config.php with any text editor and update the database details: db_name is lyrics-01, user is root with no password (if you didn’t make any changes to MySQL configuration), and host is localhost.
5. Finally install WordPress. In your browser’s address bar type http://localhost/LYR_01/wp-admin/install.php, start the installation and follow WordPress instructions. You have to set a name for your WP project, user name and a password, and your WP installation is finished in a few seconds. Project name can be easily changed later, so for now, you can just enter ‘My Lyrics’. Local address for this new WP project is http://localhost/LYR_01/ so you can use it with any browser to access your lyrics WP site. At his point, the URL address is taking you to the brand new WordPress installation with default WP theme, and we can proceed to our theme installation. In case you find some difficulties in WordPress installation, please refer to WordPress install guide pages or other tutorials on the Internet.

3. Install Lyrics Organizer Theme

Extract Lyrics Organizer zip file you obtained from the ThemeForest. Locate the folder www and notice that you have the following subfolders: themes, plugins and upload.

All required files for your new theme should be placed in wp-content folder of your WP installation (default location is C:/xampp/htdocs/LYR_01/wp-content/). You have to copy content from themes and plugins folders to appropriate folders of your WP project:

• from www/themes copy three theme folders to wp-content/themes folder of WP installation
• from www/plugins copy required plugins to wp-content/plugins folder of WP installation

When you finish copying all those files, you should have the following folder/file structure on your XAMPP – htdocs location:

B. Web Host Installation

1. Install WordPress on Your Web Host

If you plan to run this theme as a standard Internet web site, you should first install WordPress at your web site location. You need to:

• Create new MySQL database using administration tools from your web host provider
• Upload WordPress files in the desired location on your web server
• Set the database parameters in wp-config.php file: db_name, user, password and host name
• Install Woordpress by accessing wp-admin/install.php in a your web browser

In case you need help on WordPress installation, you can find detailed instructions on WordPress official pages or search for other tutorials on the Internet.

2. Install Lyrics Organizer Theme

To install the theme, you simply have to upload files from themes and plugins folders from downloaded material to your new WordPress installation. Quite the same as described in chapter A.3, only here you are not copying it to a local computer folder, but are uploading files using some FTP tool.