Thursday, March 19, 2009

Building my band's website using Wordpress

Besides coding, my other passion is music. I sing and write songs for the pop/rock/alternative band Nelo at ang Tala. Last week, I decided to recreate my band's outdated website so it can go well with our newly finished demo. I used Wordpress (WP) as CMS for the website so I can edit it with my bandmates and it's easy to post updates soon. Wordpress really rocks, everytime I have a chance to use it I constantly get awed by its new features and very nice interface. I really salute the people behind this project for creating this kick-ass software. Anyway, enough of my fanboyism.


I copied the whole kubrick folder (default) and renamed it to nelo. Then I wiped the css clean so I can start from scratch (hehe). I'm not really sure if they've updated kubrick since WP 2.0, but the last time I used it, the css file was full of hacks (haha). Not blaming it though, this theme is being used by gazillions of blogs (don't flame me pls ;). I've even used this on some sites before. I just wanted a clean slate because I already have a static design (HTML/CSS) ready. Made some edits to the templates and voila it's good and working! Another nice thing about WP is the excellent semantic markup; it will be just as usable as is, even without CSS.

I wanted to make everything editable on the admin. Offcourse that's not possible (maybe it is, but I don't want to spend forever for something that will change in a year). What I'd like to be editable is the text intro and teaser that's on the header part of the template. I don't think WP doesn't have a snippets feature yet for misc parts of the website (there's widgets, but that's for the sidebar). What I did was created a 'page' for each section of content on the template that I want to be editable, so I created an 'intro' and 'teaser' page. I looked into the codex and found out about this nice function get_posts, what it does is it queries posts/pages based on the arguements given. It's really a charm, here's how I used it on the template:

$intro = get_posts('pagename=intro&showposts=1&post_type=page');
foreach($intro as $i) :
the_content('More »');

This looks for the page 'intro' and displays it on the part where I want it to show. One disadvanage of using this approach is you can't use WP's function to list the pages for your nav, since it will also show the pages that you are only using on the template (maybe you can use link categories but I haven't tried that yet). On my template, the links on the nav are hardcoded (and I don't mind ;)

The gallery feature of WP is just new, so I don't really mind that it sucks right now. It's hard to understand how to use it (attach photos to a page/post to create a gallery). But I've managed to use it on our photos page! It still helped a lot.

Oh did I mention that WP is mainly a blogging engine? hehe. That's one reason why I really like to use it on our site. You won't see it now but the frontpage is also where the blog posts will appear. (will post updates soon!)

The admin interface if you are an admin (sorry about the sentence!) is quite messy at first. I don't want my bandmates to get intimidated by the number of options and features. I assigned them as authors so they can focus on the content. One problem I faced is that an author cannot edit widgets, which I need because our gig schedule (which appears on the sidebar) is using the text widget. To solve this I used the Role Manager plugin which lets you assign custom privileges to a certain user. I just added the 'switch theme' privilege and it worked!

Wow this is already long. I really enjoyed building our website especially because I used a lot of stuff that are available already for free. If you notice I'm using a flash player (ala myspace). The player is from Premiumbeat and it's free. I like it because it's simple and elegant (and it works quite well!).

Lastly, I'd like our music to stream fast so the user won't get stuck while playing it. This is another story but I'm using Amazon's S3 to host the mp3 files, so it will always stream fast. Special mention to S3fox which is a free software to manage files on S3.

That's it. Some people say that our website is simple and effective. I'm very glad to hear that! I'm not really much of a designer but I think I'm good at creating simple and effective user interfaces. Thanks for reading and keep the music playing!


  1. I always enjoy learning how other people employ Amazon S3 and CloudFront. I am wondering if you can check out my very own tool CloudBerry Explorer that helps to manage S3 and CloudFront. It is a freeware.

  2. Good posting! more professional web templates at its a easy download.

  3. Your Wordpress Band site looks pretty sweet, I built my bands wordpress site using a theme, It has functionality such as TuneCore player, Tour dates, Twitter feed, Facebook and myspace player, Check out

  4. Great blog, keep up the good work. Glad to see sites like this.
    software consultancy

  5. Hey guys, If your looking for Wordpress Band website themes checkout >

    All of our thenes are GPL themes, see >

  6. Great tutorial very easy to understand, web design company Thanks For Sharing.

  7. There are a ton of bands using this now, this guy has a cool article about it too going into seriously simple detail for the heroin addled musician I guess heh.

  8. Good tutorial, but I'm no good at design, so I used this wordpress band theme for my bands website, it turned out really well.

  9. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 converter