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.

I had a colleague ask me about this site, asking if it was mine. While I do live in Portland, I do love CSS, I am shocked that Google would bestow this honor upon me. And as James Hall, a CSS guru from The Good Harvest, told me, blogging about the fact I am known for Portland and CSS will make my Google Search ranking even stronger for those terms!

So here I am. Feeling fancy! Indulge me in my narcissism and run a search for portland and css. Oh happy joy day.

Ok, back to the code.

——

Update: Ok, no longer number one, stupid Google! That lasted all of 20 minutes.

There were five panels I attended. Each of them offered a different insight into the topic they were covering. More than anything they made me inspired, warm, and fuzzy. I think SXSW draws all of the rockstars in the industry and they do as good of job being in the audience as they do on their panels. It’s refreshing to know that they are still out there seeking knowledge from their peers.

Panel 1 – A Decade of Style
I particularly enjoyed this panel because it was really relevant to what I do. The people on it were all seasoned CSS vets and were able to give a perspective that many of us lack; history.

One of the panelists, Chris Wilson, works for Microsoft and he talked about some of the things he fights for with Microsoft. I have a habit of cutting down MS quite often just because it seems as if there is a complete disregard for standards. It was interesting to hear his perspective and the concerns he has, working on the team that builds the world’s most popular browser. Ultimately he worries about backwards compatibility. I still hold my grudge, but he seemed like he was fighting for the right things internally.

Another panelist, whom I had heard of, but only that was Molly Holzschlag. I saw her on this panel and also on the last panel of the day. I think I identify with her most out of anyone at the day. Likes a lot on her plate, is rebellious, and is very individualistic. She also has an energy about her that seems to help bring up the quality of the panel. I really enjoyed what she had to say.

Panel 2 – After the Brief: A Field Guide to Design Inspiration
This was the panel that I think will be the most beneficial to me in the long run. Initially I decided to go to this one because I really wanted to see Cameron Moll, unfortunately he came down with the flu and wasn’t able to attend. However, the other two panelists, Jason Santa Maria and Rob Weychart did a fantastic job of alleviating my initial disappointment. These two guys have been friends for a long time and their dynamic was really entertaining. They covered not only how to find inspiration, but how to maintain it and foster it. In doing so, they really helped me understand on how to become a thinking designer versus just a doing designer, a downfall I know I have, but haven’t understood how to change it.

Panel 3 – Kathy Sierra: Opening Remarks
Kathy is from Creating Passionate Users and did an excellent job of explaining how to humanize what we do. She gave a good presentation and unfortunately I watched it on a video screen, so it didn’t have the same effect. Either way, she highlighted on many things, including the common differences between the audience that FAQs are written for and the audience that actually needs real help.

Panel 4 – TV: The Next Generation
This panel was really interesting because it was the first I went to that pulled in some of my “other” background I don’t get to use too much, business. How do the new distribution channels, advertising models, and content providers mix up? Ultimately it’s a complex topic and it sounds like the linear model of watching TVShows at a set time is on the way out, but it’s a matter of when. I agree with this up to the point that some people don’t want to think about what they’re watching, they just want to come home and turn on the TV, no choice required. Some people do not care what they’re watching, as long as they’re watching something. You can’t channel surf through choice.

The other point they were making was that some content providers were to small to garner any kind of advertising dollars. While this is true for traditional advertising relationships, the internet provide a solution similar to what google adsense did for websites, would do for the web. Anyone want to talk? Overall it was a great panel and really got me thinking about the industry.

Panel 5 – From to Riches: Life After Code
This panel had Molly Holzschlag as well. It was mildy entertaining, relevant, but by this time in the day I was pretty drained and not sure if my attention span could handle it. There was a lot of discussion on if I am a designer, should I learn to code, and vice versus. Since I am a fan of doing it all, some of the suggestions were lost on me. Another thing I pulled was that you can’t be a hotshot coder and a manager…ughhh.

Until then.

And then came the png. While the PNG most definitely has issues across the different browsers, there are ways to get it to play nicely with whatever site being built. Yes, it usually involves a CSS hack. No, it does not validate. However I believe it is more important to start thinking of a layout as a series of layers overlapping, versus the traditional jigsaw puzzle.

Here are some good resources to get up to speed on PNG’s in Internet Explorer.

Make Transparency Work in Internet Explorer
Cross-Browser Variable Opacity with PNG: A Real Solution

Bedford Brown was an experiment in starting off simple. Each page required four png’s. The header, the content background, the footer, and the hood ornament. There are also four layers to each page. The background, the shell (composed of the header, content, and footer), the content itself, and the hood ornament.

Nicholas Galanin’s site was the challenge. It has been awhile since I almost gave up while trying to code a website. In dealing with cross browser compatibility while adhering to web standards, I got a headache building this thing. However, I pushed through it and eventually I launched a site that I am quite proud of. This site has several different PNG’s and is a clear cut example of overlapping a site versus cutting it up. In fact, I’m not sure this site could have been built by just cutting it up. Perhaps someone can correct me if I am wrong.

My advice is that if you are just beginning, try something simple. Give your logo a little drop shadow love and save it as a png (make sure the background in photoshop is transparent). Then position your background slightly over the left edge and top (if that fits what you are designing). Just keep it simple.

Ultimately, designing with the overlapping mindset allows us to break the mold a little bit of what has been traditionally on the web. We get to have fun!

Galanin has been bugging me for awhile for a new site. He’s been on his own hustle and utilizes the web really well. The only problem was his last website I built (long before eleven3 came about) was only editable by me via email updates. That and the fact it was built in tables, wasn’t everything he wanted, and was just getting dated. For a while now he has been due. A few weeks back I got inspired and started designing. I’m happy with the outcome. It still needs some polish work, but I like to think if you build a good framework for a website, expanding and enhancing it is the time you spend on it, versus doing email updates.

Nick and I had many conversations about what he would LIKE to be doing with his site. Eventually we agreed a blog would be his best bet. It was a good chance for me to try out WordPress.

The site is built with valid CSS and XHTML and is powered by WordPress, my new favorite CMS/Blog. There are a lot of PNG fixes in there. It required a bit more HTML, yet it looks right cross browser, even in IE.

In the end I think Nicholas will do some really great things with the tools I handed over.

Check it out the Tlingit Art.

Slowly I have been feeling out the parameters of the png hack. There have been about three times where I must have spent between 3-5 hours trying to figure out why either it wasn’t working, or it was causing other weird issues. Namely the linking issue. There is a thorough guide here, a lot more thorough than anything I would write on the subject. I’m just here to complain, oh and my own solution is listed as well.

It seems if you are using the scale mode within the filter, and the element with the png is positioned relative, then the links within that element cannot be clicked on or rolled over within IE. Where does this leave us? Frusterated, disappointed, thinking of tables (scratch that), hating microsoft, etc…

Currently I am coding a layout that is incredibly complex. It has tons of relative positioning, pngs, and css columns. The challenge is to get it all working cross browser, as well as make it all valid.

There were three main problem areas, but the most difficult one proved to be my right column. Here’s what I did.

Start with the positioning of my Right Column and leave all png stuff out.

div#rightColumn {
float: left;
width: 410px;
position: relative;
left: 30px;
font-size: 12px;
}

Create a second div within the RightColumn that will fill it 100%. This way you avoid the relative positioning and the a tags can be clickable.

div#rightColumn div. content {
float: left;
padding: 34px 60px 15px 30px;
width: 320px;
background: url(images/bg_floatedLayers.png) top left;
}

This is the IE filter hack.

* html div#rightColumn div. content {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/bg_floatedLayers.png”, sizingMethod=”scale”);
}

Lastly I added z-index’s to my a tags so they can be above the png. Not sure why you have to do this, but hey it works. Oh and for z-index to work, it needs a position.

div#rightColumn div. content a {
position: relative;
z-index: 1;
}

It is a ton of extra work between figuring out the solution and implementing it. Hopefully people will stumble on this solution quicker than I did. Makes me wonder if Microsoft is liable for all of the time we spend catering to their browser. It’s ridiculous. Yes, I am annoyed right now.

The site I am relaunching is nicholasgalanin.com and I will further illustrate it when I launch.

About a year ago I was dealt the task to code Music In Every Direction for Konami (Keep in mind many people have been in this system since I coded it originally). They had multiple color schemes for their different game series, yet the layout for all of them was the same. That is when I stumbled (a little bit of A HA! and a little bit of I probably saw it elsewhere) on a practice of creating a global stylesheet and stylesheets for color scheme. Whereas HTML and CSS are split by content and design, respectively, splitting a CSS stylesheet up gets broken into layout/positioning and color schemes.

I split the process into three steps which I think keeps it clean and easy to go into for those who follow my path. In other words, I am being a friendly coder.

1) Building the Site – The first thing I do is code all of the HTML elements to the site. This means breaking up the sections with the naming schemes I have grown accustom to. Creating ID’s for all of the different sections and drilling down (Header, LeftColumn, RightColumn, Footer and of course a class for clearing).

2) Code the CSS – Coding both the layout/positioning and color schemes in one stylesheet all at once help clear up which portions are to be broken apart. Upon finishing a page I create a second style sheet and cut all of the color scheme elements from the original stylesheet and paste them in a similar structure.

For instance:

global.css

div#leftColumn {
width: 200px;
}

blue.css

div#leftColumn {
background: blue;
}

3) After the clean break up of the original stylesheet into two stylesheets, all that is left is to repeat and do it again for all of the different color schemes and pages. The html should be the same (other than the content) for all of the pages.

———–

In the end, one gets a very clean system. I think a lot of people are doing this way, yet I am still seeing the forever scrolling CSS page. Ultimately a good mindset to be in when building systems is to think about the people that will follow you. Often times when going into someone else’s system it feels like entering their home. I see their messes and every door opened starts with a question mark.

I’d be curious to grow.

To take it one step further, we can also take sed RSS feed and pull it into our own blogs/sites. Kind of like the homepage of this site. What one sees is the parsing of three RSS feeds, one for del.icio.us, flickr, and last.fm.

I added those on there because I wanted all the time I spend doing other things on the web to reflect on my blog. Yet, in doing so, I ALMOST had to sacrifice something else that was very important to me. Standards.

The first issue I dealt with was the RSS feed for flickr. For some reason it isn’t looked at as valid markup. I had to run it through a feedburner account to pull it into my blog and not break my site. In the end it was a good solution as I now have big brother tracking on everyone that subscribes to my photos. And to be honest, I think it is just Magpie RSS that is pinging the feed to update it. I can’t imagine subscribing to someone’s photos unless…perhaps I was stalking them.

The second issue was with my del.icio.us feed. This is a perpetual problem and something I have to take extra steps to avoid. I use Firefox and I have the del.icio.us tag extension installed. It’s way too easy to tag a site and add it to my growing list of bookmarks. The problem lies within the sites I tag and their title tags. For some reason people throw funky characters into their tags. Why can’t they change their ways to suit me???? (-; Anyhow, when I bookmark something, I am on the lookout for renegade characters that break my validation.

I really only had those two issues in regards to feeds, yet I have another one that has been a thorn in my side for building blogs. That thorn is YouTube embed code. Now don’t get me wrong, I love YouTube and have been sucked in plenty of times surfing between clips. But their code they are passing to the millions of users to post on blogs and myspace breaks validation. I could care less about MySpace (67 html validation errors on my page) but YouTube I expect more from.

In all honesty there is more to the problem than just YouTube. It’s flash, it’s validation, it’s Internet Explorer, and on and on. In the end I cannot build a blog for a client that is completely standards compliant if they want to paste in YouTube code. It’s already a stretch with them entering in their own content.

What’s the point to this rant? James Hall is the point. James Hall is the solution.

For anyone else who wants their site standards compliant AND wants YouTube, a solution is out there.

–

Update: To illustrate another case of external content breaking my validation, Lupe Fiasco coming in through last.fm has a problem. Looks like I am going to have to stop listening to that album.

In my last post I talked about the entry fee for getting a job at my company required being up to par on web standards. Yes, we recommend one uses firefox with the web developer toolbar as well. Oh and there is also the useful Measure-It! extension. With all of these tools in one’s pocket, the question becomes, why haven’t some people caught on?

Microsoft Internet Explorer. This would require an entry in itself.

Perhaps one day all sites will be coded in valid css/xhtml and the validation links at the bottom will seem innappropriate and unecessary. Either way, Microsoft has a lot of making up to do to those of us in the web space. Perhaps they could make their browser standards compliant, and make something as appropriate as validation links go away.

Or they will just be Microsoft, and we will have to fight the good fight for the long run. I hope they come around.

(Checking out IE7 soon, somewhere I saw a dual install for both IE6 and IE7, so what happens to my IETab extension??)

The reason I bring this up is the fact I am becoming a bit of a code snob. Ugly, sloppy code really grosses me out. There was some code pulled up on a projector today and I had to turn away. So when did this happen for me?

I was introduced to the wonderful world of CSS about two years ago now. Before that I was building sites like everyone else, tables and spacer gifs. I can completely understand the necessity of those means before CSS came along, but now I can’t bear to work like that. Seperating design and content is essential to get past any sort of design changes one has to a multipaged website.

Thought One – Applications.

One thing that I have come to find over the last few years of being a “professional,” is that I am not so good at writing my own application code (working on that with rails, but more on that another time), but I am good at changing the look and feel of others. So what does that make me? A good skinner. And I am cool with that by the way.

So when I come across an application I want to work with, a blog or cms platform, and the code it generates is dated and ugly, I become a bit turned off to the whole idea of spending the time to learn it. Case in point: Joomla!. What a great CMS for cookie cutter websites. They have tables and other useless stuff so engrossed throughout the code, the idea of building beautiful, unique, thoughtful websites becomes extremely difficult. After two weeks of pulling my hair out trying to figure out Joomla! and delete all of it’s unecessary html code in the php, I switched to CMS Made Simple. These guys have it figured out and I was able to get done in one day, what I hadn’t been able to do in two weeks with Joomla!. Mixing html inside of your application code is a bad idea. And if you want to attract us standards guys, mixing table cells and server-side scripting is a especially bad idea.

Now all I have to do is break it to the guy who writes my checks that I had to make a call.

Thought Two – Consistency

I pat myself on the back everytime I see a valid xhtml or css link on someone’s page. It will be ok, eventually all of us will get in line with this whole thing. What the standards link tells me is this: not only will I be able to go in and change the whole page around with CSS, but they probably aren’t using tables and spacer gifs either.

In fact, I would go as far as saying their code probably looks a lot like mine. Begins with: <div id=”container”> and goes through the list of identifying everything with id’s and classes? What’s the point? The point is when the majority of the web developers start going down this path, a very important consistency emerges.

Thought Three – The Future

I have gone from hacking websites together to building websites built for the future. This entails a few things.

1) Build websites with the intention of coming back and editing it in five years. Yes, some things will change, but there will be a consistency to your work.

2) Build websites with the intention that someone will be editing it in five years. I can’t stress this enough. I work at an agency and our team just got on the same page about building sites (file structures, naming schemes, css practices, html practices) the same. This doesn’t have to be one man to rule them all, it just needs to pull from everyone’s best practices.

3) Look at the greats in this field; Shaun Inman, John Hicks, Veerle Pieters, and Cameron Moll only to name a few, see how they code, see how they design. My first portfolio pulled heavily from John Hicks, as to say, I killed cats or something to that extent. These people really have a feel for what is good.