Make your own band website part 2

  As some of you know, we had to hold back a little bit in the past few months due to some health issues. But now it looks like it’s going to be a full steam a head :-) We are trying to put a bit of a dent in to our 100 concert challenge before the years end, so few more gigs booked. JPKALLIO.COM will be taking part in the Battle of the bands organized by the Fibber Magees on 7th of October, again another Friday night gig for those of you working 9 to 5. And then we'll be doing the Juke box slot in the Sweeney's basement on 19th of October, I’m still working on some extra dates before the end of the year.

   But now let's bet back to our Build your own band website project. This will be the second part, and if you missed the first part, check out Make your own band website part 1. This week we'll get to the actual design part of your site. Another advantage of the Wordpress site is that you can use almost endless amount of templates available online. You might say here, why would I want to use a ready made template, it will only make our site look like so many other sites. But the thing is that you can customise most templates to certain level, and some you almost have complete freedom. I would look for a simple and functional template. These tend to be easier to customize. So now after last weeks set up you will be able to log on to your dashboard www.yourdomainname.com/yourwordpressfolder/wp-admin/ This is where you can do pretty much all the set up work and manage your website. This is something you do not have with normal websites. With them you need web design software and html knowledge. So let’s get started with something simple.

  On the left hand side you have a navigation bar, and there you can find at the very bottom Settings. This is the basic info of your website. For now all you need to worry about are the first two, Title and Tagline. The title should be your bands / websites name. On the tag line put a short description of the site. At the bottom of the page you have Change Settings button, click on it to save the changes. Next click on Appearance in the Navigation bar and a subfolder opens underneath it, select Themes. Wordpress comes with theme called Twenty ten. This is basic but very useful theme. So we are going to work with this. It allows you to do some customizing on it with in the basic tools. And with a little bit of CSS code you can make very nice and individual web page with it. On the Themes page you have two sub pages, the Manage themes and Install themes. On the Install themes you can search online for different themes and install them to your page (Just google wordpress themes and you will find thousands!), and on the Manage themes page you can actually activate the desired theme from the ones you have installed. So under every theme you will have three options: Activate Preview and Delete. Let's just click on the Activate. Now you have the very basics set up, and we will do small bit of customizing. Click on theme options on the Navigation bar. Here you can choose Light or Dark colour scheme, choose the link colour, and the basic layout of your page. The layout options basically puts the main body of your site on one side and small column on the other side, or you can just have the main body. I find the small columns handy as you can put your Soundcloud player, twitter feed or other more permanent stuff here. We'll go through this in a bit. Once you have selected the settings that best suit your site, press Save Changes button at the bottom of the page.

  Click on the Header on the navigation bar here you can select a custom image for your header. This could be a photo of the band or a logo. There is also option to put some text on here, like your band name for example, but I find I have more control if I actually put the text in the header image. To do this you need some sort of image editing software. There is shareware software called Gimp 2 that I use all the time. For a shareware it is very powerful and even just compressing or re-sizing photos for Facebook, Emails etc. it is priceless tool. It will also let you re-size your header image to the required 1000x288 pixels. If you don't know how to do this, don't worry, Wordpress will chop it for you. But if you want the photo to be exactly to your dimensions, then head over to Gimp for some simple photo editing. Again once you have selected the photo you want to use by clicking choose file, select the image from your computer and then click upload, go to bottom of the page and Save Changes. There are other options on this page that are pretty self explanatory, but I think choosing the photo and if your band name/ web site name is on your picture just choose No in Display text.

  So now what you have is a very basic page with a header. Let's put some interactive stuff on your site :-) How about some music? Surely you want to put some music to your band website. We will use an external player. I have used several over the years, Reverbnation makes very nice looking players that have quite lot of customizing options, but Soundcloud is becoming the industry standard and the sound quality is very good. So if you don't have a Soundcloud account head over to www.soundcloud.com and register account, the basic pack is free and you do get up to 2hours of storage page at any quality. I personally like the fact that you can upload WAVs and even let other people download them in full quality. Once you have registered with Soundcloud uploaded some music, you can grab the Embed code from the sound cloud and copy it. Then click on the widgets on the Navigation bar on your Wordpress dashboard. Here lot of stuff pops up, but don't panic. What you have here is Available widgets, Inactive widgets and a Main sidebar on right hand side. In the Inactive widgets you have box called Text. Click and drag this to your Main sidebar. Once it appears here, just click on the downward arrow in the text box to open it. What you have then is a text box. Click on the text area and paste your embed code and save.

  Now I think it is time to have looked at the work you have done so far :-) At the top of the dashboard page you have small circular WordPress logo and beside it the name of your WordPress page (band/site name). I find it very useful to have two tabs open at the same time, one for the dashboard and one for your site. So right click on the name and choose open in new tab. Now click on the tab and you should see your basic site :-). There is a basic WordPress message on the main body of your site; we'll change this in minute. But check that the Header looks ok, and your Soundcloud player is in place. If it spills over from the side bar, which it should not do, but different browsers can be funny. So if this is the case, go back to Appearance and widgets. Here again click on the downward arrow in the Text box in the Main side bar. What you see is the HTML code for your Soundcloud player, and the first line looks like this: < object height="81" width="100 %" >. What we want to do here is change the 100% to a set width like 250 so you would have: < object height="81" width="250" >. Now the 100% repeats in the code again in the Embed tag, so towards the end of the code you will have width=”100%” again change the 100% to 250. And again save (what you have done here is go from % to fixed pixel size, this allows you bit more control). Now go back to the tab with your WordPress website and reload, any changes you make only appear on the site after you reload the page. Now the player should be the right size. Also on another note, you can use these text boxes for YouTube embed code as well, or for your twitter feed, pretty much any site that has embed widgets can be placed here.

   I think this is quite lot for this week, but I will just add one more thing. At the moment your website works like a blog. The Header and your side bar stays the same and you can use the main body area as news feed, or posting other stuff, so how you edit this is go to the Posts on the navigation bar. You'll have the WordPress message still here. Under the message you have options of edit, Quick edit, Trash and View. Just click on the Trash and the old message is gone. Now on top of the page there is Add new button, click this and add new post page opens up. You can edit the post in visual (Just write and add photos, links, videos, what ever you want by clicking a button) or in HTML (For the more detailed editing with HTML code). The visual is fine and you can just type some sort of welcome message for your website :-). On the right side you have blue publish button, once you press this your post is live on your website. You can make more posts, and the older ones will move down the page. Or you can trash them the same way we did trash the old WordPress message.

   That’s all for this week. Next week we are going to take a break from the web build, as we have another interesting industry interview coming up :-) But in two weeks time I'll show you how to build more pages for your website :-) Again if you have any trouble with any of the above, don't hesitate to contact me at jpkallio@hotmail.com and I'll do my best to help you out.

   Have a good week and we'll be back for more next week :-)
     J.P.