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!
1. MAMP
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.
This site is indispensable. It’s essentially a giant reference manual for every major web technology. HTML, CSS, JavaScript, PHP, jQuerey and more. It’s maintained by the World Wide Web Consortium (W3.org)–the international organization that sets the web standards. I used it for a bit of everything but most frequently had this site pulled up on one screen and Text Wrangler on the other as I coded the CSS for the site.
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.
jQuery is a JavaScript library which aims to make coding JavaScript into a website much easier and faster. In addition to the library there are a lot of free jQuery plugins out there. In fact, I never came across one to pay for. You just have to implement the JavaScript code on your site according to the plugin documentation. JavaScript is supported by all the modern web browsers. This fact made using jQuery plugins especially useful building the LT11 site because the scroll bar in every browser is different. With a site design like ours that presented problems. Using a jQuery plugin I was able to replace the default browser scroll bar and style it the way we wanted it to fit and look. Here is the short list of the primary jQuery plugins I currently use on the site:
- 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.
8. Google
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.
9. Stackoverflow & WordPress Answers
OK. Sometimes the answers out there are pretty close . . . but not precisely what you are looking for. I kept coming back to these two sites for answers. Stackoverflow seems to be THE place to go for programming related questions–JavaScript, jQuery, PHP, etc. If the question is specific to WordPress, then WordPress Answers is the place I’d go. A few tips before asking a question on these sites: Do your homework. The gurus that patrol these sites are extremely knowledgable and helpful but have little tolerance for dumb, lazy questions. Yes there ARE dumb questions. Be sure to search the web on your own first and then search the site for an answer as well. If you’re lazy and ask a question that can easily be answered by typing into a search engine–they will make fun of you and close your question. That makes it harder to get help with more questions in the future. Take the time to wirte out a well articulated and specific question. Include examples of your source code using the proper formatting respective to the site.
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.
Nice writeup, I’d highly recommend almost all of those tools as well. As a professional developer, it’s interesting to see how similar your workflow is to mine. I guess that’s the cool thing about the internet… you don’t need to be a “professional” to do pro-level work, you just need to learn and then go do it. Great work!
Thanks Zac! Thanks for commenting too. I’m glad someone found it interesting :) It’s also cool for me to hear from a pro developer. I was pretty sure if any pros read this I would be made fun of but I’m glad I didn’t do half bad in your book. Cheers!