All posts in Programming

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.


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.

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.

Using LESS with WordPress Twenty Fourteen Theme and a Child Theme

I have been diving into CSS preprocessors this last month. Even though WordPress has adopted SASS as the preprocessor for the admin (see:, I used LESS in a little project to manage the child theme of my Twenty Fourteen blog website. The concept of child themes – is best practices.

For my project I needed to control the background colors for the menus. By default, these menus  they green. In order to change these you really have to dig through many instances of this green color(s) in the CSS. I found a plugin called Fourteen Colors This plugin overwrites the CSS with an internal style sheet. This style sheet is generated from the Fourteen Colors plugin settings in the admin. If you simply want to change the colors of your Twenty Fourteen theme, this is your best option. This post is really about exploring WordPress development with .less.

Default Theme Colors


LESS Generated Colors



The concept was to use .less and have it generate my child theme style.css file which would change the green menu to blue. I already had node.js installed. I was using an IDE called WebStorm which with the feature called File Watcher that can prepossess the css. I chose to put all the .less files in a folder call src with the path being
s\wp-content\themes\twentyfourteen-child\src (see above). This way the dependencies would all be in one place.


And presto it works. You have a LESS preprocessor dev environment and everything is production ready as WordPress will always just look at the compiled .css file. This can be extended and have the .less files incorporate other features of the theme.

For the final results see a blog site where I have some fun and write about San Francisco, Music and other topics. The github link  is Of course, at the site you are simply seeing the compled css file.

The Semantics of HTML and Web Sites – Why Markup Matters

Creating websites for 13 years now, I have seen the evolution of websites from clunky table based layouts that were semantically just a bunch of noise to the current HTML5, semantically charged creations. Of course the leaders in Web Standards and semantic HTML have been people like Jeffery Zeldman and his disciples, great CSS exercise sites like Zen Garden and also the blog sites and open source world, probably most importantly WordPress. If you want to make a web site theme that then someone else can take and run with, the semantics of the markup have to be solid.

I am amazed at how understanding semantics in both web design and programming gets overlooked. I still know many web designers who do not understand what a heading tag is. They are often so lost in the fonts and backgrounds and images that they forget what is going on in the hierarchy of information. I have witnessed decent designers never realize that <h1>What a Killer Page</h1> is what is essential. This is not only for SEO but also for making the web site accessible on a variety of platforms. I still know amazing developers who can talk your ear off about Object Oriented Design Patterns who when they get to the HTML will code a heading tag as <div class=”main-header”> What a Killer Page</div>. I am not sure if this is because they just read stuff too quickly and never really read chapter one and think they know everything, or maybe they just don’t get it. Struggling with the margins of a <p> tag does not mean you should then use a few <br /> tags. Strange.

In HTML, if you take away things like the required html, body and title tags, the important semantic markup is pretty simple.

  • Headers h1,h2,h3,h4,h5
  • Paragraphs <p></p>
  • Lists <ul><li></li></ul>
  • Tables <table><tr><th></th></tr><tr><td></td></tr></table> (for tabular data)

That is really it! Markup such as divs and spans are not semantic. They are presentational! Putting things like navigational lists into divs is just wrong. The sooner one learns this basic distinction, the faster you will write cleaner, easier to maintain code.

In HTML5 the list of semantic markup grows longer. I will not enumerate them here but to me one of the main objectives of HTML5 is this semantic markup. <section></section>, <article><article>, <video></video>.

So there you have it. Just think. If you are just starting to write HTML, you got to avoid the 7 year era of table based layouts and nested tables seven layers deep just to keep you debugging for and hour all for the crappy browsers of the day.

originally posted: December 27, 2012