Since its inception in 2008, I’ve been taking care of the LT11.com website myself. In the beginning we simply found free WordPress Themes for our site. Then we started purchasing higher quality themes. As time went on–I started customizing our themes to better serve our purposes. As the customizations got more and more involved–I learned more and more. After many, many customizations to all the sites across the LT11 domain over the years–I now felt confident I could build a theme on my own without using a fully designed template as a starting point.
I gotta say–I love the internet. I feel incredibly fortunate to live in this information age. The UN Human Rights Council unanimously backed the notion internet access is a basic human right about 5 months ago. I agree because I see the internet as the only truly level playing field in this world. It has changed the game. Changed everything. And from where I’m standing I’m still shocked by how many people are ever so slow to realize that. It’s the most incredible source of information. You can learn virtually anything!
I spent about 300 hours building the new LT11.com site as it is of writing. I’m sure a pro developer could have done it in less than half the time. Even though I was pulling my hair out at times I enjoyed every second working on the site and I’m proud of it! One of my favorite things about my job is learning new things and applying what I’ve learned to solve problems and make cool shit. I used a bunch of awesome resources to help me build the site and after that long winded introduction I want to share them. These are the primary tools and resources I found most helpful throughout my development process. They are all free!
I’m on a Mac so I used MAMP (Macintosh Apache MySQL PHP) to run a webserver locally on my machine. I was able to set up a self-hosted Wordpress installation, open up the site in multiple browsers and get much faster feedback refreshing the page locally vs. having to connect to a web server over the internet. This seems to be the way most developers do it. OSX has Apache web server built in–but not MySQL or PHP which are required to run WordPress. MAMP has all those databases and libraries built in for you and is pretty much a one click solution!
This is the free text editor I used to code everything. Its light, simple and clean and makes the code look pretty so it’s easier to read and navigate. It also has the ability to connect to an FTP server and open files remotely. So when you save your file–it get’s updated on the server.
All wordpress templates have a common structure and basic functionality for the most part. Whiteboard Framework is a free resource/blank template for developers to speed up the development process. It comes with a demo CSS skin you are free to use, adapt or build upon to get you started. It also comes with just a blank framework–no design at all. This is what I used. It also comes with an optional Less Framework which is very useful for responsive web design. Essentially Less Framework uses CSS @media queries to automatically detect the screen or window size the website is being viewed upon and adjusts accordingly. So the website design can change if someone is viewing the site on a smaller screen like an iPhone. You can check out the effect by visiting this link and resizing the window. I didn’t use the optional Less Framework for LT11 site because it does have pre-defined dimensions that didn’t fit with what we wanted to do. It is, however, a great learning tool as well. I do plan on building a similar framework for LT11.com to make viewing the site on small screens better.
I have to give props to my homie ClimbingNarc for turning me on to this one a couple years ago. If I remember correctly Narc referred to the codex as his bible when working on Wordpress sites. I’d have to agree. The WP Codex–among other things–is a reference manual for any WordPress specific PHP function and more. It was especially useful when I was building the “Recent” and “Friends” footer boxes on the site which use native WP PHP functions to pull and display RSS Feed Items from other websites as well as our own.
- Superfish- for the primary hover pop up menus.
- jScrollpane – for the scroll bars.
- Columnizer – for the Clients list.
- FancyBox – for the Store images.
There is a giant ever expanding library of free WP Plugins to choose from that can do pretty much anything you can think up. As a general rule developing the LT11 site I tried to hard code functionality into the site wherever possible. I feel like too many WP plugins on a site makes things bloated. Who likes bloated anything? I feel like hard coding functionality is more robust and allows for greater creative control and also better security. In some instances, however, using a plugin was just simply so much easier and faster. And I just styled the CSS specific to that plugin if necessary.
- Jetpack – for comments and social media sharing buttons. It can do A TON of other useful stuff too. This is just what I use it for.
- Contact Form 7 – for the Contact page.
- underConstruction – for hiding the site from the public when it was time to launch.
I confess this is pretty obvious but it’s importance cannot be understated. Before I tackle any new problem I try Googling first. And don’t be lazy. Most people do a quick search, scan the headlines and if no obvious answer emerges–they give up. Lame. You gotta DIG. Read the forums. Read the blogs. Read the comments. Click the links. It’s rare the problem or question you have is entirely unique to you and your situation. Chances are someone else has had the same problem. The answer is out there one way or another.
I was previously a Firebug for Firefox fan but increasingly found Right Clicking>Inspect Element inside of Chrome to be more helpful when looking at the code underbelly of a site. Sometimes things are generated or interpreted differently by browsers than you might expect. I was constantly using Inspect Element to dig into the code via the browser and figure things out.
That’s it! Ask me any questions in the comments. Hope you found something useful.