Musician Freelancer WordPress Theme Examples

I have friends. We all have friends. Friends are good. When my musician friends come calling or start complaining about their websites, I like to lend a hand. I find making musician websites to be really fun. Cool photos. New design challenges. Music playlists.

Two such friends in San Francisco, from two very different musical genres, but about the same age, needed website upgrades. It is the usual story in a way. Both had ten year old sites that had these really “cool” beveled buttons and animated gifs flying across the screen. The colors were all “web safe” (dear lord, I am glad we are through with that) and of course you needed a magnify glass to read anything as the type was 11 point throughout. Forget about viewing these old sites on a phone.

Using the exact same theme, Musician Freelancer created by yours truly, I made these two sites with the existing content from the old sites.


jeannie and chuck

The theme is the Musician Freelance theme available on github.

Now I can always know where these great musician are playing around town. Do check out these great posters by Mississippi Mike.

Emmet and a Way Better Way to Write HTML

About a year ago I retooled. It was time to get my work environment set up to make writing applications and websites as efficiently as possible. I had a lot of home-brewed solutions to repetitive tasks (most were server-side snippits) but I knew that there was surely some great tools out there. After trying out a few IDEs, Aptana, SublimeText and a few others I chose PhpoStorm by JetBrains. This is a powerful tool for all kinds of open source php development. It pairs very well with Git and WordPress. The only thing I do not like about it so far is the fact that you cannot sort by the modified date in the project window. Maybe someone other knows this one?

PhpStorm has Emmet integrated as a plugin. Emmet makes it so you can write dynamic snippits. It is inspired by CSS selectors. If I type ul>li*8 and hit the tab button I get

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>

Is that cool or what!

So let me do a little bootstrap set up


which makes

<div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </p></div> </div> <p>

And a table for Bootstrap that is 6 rows with 10 columns…


<br /> <table class="table"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <p>

That would be a big “BAAAAAAAM!” Actually, it looks better than above as the results are properly tabbed. No longer do you type some codea and cut and paste code fragments. Fun stuff!

The Great Fall of the Internet Explorer Browser

IE8 Unsupported

Outdated Browser

Ahem. I’m not going to lie, this is a little awkward. It’s like telling someone with acid washed jeans or puffy shoulder pads or overalls that times have changed and you have to change with them. Internet Explorer 8 is very old now. It’s time to update your browser and maybe try some skinny jeans and listen to some dubstep too. Who knows they might suit you.

Notice from Agency Website

How quickly the landscape changes in technology. From month to month things happen that we probably do not notice until they are common assumptions. Ten years ago Internet Explorer dominated the browser world. It was first taken over by Firefox and now Chrome. It seems pretty amazing that a company the size of Microsoft did not see this coming. I think in 2006, dominating the browser market was not as big a deal as it is today, simply because today the browser does so much more with extensions, tools and data tracking. If you live with a Gmail account and Google Drive, you are living in a world that Microsoft probably dreamed of dominating.

Another aspect of this browser story is the cost of maintaining support for the old IE browsers. While developers have a whole arsenal of tools to deal with old Internet Explorer browsers, most developers still run into projects for large companies where IE8 is the official company browser. The downstream cost for companies that move slowly in updating their technology is surely huge. Often these large companies outsource development and when developers have to support old browsers, it simply takes longer and in the end costs more. I understand that old systems (ERP, etc.) are sometimes only tested on old systems but forcing staff to live with just an IE8 browser seems a bit odd.


Actually, that’s not a bad exercise: you should try to add updating user info to this page and see if you can get it working. You’ll need to edit /views/index.jade, /routes/users.js, /app.js, and /public/javascripts/global.js just like for adding and deleting.
Christopher Buecheler

In the GitHub repo below is this last exercise completed. Of course it is best to figure out how to do this on your own but if you get stuck, this is how I did it. So this is the last step of Christopher Buecheler’s outstanding tutorial. Here I complete the lesson with the last part of the CRUD operation with the UPDATE step. While this tutorial does not program in a very modular, best practices way, it does explain the basics really well.
Ok. Now back to all the legacy stuff and debugging IE8.


On my GitHub here

Recent Small Jobs

A few smaller jobs that I was involved in recently and now it is time to give a shout-out to people looking for work or trying to run a taxi company in SF.


A very talented designer, looking for a gig. I worked with him at Monster and he is a great guy. He needed some help debugging the JavaScript and responsive CSS stuff.


A dependable, quality flat-rate taxi service in San Francisco with online reservations. This is a custom WordPress implementation. Originally he had his site in the truly awful VistaPrint web world. Run away from that system like the plague!!! I set ATA all up with WordPress. I created a plugin so that the data for the various fares is managed in a Google spreadsheet. This data is then used to run the entire shopping cart. The site sends the user to an simple checkout. Secure, clean, dependable, flexible and really awesome.


I have been really enjoying, in between jobs, reading and studying all the new stuff. AngularJS, MongoDB. It can be frustrating at times as the writing in these tutorials is so dry and dull it makes the California drought look like a flood. The tutorial work by Christopher Buecheler is outstanding. Clear and bullet-proof explanations that keep you moving along. I had already gotten pretty far with node but what a great tutorial. There is also a part two which is also very good.

OK! So now we’ve got our router routing us to our view, which we are viewing. Let’s do some modeling. I’ll give you a moment if you need to fix your hair or makeup.
Christopher Buecheler


Writing with a sense of humour is often in short supply in tech tutorials. The combination of really great steps with a little wit goes a long way.

New WordPress Theme “Music Freelancer”

Had a great time building this theme for my son Kai. It is a WordPress theme for Musicians. Basic but effective for the playing and teaching musician. Utilizes Bootstrap 3.2 & fontawesome an upgraded audio playlist feature with images. Uses “Featured Images” as the fullscreen background to pages. Ongoing project in my desire to master custom WordPress theme development.



This is a free theme.

Best Programming Jokes – Welcome 2015

Who says that programmers do not have a sense of humor? Some of the best programming books are actually concise exercises in humor. I have always advocated that good code is short. Refactoring code is always about getting rid of stuff. In the process, you have to just laugh at it all. Some of these are not even jokes, but insights into good programming really.

I first made this list in 2013 and they still make me laugh and help me in times of need.

When debugging, novices insert corrective code; experts remove defective code. ~Richard Pattis

Controlling complexity is the essence of computer programming. ~Brian Kernighan

Reusing pieces of code is like picking off sentences from other people’s stories and trying to make a magazine article. ~Bob Frankston

What I mean is that if you really want to understand something, the best way is to try and explain it to someone else. That forces you to sort it out in your own mind. And the more slow and dim-witted your pupil, the more you have to break things down into more and more simple ideas. And that’s really the essence of programming. By the time you’ve sorted out a complicated idea into little steps that even a stupid machine can deal with, you’ve certainly learned something about it yourself. ~Douglas Adams

Everyone knows that debugging is twice as hard as writing a program in the first place. So if you are as clever as you can be when you write it, how will you ever debug it? ~Brian Kernighan

Programming is like sex. One mistake and you have to support it for the rest of your life. ~Michael Sinz

A good programmer is someone who always looks both ways before crossing a one-way street. ~Doug Linder

Beta. Software undergoes beta testing shortly before it’s released. Beta is Latin for “still doesn’t work.” ~Author Unknown

Good code is its own best documentation. As you’re about to add a comment, ask yourself, “How can I improve the code so that this comment isn’t needed?” ~Steve McConnell

One man’s crappy software is another man’s full time job. ~Jessica Gaston

How to Create Your Own File-Based Image Galleries with php, ftp, Shadowbox and a Groovy File Structure

or perhaps titled:

I don’t trust anyone with my photos, not Flickr, not Google and especially not Mark Zuckerberg!


  • Linux Hosting Account (php enabled)
  • ftp program for uploading files


I wrote this post a few years ago and recently updated it with some automated thumbnail creation. Below is that original post.

Many years ago, in the dark ages of web development, when I had a Windows hosting account, you know one of those $4.95 a month deals, and I wanted to post lovely photos of my kids and vacations, I would do it a state of the art way. I’d open Photoshop 7 and chose “Create Web Gallery.” I would then wrestle the various dialogue boxes into submission and create a Web Gallery. It worked. It looked cool. It used tables for layouts. I was a genius.

Last year I closed my Windows hosting account. Never use webhost4life. It is a terrible hosting company. As I was doing a lot of Word Press, I chose BlueHost. So far so good.

Now I could have just uploaded all my old Photoshop galleries to my new hosting account but this seemed lame. I did not want to use any Web 2.0 stuff, in other words startup companies just waiting to be bought out and make your life really complicated, but I did want to use ftp to upload files. So with a little php, notably scandir, I created a way to display all the photos in lovely paging galleries.  The first time a particular gallery is accessed, it creates a folder of thumbnails in that directory named ‘thumbs.’ This makes the pages load faster.  Larger versions of the images utilize Michael Jackson shadowbox, still one of my favorite lightboxes  There is no indexing for searching, or meta tags, but to be honest, I would never get around to entering this sort of data. Maybe in the next version, I will add this feature.

A few key elements (let us say features and recommendations) of “Paul’s Amazing php Photo Gallery” are

  • Name your folders like this 2012-08-New York. The folders will display by replacing the dashes with spaces and are ordered in descending order.
  • Process your images to 1200px wide. This way they will look great when large, but not so big it takes forever to see a gallery.
  • All gallery images have a lightbox large image version. Go shadowbox!

that’s it…

SEO and Responsive, Mobile-Friendly Designs

I have always been someone who thinks beyond the task at hand and to the larger impact of decisions and the things created. Recently, I did a little project for my buddy Pierre who works at a local electronic repair shop – This little website has been a great test environment for me. This time the job took about a day. This morning, with a fresh browser I observed the effects of the website changes had on SEO.


Their old site was a clunky thing that I did in 2006 so they really needed an upgrade. This time I choose a WordPress, Bootstap 3.0 enabled theme that of course is responsive (meaning mobile-friendly). I implemented Google maps, made sure they where set up with SEO friends urls, description META tags all good, titles just right, etc. I then moved the site to my account on BlueHost which simply ROCKS!

Before the site change, I noticed that L&M Electronics had fallen off the search results of Google. A week after the site launched, they now come up on the first page for all kinds of search terms – ‘san francisco receiver repair’, ‘san Francisco autio repair’, ‘stereo repair sf.’ As well as simply “L and M Electronics.”

While Google states it does not take into account responsive designs into SEO and that it does not hurt.

From my anecdotal trial, I have a feeling that Google prefers responsive design. Google is in the business of serving up quality search results. It makes them look good when your website looks good on all devices. Even though the content on this website was exactly the same, it helps to make a new website. Google likes current information and a new website gives them the impression that the site is being maintained.

If you need to upgrade your small business website, just call or email. Here to help out.