Kicking the Bandpage in 60 minutes or less!

Dasr | Feb 15, 2010

This week’s tutorial: how to create an awesome band homepage and have it up and running in 60 minutes or less.

If you are one of those people who think a kick-ass-flash-firestorm is the first thing fans should see before they enter your site. This tutorial isn’t for you. Let me state for the record; Flash is the most inane thing a band can do. If it takes more than 1 second for your band page to load, you have just lost 90% of the visitors to your site. The same with auto-playing-music or videos. You’ve made your music virtual noise and elevator music. Instead of using that one second to catch a fan’s interest, visitors are looking for the button to turn it off. I am not saying there isn’t a place for listening (a page created for it), just not every page on your site.

This is a two-part tutorial in one post and depending upon your needs, you’ll have to decide which one is right for you.

What you will need; Your biography, one pic, the knowledge you are not to include <code> </code> tags when cutting and pasting script, and a website.

Now, you have a decision to make. Is free, an option you dig? Or, do you plan on hosting your own site? Either way, there are some free and reasonable web hosting servers out there for both options. Try searching for the option you prefer.

A few details; We are going to use WordPress as the CMS (content management system) for the website. Why WordPress? Why, not. WordPress is flexible, user-friendly and customizable. Your site will be easy to keep up, expandable to multiple authors and can be configured (only in self hosted) to post to other sites (twitter, MySpace, Facebook) automatically.

I have two examples for this tutorial: 30 minute (the pic above and to the right links to the actual example) and 60 minute (the pic below and to the left links to the hosted example) installs. Both are identical themes, with slight differences in what the sites can do. The first is a free service, offered by WordPress.com. Register, and your site is up and ready for customization. If you are ready, you can skip down to customizing.

The second, takes about an hour and you will need a web hosting account. Most web hosts offer WordPress as a auto-install freebie. If they don’t, they must offer MySQL (WordPress download and a detailed walk-through of the manual install process can be found here.) for wordpress to work on your server.

After that install: This is what you will need for the 60 minute version customization. Login and go to admin dashboard. On the right, is the control panel. Look for: Plugins>Add new: Get the following 11 plugins (by copying and pasting the name into the search and installing the results). The names of the plugins are exact. Just look for the ones named this and install:

1 Custom Meta
2 Fast and Secure Contact Form for WordPress
3 Favicon
4 Kahi’s Notes
5 Media Library Gallery
6 MyAdManager
7 Page Links To
8 SocialGrid
9 Socialite
10 Visitor Maps and Who’s Online
11 wpSLEEP

Now you are ready to customize.

Customizing:

Log in and go to dashboard. On the right, is the control panel.

1. At the bottom of the page is: Settings>General Settings. This is where you will imput your title and tag-line. Save.

2. About half way up the side-menu you will find the controls for Appearance>Themes. Choose a theme>Install.

30 minute version: One of the draw backs of the wordpress.com hosting services, is they only offer 79 themes. The choices are limited, but I am sure you can find something you like. Just pick one, you can always change it later.

60 minute version: Your choices will be almost unlimited. Go to Appearance>Theme>Manage Themes>Add New. Search for themes by keyword, author, or tag and install. Just pick one, you can always change it later.

3. Side-menu again. Posts>Categories. You will find one category (uncategorized) already there, this is the default. Rename it News. Now you are going to set up four more categories. Save each as you make them.

1. News (done)
2. Blog
3. Discography
4. Press
5. Tour

4. Side-bar. Find: Pages>Edit. You will find one page named: About. Rename it: Biography. Copy and paste your biography over what is there, add your picture, click no comments and save. Now add a new page. Name it “Music” (see details below).

1. Biography (done)
2. Music

30 minute version: embed your youtube videos (the free service will not accept script) and leave the page open for comments.

60 minute version: Since, you are hosting the page yourself you can embed script (players in particular). One of the easiest to set up and less bandwidth intensive to you is your own MySpace player. The music is there, you may as well use it. How do you do that?

Go to your myspace page and let the player load. Right click on the side of the page and choose page source. In edit, you are going to find: <code><object type=”application/x-shockwave-flash: </code> this is the beginning of your player. Grab everything from <code><object type=”application/x-shockwave-flash: </code> down to and do not include: <code><!–<![endif]–> </code> That is simply your stopping point. Paste it in the music page, and add this tag at the end: <code></object></code> and save. If you need to adjust player size, change <code>width=”" height=”"</code> in the script and save. You now have a music page, where fans can listen and comment.

5. Side-bar again. Appearance>widgets. To the right is the sidebar for your page. There can be multiple placement depending upon the theme you choose. The main sidebar (top one) open it and add these widgets (in order, dragging and dropping) from the choices if they aren’t already there.

1. Search widget
2. 30 minute version: Text widget (this is for your social network add-me buttons)

This is the basic html (Facebook, twitter, and myspace.) you will enter for your networks (text box). Edit to point to your pages and networks (removing and adding what you do use.) A basic image pack can be downloaded here (to change the icons), or google ones you like. Upload them to imageshack and grab the direct link.

<code>href=”url to site”
img src=”image.gif/png/jpg”
insert between the quotes</code>

When you are done editing, copy and paste it into the text box and save.

2. 60 minute version: SocialGrid Widget.

To set: Dashboard>Sidebar>SocialGrid Options> Add the ones you want and link.

3. Pages widget (rename title Menu)

4. Categories widget (rename it Browse)

5. 30 minute version: Meta widget

5. 60 minute version: Custom Meta (open it up and toggle: Register/Site Admin, Log in/Log out, Entries rss. Save.)

6. Side menu. Posts>edit. You will find one post. Click edit.

Edit the contents to something like. “Welcome to our dream.” Toggle all the categories and save. This will activate all the categories on your site, and they will show up in your sidebar menu.

30 minute version you’re done! Happy Bandpage!

60 minute version continues:

7. Side menu again. Pages>edit. Add two more pages named: Photos and Contact.

1. Photos (add the following script: <code>[media-library-gallery]</code> and save. You now have a photo gallery.)

2. Contact (add the following script in brackets (like the one above <code> si-contact-form form=’1′ </code> and save. You now have a contact page.)

8. In settings on the bottom of the side menu find: Socialite.

Configure Socialite to automatically post to twitter, MySpace and Facebook.

Suggestion: Untoggle:
Update Twitter When a Post is Edited?
Update the Status on the Wall When a Post is Edited?
Add a Link to the Wall When a Post is Created?
Add a Link to the Wall When a Post is Edited?
Post to your MySpace Blog When a Post is Edited?

Why? You just want to hit the feeds once and not spam your friends.

Tip: look for: “Update the MySpace Blog When a Post is Edited.” Grab the script in the Body Template text box and cut and paste it in the box above it replacing the script already there. Why? The text box script above that (Post to your MySpace Blog When a Post is Created?) posts the entire post and not an excerpt of the post. You are trying to push traffic to your site and changing the text to excerpt will do that.

60 minute version you’re done! Welcome to your homepage!

In two weeks, MusicBrainz and why should I care?

~Cheers D

Filed Under: Tutorial