Home Construction Website (WordPress)

For this home construction website, I made a Genesis Template look like a PSD. I mainly used PHP and CSS.

Probably the toughest part was getting the menu to shrink. The next toughest part was getting it to look good while shrinking. I created two incredibly sophisticated JavaScript functions called make_header_grow and make_header_shrink. Not really. They were complicated, but they weren’t really incredibly sophisticated. There was just a lot of trial and error involved.

I used an overly sensitive jQuery plugin to apply a parallax effect to the full-height images. I had to mess around with it for like an hour before I found the one setting that was causing it to not work. Believe it or not, I used PHP, not JavaScript, to solve that issue. Data attributes and such.

The buttons were lacking so I installed a nice CSS plugin to apply effects to the buttons. I only took what I needed from it and pasted it into the style.css file, the file which holds all the CSS of every WordPress project on earth. Combining two effects was nice challenge, but the button became beautiful as a result.

I also replaced the Layer Slider plugin with a much better plugin (hopefully) called Smart Slider 3. I think it was a very smart choice. And by hopefully, I mean that I hope it was a better slider and not that I hope it was called Smart Slider 3.

Building this home construction website was fairly challenging, but it’s always great to be able to look back at what you’ve done.

Home Construction Website Summary

  • I modified a Genesis WordPress template to match a PSD, mainly using PHP and CSS. For the most part, the mods weren’t too dramatic. However, I did go all out on the header.
  • I added special FX to buttons and icons using jQuery and CSS plugins.