BarCamp is a (geek) conference built like a wiki, we can have a democratic schedule built on the fly.  Want to discuss a topic?  Any topic at all?  Come to BarCamp and paste your topic and name in one of the many timeslots.  At first I decided to be a fly on the wall and sort of take it all in, but then I changed my mind and decided to join up with Bram Piyoto and be an “assistant” presenter where design meets tech.  Hopefully I come across as being less of a jackass than I really am, here’s to hope.

And then came Sunday, while sitting in on a panel discussing hacking existing WordPress themes I decided to address a need of how to build a theme from scratch. Because I once wrote a post detailing how to simply build a wordpress theme, I decided to build on the basic idea.  But instead of discussing building Eleven3, I discussed my most recent project, HomeSkillet Records.  As I did it last minute, I had a little tiny room with about 8 guests, it may have been light, but it sure was a captive audience! You’re sort of forced to listen with numbers that small – but I hope it was useful for people.

Mmmm Brain Power

Anytime a bunch of geeks get together there is a lot of brain power getting kicked around, so that’s pretty awesome.  What’s great is the general goodwill everyone has.  People are happy to be here and love a chance to have their thoughts and ideas expressed or learn new ones.  Traditionally, other conferences are a little bit idol worshippy feeling, which is fine (cause I am so into Shaun Inman and Jon Hicks), but this one is the opposite.  There are a few “names” here, but generally speaking everyone here is just here to geek out, prettttty awesome.

I had a blast and met many people who I have seen on Twitter – it’s always good to meet people in real life. I am not a stalker.

I’m freaking out man!

Building a WordPress theme can be broken down into three steps; design, front-end development, and lastly the WordPress implementation itself. I’m not quite sure how others do it, but the following guide is a detailed look into the process I have developed for building WordPress themes.

Design

I’ve detailed my process for building this latest version of eleven3, in that post I discussed mostly design. Starting your own theme should work the same way. It’s important to ask questions such as:

• What problems are you trying to solve?
• Who is your theme for?
• What is your sites most important content?

The word, “theme” is used for WordPress – but it doesn’t mean that your site needs to have a theme. However, having a “theme” may help one along their way to achieving their vision. A good place to get inspired is cssremix.com, who’ve been so kind in showcasing some of my own work. And for the quick and dirty answers: use Adobe Photoshop, use pixels for measuring (if this seems strange to you, just do it and thank me later), try to make sense of Khoi Vinh’s gridding lecture, think about what parts of your site can expand and contract nicely (if you’re a beginner, keep to expanding vertical), and for imagery check out istockphoto.com. Wow, learning web design can’t can be summed up in one sentence.

Front-End Development

I’m probably stating the obvious here, but jumping into WordPress at this point would be akin to being stinky and dumb. (-; Make your site look how it is supposed to look without any real functionality. Get it working in all browsers and upon completion – then think of WordPress.

But how?

There are a ton of “we have layouts” sites out there. And while tempting, it’s the same thing as using a WordPress theme and tweaking it. The only way to get a good understanding of code is simply just to code yourself. Start fresh. Here is a base I use for many of my sites – free to build from.

Personally my first step in coding a site is to lay the design and fresh HTML (use Dreamweaver, Coda, or any other code editor of choice) document side by side and hand code the structure. I know it would help to know where to start and I can only offer this advice – study the source code of the “famous” web designers, they’re critically acclaimed for a reason, they do everything thoughtfully and well.

Mmmmmm CSS Zen

The next step would be to start styling content using CSS – if you’re at this point and you’ve never seen CSS code then I’m not going to lie to you; your road to CSS Zen will be long and hard. If you are still not overwhelmed, create a new CSS document in Dreamweaver (or your preferred coding app). A first step I eventually figured out on my own (and then a punk 17 year old showed me the asterisk – j/k QD) that would have saved me a ton of headache is the clearing technique (which is frowned upon in some countries). It goes something like this:

* { margin: 0; padding: 0; }

The reason to clear the padding and margin values is to avoid all the different “inherit” values of HTML elements. To be more concrete, an <h1> tag in internet explorer may have 8px of bottom padding, whereas it may have 10px in Firefox. Why do they have any values at all? I’m not sure, it could be because HTML came along before CSS. Just ask a couple of ‘timers about spacer gifs.

Coding CSS is a mix of looking at your comp in photoshop to find pixel values (told you so) and slicing up your comp to place images in your end product. Eventually you hope to have a functioning website that looks consistent across all browsers.

WordPress Implementation

And now for the fun part implementing WordPress. It should be safe to assume at this point you have your WordPress installed on your server and you have a fully functional layout working in all the major browsers. Ready, ok go!

The conies and taters

Step One

Duplicate the default theme located in wp-content/themes/default/. Copy the default folder and rename it “your-theme-name.” Make sure your duplicate is located in the same directory “themes.”

Step Two

Start transferring your HTML, CSS, and images into the theme folder. Working within your theme folder, make the following changes (don’t worry, you can reference stuff if necessary from the original default folder):

• Delete all the files in the images folder and replace with your images
• Delete all of the functions in functions.php
• Delete all of the css (except for the commented out header) in style.css and then paste your own CSS in its place.
• Change the information at the top of style.css to reflect you and your new theme.

Step Three

Save a small screenshot of your comp/design (300pxX240px) and save it in your theme folder as screenshot.png – this will help you switch to the theme in your WordPress presentation options. Here is my theme screen shot for this site.

Step Four

Begin to think of your coded HTML as seperate components – a header, a sidebar, a footer, and then content. And if you are just a little bit quick, you may have jumped ahead and seen files in the folder called just that – header.php, sidebar.php, footer.php – but what about content? Well content is the one thing that changes from page to page, while the others are static and don’t change. So really, content is index.php, archive.php, search.php, page.php, and single.php. These files have a little bit of explanation here.

Step Five

It’s a copy and paste job. Copy your header code that should be on every page and put it underneath all the code in header.php. Look at the code in header.php and see what makes sense for you to have in your own header code. Things like the php between the <title> tag and the call for the style sheet first come to mind. Do the same thing with your footer and sidebar.

Step Six

Read this article about “The Loop” and then open up index.php. You will see the code that loops through each entry pulling the values requested – the_time being the time, the_title being the title, and so on and so forth. Copy the HTML from your main page entry and paste it bellow <?php endwhile; ?>. Then copy the different php snippets from the old HTML loop that you need and when finished delete the old entry html from just below <?php while (have_posts()) : the_post(); ?> down to <?php endwhile; ?> and place your new HTML loop in there.

If there is any other structural stuff that belongs on this page that isn’t in the header, footer, or sidebar add it in the necessary places as well. Continue to flush out the other content pages using the same methods.

Step Seven

Upload your new WordPress theme folder into the wp-content/themes/ directory and login into WordPress. If you have done everything right – you should see your screenshot and name of your theme. Click it and then visit your website – you should see your theme on the site.

That’s it!

Conclusion

Building a WordPress is simple if you already know how to design, code HTML and CSS, and FTP into sites. In this post I outlined my own process – not any sort of “official” WordPress process. I’m sure there are folks out there would think of my copying and pasting of the folder and subsequent files as “cheating.” Honestly though, when I am working – I am shooting for efficiency and long-term maintainability. I know in building within the structure set forth by the good folks at WordPress – I will be ok well into the future.

If you have questions about any of this – feel free to leave a comment and get a dialogue going, there is no such thing as a dumb question. This is meant to be a simple guide for those who are interested in WordPress or Web Design in general.

With any creative work, the longer you expose yourself to it, the more stale it becomes. That’s why, about three months ago, I got the itch to redesign my site.

So here we are, one year ago and change I launched version 2.0 of eleven3. Today I launch version 3.0 – and yes I am just as excited as my last redesign. There are a lot of reasons for my excitement, but mainly it’s just a new look, a new focus, and more flexibility. Gone is the rigid and closed-source Movable Type and arriving is the flexible, fluid, WordPress.

Continue reading for the off chance of relating to the requirements of the relaunch, the design phase, the challenges of coding the front-end, and the use of WordPress and a plethora of plugins that now make up the site. A lot of work went into it, my hopes are that it is well received.

Redesign Requirements

The Tools
There are many examples out there of great tools facilitating great work – but let’s not forget the old adage, “It’s a Poor Craftsman that blames his tools.” I had become the poor craftsmen. Movable Type was my tool and I had grown fully tired of it. It kept timing out when I created new entries and the comment spam kept getting worse and worse. Overall the system felt bloated and rusty. In the end – your tools can put you in a rut, the old adage is only half true.

The Focus
If version 2.0 had something to say to new visitors, it would have been, “Hey! Look at my portfolio.” My life has change considerably since then and the portfolio is no longer my focus. There are two main reasons for this change. After blogging for about a year I found out how much I really enjoyed it, and then I realized how secondary and unimportant my blog seemed in the context of the rest of the site.

Notice the hierarchy of the page and the prominence of the portfolio.

My content wasn’t really findable and old posts just seemed to die. My primary focus in the redesign has been to put the spotlight on the content I am generating, both old and new.

The other reason I have decided to place my portfolio as a secondary element is due to the fact I have started a creative shop called We The Media – this is where the main body of work will reside. I will discuss WTM and it’s goals in another entry.

Inspiration and Design

There were many steps and components to the project – but I would say one of the most important is the feedback I received from some really talented designers. Without them pushing me to explore further, I may have stopped short of what I feel has evolved into a solid site. While my name is on it, it was a group effort.

Sketches
As with any web design project, I started by sketching out a few ideas in my book. I will be the first to admit that my drawing skills directly straddle the line between almost mediocre and really really bad (ironically my webdesign skills were described the same way once).

This sketch was nowhere near my final design other than in layout, initially I wanted to do something more ornate.

Inspiration
Danielle, my fiancee, came home one afternoon with a pile of old magazines from the 40′s, 50′s, and 60′s. Immediately I discarded the vintage coolness factor and traded it in for the, “Where are we going to put all this crap,” attitude. As always, I was proven wrong and over time I grew to love these magazines. The ads were so rich and copy-driven, the pages so big, and the content had substance. So one night I started scanning them in and collaging them together in photoshop. This ended up being the foundation for the site.

My good friend Nicholas Galanin should write about why I chose to use those ads – he has a way of describing his work that gives it depth and artistic merit. Me? I just say things like, “I used those ads because I thought they looked cool.” Lame lame lame.

The Grid
After being exposed to Khoi Vinh’s gridding exercise from SXSW ’07, I have applied it to everything I do. I usually opt for the 12 column grid and this project is no different. What a wonderful approach. For those Photoshop users out there, here is a great little plugin for setting up a quick grid, courtesy of Andrew Ingram. I’ve never heard an argument for not using a grid – but I am certainly open to it.

The Elements
Tape – My early comps had tape in them – it just wasn’t the masking tape. It was more like the transparent tape with lines in it and is really hard to tear. It also was really hard to make it work – which is why it was eventually ditched.

The masking tape was an evolution from that and I am quite happy with the outcome, for now at least.

Rounded Corners – The first version I did felt really boxy. It was one of those things you feel, but don’t necessarily have the courage to overcome till someone says something. I slowly migrated from the abrupt edges to the rounded corners. While it may not necessarily go with the look and feel of the ads in the background, it does separate the side bar in a way which gives it a “site within a site” feeling. A goal I wanted to accomplish with the new sliding sidebar approach I am trying.

The Side Panel - I’ve been using mootools for a few projects lately and as stated above, I am experimenting with a new solution to avoid the long scrolling sidebar. I’m not a fan of blogs that scroll forever, unless one updates the content more than once a day.

By creating a consistent look and feel, I was able to have continuity across the four panels and allow the user to access the information without leaving the page or having to scroll down. It also separates the content into groupings of information that become clearer by looking at the navigation. What’s worse? A click or a scroll? Who knows, but what has a fun factor?

The Carpet - It was around 2am when I came across an old advertisement in a vintage Esquire Magazine. For many reasons, it seemed like the perfect footer for the site. It was greeny, shaggy, and had the little up curl which had so much potential for customization. Eventually it became what is visible now.

I think it’s a carpet ad, but I am not totally certain.

Front-End Fun

Browser Compliance
Ask anyone who builds websites what the biggest thorn in their side is? I have no doubt the majority will likely name Internet Explorer 6.0. At the time of writing this post, IE6 has 36.6% browser share. I’m not sure what the breaking off point for IE6 users will be, but for my personal site – it was almost 36.6%. Eventually I caved under statistical pressure and rest assured the site is working just fine in Internet Explorer, but it did not get by without my nasty poem.

MooTools and (Slimbox)
I wrote code for the sliding panels not too long ago and used it for a few projects. Once I had the moo.fx implemented, I moved on to setting up lightbox – another favorite piece of JavaScript trickery. Unfortunatly, MooTools and Lightbox didn’t seem to be compatible, and that is when I stumbled upon Slimbox – a Lightbox clone. Once again I was happy having my fade to black photo slides.

Standards
I was so tempted to keep this site as “Transitional” and keep my target=”_blank” tag in some of my external links, yet I decided to go strict. Why? So I could shake my tail feathers just a little bit more. Seriously though, standards are very important and if I am going to sell clients on their importance, I have to walk the walk myself.

A splash of WordPress

This was my first attempt at migrating a Movable Type blog from a WordPress blog. It was surprisingly easy and it makes me very happy to be in the WordPress camp. There are a few reasons for this.

Ease of Maintenance
I handle all WordPress maintenance in Dreamweaver and do not have to rely on an internet connection to get between different templates. I know Movable Type had a way to do it – yet it seemed like an afterthought. Using a WYSIWYG editor to edit code is nonsense. I had gotten to a point where I hated logging into make any edits. Not to mention having to rebuild the entire site for things as simple as a date change.

MT4 has been released and I hear good things, but as I stated – it was too little too late for me.

Extensive Plugin Library
I am using several plugins to make this baby hum. The development community for WordPress is huge and getting plugin to work is much easier than in Movable Type. Just about every little thing I had the, “I wish it did this,” thought for was actually floating around somewhere and just needed to be tracked down. Brilliant!

Putting it all together

After extensive testing, a migration to Media Temple, and a lot of little tweaking, eleven3 Version 3.0 is ready for all the scrutiny and praise it deserves. It will always be a work in progress, but at least now I feel liberated to make the progress. Now if only I could figure out a way to make the size of the document go from high to low without sacrificing aesthetics or functionality.

I decided to write this post because I always liked it when designers wrote out in detail their processes – it’s how I learned myself. For some people, this will be a big repeat of what they already know. But I am hoping that others will find it useful in discovering their way as a designer. It’s a great field and everyday I feel fortunate getting to do something I absolutely love.

When I first started getting into WordPress, I just jumped in. There wasn’t a lot of thought on how to go about doing everything right, it was just the emphasis of getting things to work. When this meant creating new functions, I just added those to the existing WordPress general_template functions list. Stupid!!! This makes upgrading a risky process, as you will probably overwrite the files you create at some point in the future.

Enter functions.php. I was reading through the WordPress site and fell on the Functions Theme Development section. You mean all I have to do is create a file and WordPress will do the rest? Smart, simply smart. This isn’t the first time the the foresight of the WordPress platform has surprised me. Thanks so much for doing your thang.

Just put functions.php in your theme directory, and WordPress will load it automagically.

“Because the time was right.”

Uhh, right. Maybe because WordPress is kicking your ass? At least that’s what I have seen. I’m well versed in both platforms and WordPress is better at it’s core, and better in its community. The new dashboard for Movable Type 4 looks really nice, and I may install it on this blog (unless I switch to WordPress sooner, I am itching to redesign). Realistically, unless the open source MT4 is completely BONKERS, it may be too little too late.

Time will tell. Link.

Has anyone experienced this disconnect? Here is what the error looks like on a site I was trying to go to:

This would deter me from using wordpress from heavy traffic sites I build in the long run.

Enter MyTube.

Some guy named VaamYob created this plugin for reasons he states on his site, “This is a plugin that I wrote because I thought videos would look cool on my site. ” While VaamYob did a great job with the plugin, the documentation across the net was sparse. I decided to give a quick rundown of how I integrated MyTube into http://www.nicholasgalanin.com.

Being a bit afraid of php, I did the following in this order, searched VaamYob’s site, searched wordpress support, googled it, and then looked into the code. As one can guess, there were no answers any of these places for what I was trying to do. Nicholas wanted to have videos showing in a sidebar, not as an entry, anyone can post YouTube code in an entry.

1) The plugin files I used:
mytube.php
thetube.php

2) Editing mytube.php

Around line 148 there is a comment about providing flexibility (hey what do ya know!?) which lists out different functions to call. I’m not sure what each one does, I picked the one I wanted out at the top, yt_output_user_thumbs.

Call the funtion in your sidebar, or wherever else you want to call with:

<?php yt_output_user_thumbs(); ?>

3) Editing thetube.php
This file is just like a template. I stripped out everything but the call to the video and then copied my header and footer from the video list page and pasted it above and below, respectively. There is some code that says “don’t delete” so…don’t delete it. Upload everything and watch it work.

4) Styling everything
The plugin comes with some recommended classes, so I used those. Here is the code to make the image float to the left and have the description (which can be turned on in the options within wordpress) float to the right.

div.yt_video_thumb_img img {
float: left;
margin-right: 10px;
margin-bottom: 10px;
clear: both;
}

div.yt_video_thumb_img div.yes {
float: left;
overflow: hidden;
width: 150px;
}

And that’s it! Pretty simple, now there is documentation. Check it out.

On my Mac I am using Colloquy (which I have no ideas how to pronounce). As with most Mac apps, it’s a very pretty application and I am very pleased with it. On a PC I am running IRC through Trillian, my IM client.

What is driving me to writing this post is something I have noticed. It seems the strenth of an idea or product or a community is directly related to the activity in the IRC room. Geeks use IRC, geeks fuel successful communities.

Recently I started dabbling in WordPress cause I have begun to feel like Movable Type is a sinking ship. Like another content management system I use, CMS Made Simple, the WordPress community in their IRC channel is huge. There is constant activity and questions get answered relatively quickly. The same can be said for the Rails community.

Now for the contrast. I had some crazy bug in my Movable Type install that wouldn’t allow me to republish my main index file if it had a normal JavaScript file call. At first I panicked and started deleting things only leading to a listing of all the contents of my root directory (ughh…no bueno). Then it popped into my mind how helpful IRC was for these kind of things with the other geekeries I am trying to learn. Upon logging into the Movable Type IRC room I pasted my question and patiently awaited my answer.

That was 30 minutes ago, and still nobody has responded. There are eleven people in the room not participating. This leads me to believe one can successfully gauge a “movement” by the number of people in the IRC room.

In the end I found my own hacky solution, just like I did in my pre-IRC days, but it wasn’t what I wanted. Why did Movable Type break like that?

Upon building my most recent site in WordPress and gaining exposure to that community, it pushes me even further in the direction to ditch Movable Type entirely.

First off, it seem the grass is always greener on the other side. Everything WordPress is doing seems to be done right. As I am fairly new to the blogging game, I am not sure what it was Movable Type did to piss so many people off, but something isn’t quite right. Last time I felt like I was on the wrong side of the fence, I switched to Firefox, wait no, it was to Apple. I’m getting the itch again.

There have been plenty of rantings I have seen dissing Movable Type, yet I have not seen one dissing WordPress. It seems WordPress gets the same kind of love us Firefox users have for our favorite browser. There is a huge community out there blogging about how great their platform is. When I switched to Firefox I high fived everyone and said, wow you were all right. When I switched to Apple, I did the same thing, and then some. So why not go for the hat trick?

As of right now I am saying fuck it. I’m switching to WordPress.

A post that eludes me led to my train of thought, as well as Movable Type 3.33. They implemented a tag feature that is way worse than the plugin that previously accomplished the same thing. It irked me to the point that I started getting curious.

Look for additional thoughts and do please leave me yours.

Cheers.

Joomla!’s biggest pitfall as so far has been how it’s built for yesterday’s web. There is very little documentation online about how to change the guts of Joomla! and what gets spit out. I hope to change that as I go along. I have spent quite a bit of time figuring out where to get rid of the unecessary tables.

A few things:

I don’t know php, but I can hack my way through it, copy, paste, and delete.
I could purchase a ready built CSS standardardized template ( which populate the top 100 google results or so) built by people who have already gone through the painful process.
I’m not going to do that.

On the positive side, it does offer a great content management system for the end client. It’s pretty and easy to use once you get through initial structural hurdles.

So anyhow, I will be blogging through learning Joomla! as a webdesigner.

If anyone knows of a CMS that is opensource, developer and client friendly, and think I am wasting my time, shoot me an email, george@eleven3.com.

Until then.

BTW. Just ordered a book on Amazon. I’ll write about it after a bit of light reading.