Designing for WordPress: Complete Series & Downloads

By: Chris Coyier on July 18th, 2008 — Posted in: Quick Tip / Trick

Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.

Download - “Personal Homepage Theme”

I figured I might as well call it was it is! So the theme we were building this whole time now has a name: “Personal Homepage Theme”. It looks like this:

I literally designed this for use on my personal site, so you can see it live on chriscoyier.net.

Download Theme

Note: The orginal Photoshop file is included in the download in a folder called “orig” in the theme folder. The header of the site generically says “Your Name” instead of my name, but the sidebars have stuff in them still personalized to me. Of course feel free to change, alter and use this theme for any purpose. Link backs are always nice but not required.

In case you don’t already know. In order to use this theme you upload it into the /wp-content/themes/ folder of your WordPress install (you will need to use the self-hosted version of WordPress and have FTP access to your site). Then you can activate it under the “Design” section of the admin area.

Theoretically Related Articles:

Discussion Elsewhere

links for 2008-07-20 | Anidan Design : eco-friendly web & graphic design — July 19, 2008
Daily Design Links for 7-19-08 | Anidan Design : eco-friendly web & graphic design — July 19, 2008
Personal Homepage Theme para Wordpress | Codigo Geek — July 20, 2008
Planeta WordPress » Diseñando un tema para WordPress — July 21, 2008
Dreiteiliger Wordpress Videocrashkurs « Wordpress, Theme, Installation, Auch, Videoworkshop, CSS-Tricks, Volderette, - « Volderette — July 21, 2008
This CSS tutorial + tricks site is better than best | brutally succinct — July 22, 2008
WordPress “Personal Homepage Theme” (download) Greg-J.com — July 22, 2008
Daro - Graphic / Web Designer » Blog Archive » Diseñando para Wordpress — July 25, 2008
Best of July, 2008: This Month in Web Design | Vandelay Website Design — July 29, 2008
Designing for WordPress Video Series :: WPLover — July 30, 2008
WP Foundations // Premium & Free WordPress themes for designers » Designing for WordPress Videos — July 30, 2008
Bookmarks for July 31st | Quality Peoples — July 31, 2008
Best of July 2008 | Life as a Web Designer — July 31, 2008
Welcome Back! | Division Overlay Blog — July 31, 2008
Theme Video Tutorial — Matt Mullenweg — August 2, 2008
Afe Stein - intering the nets since 1985 » Blog Archive » Blogger to Wordpress: making the switch — August 2, 2008
Video Tutorial for Custom WordPress Theme | Themes | .:Lir3nt's Hack:. | All about Web 2.0, SEO, PHP5, Ajax, Adsense, Unix/Linux, Free Stuff, OpenSource, Designs, Wordpress, Hi-Tech etc — August 3, 2008
WordZine — August 3, 2008
le blog à Ollie » Liens du jour — August 3, 2008
» Designing for WordPress: Complete Series « Аз, пиратът — August 3, 2008
Diseñar un tema para WordPress | WOW Magazine — August 3, 2008
Designing for Wordpress Screencast | The Geek Review — August 3, 2008
Monday Stuff | Bernskiold Media — August 3, 2008
Chris Coyier » Blog Archive » How I Built This Custom WordPress Theme — August 4, 2008
Huzzah! New Theme! | Paintball Craze - Your A to Z in Anything — August 6, 2008
Webmedia Marketing Online - Creatividad Interactiva - Diseño Web » Blog Archive » Guía avanzada de diseño blog para WordPress — August 8, 2008
Building a Better Blogroll / WordPress Podcast - CSS-Tricks — August 8, 2008
Watch Chris install and set up WordPress « Ramblings of a WebWench — August 12, 2008
Leonaut.com — August 13, 2008
Designing Theme for Wordpress (Video Tutorial) - WebStockBox — August 14, 2008
Personal Homepage « Simple Themes — August 15, 2008
Wordpress Themes: 20+ Tutorials, Clubs, Themes, and Resources | Outlaw Design Blog - A Graphic Design Blog — August 18, 2008

Responses

1

Hi Chris!!

wow this is awesome, I was really having a trouble in setting up a theme from the very scratch, you explained everything i needed!

Also, I loved the idea of putting the direct download links for the mov files because i really had a hard time trying to play them online..

Thank you for everything!!

You deserve a long long rest after all this

Thank you again,
Hazem

Comment by Hazem — July 18, 2008 @ 6:46 am
2

Hi Chris,
Thanks for all this! It has been a true pleasure following along as you have been working on this example. Very well done indeed.

Entertaining, relaxed and full of useful advice and inspiration along the way.

We need more people like you out there…

Cheers
Torben

Comment by Torben Brams — July 18, 2008 @ 7:36 am
3

This is really great stuff. It’s always fun to see how others work through things like this. Starting a theme from scratch is quite the project, thanks for breaking it down for us!

Comment by Shannon Snow — July 18, 2008 @ 7:42 am
4

Chris,

Thanks for allowing us all to have this glimpse into your design and coding process, even if this isn’t how you normally go about it. Being able to look over the shoulder of another coder is always both humbling (they always know something you don’t), inspiring (now you know and can attempt it yourself), and reassuring (they always make it “look easy”).

@Hazem - Check out wget. If you aren’t afraid to poke around someone’s HTML source, you can find the link to the movie file inside. Then, you pass the link to wget and it downloads it for you. It fixes 90% of all “I can’t see X” problems for me.

Comment by Michael Schoonmaker — July 18, 2008 @ 7:54 am
5

Looks great.

Comment by chremon — July 18, 2008 @ 8:52 am
6

Chris,
I tip my hat to you sir…. you broke it down to last compound. great tut, you are an asset to the CSS/web dev community. thanks for the download and sharing your knowledge.

@Hazem- i usually just download the podcast on iTunes. and not worry about it streaming live.

Comment by Ralph — July 18, 2008 @ 2:43 pm
7

great job chris

Comment by Diego — July 18, 2008 @ 8:49 pm
8

Good Job

Comment by Neri — July 18, 2008 @ 9:04 pm
9

This is so good! Thanks Chris for all of your help!

You really did a great job on this.

Comment by Jake-DesignerFied — July 19, 2008 @ 2:28 am
10

good news people, i watched part two [ the only one i am interested in ] and i just finished editing a wordpress theme

before watching, the php code seemed like a maze, however, now i do understand most bits [not all], but at least i know what to change, what to remove, and what to leave

thank you again for the tutorial!!! I advice all to watch it

_________________________________________

thank you people for the advice, i downloaded it and it works well offline

Good Luck!

Comment by Hazem — July 20, 2008 @ 2:12 am
11

Much Appreciated, very nice stuff easy to follow and you’ve covered everything!

Comment by liam — July 20, 2008 @ 6:37 pm
12

I enjoyed watching through this mini-series, it’s good to see the finished site being put to use in the real world, with what looks like a few design tweaks already!

Comment by Chris Spooner — July 21, 2008 @ 4:53 am
13

As usual: extremely helpful and well explained!

I would love to see a serie like this for Drupal too

Comment by Tibor — July 21, 2008 @ 9:46 am
14

Amazing serise of videocasts. Keep up the good work!

Comment by Matthew 'Web Design' Adams — July 23, 2008 @ 3:52 am
15

can u make this theme in blogger format

Comment by jitendra — July 28, 2008 @ 10:30 pm
16

Chris I’m already through part two and I have to say, I’m glad I took the time to watch these tutorials. My CSS understanding just sky rocketed. The push div really helped me solve a ton of issues and as always, I’m going to go through old css and update it properly.

Thanks!!

Comment by Nina — July 30, 2008 @ 5:47 am
17

Hi, Chris!

Just discovered your site and - wow! - immediately enjoyed it!
And: Your theme is absolutely wonderful. Thanks for sharing!
Greetings from Austria!

Comment by gsibergerin — July 31, 2008 @ 5:27 am
18

I really enjoyed this series. The videos are very informative. Mahalo for sharing!

Comment by Stephen — August 3, 2008 @ 6:11 am
19

thanks chris .. i learned a lot from your tutorial. some days before i refered wp-designer .. small potato’s tutorial .. it was all about coading and techy.. your tute is some more to artistic view. thanks for sharing mate. and i must say that your pc is great..

Comment by veerendra — August 3, 2008 @ 11:36 am
20

Wow, Chris… this is great stuff. Thanks so much. I’ve already learned some tricks just from this series that will help tremendously in my own design efforts. Looking forward to exploring the rest of the site!

Comment by Stuart — August 3, 2008 @ 7:47 pm
21

Perfect. I love it! Well done!

Comment by Tadd — August 4, 2008 @ 10:53 am
22

This is really great. Thanks for sharing!

Comment by CSS Model — August 23, 2008 @ 3:30 am
23

Thanx a lot for this! I am new to blogging and Wordpress and I have been looking for a tutorial like this. You couldn’t have made it any easier. Thanx again!

Comment by Merch — August 23, 2008 @ 8:25 pm
24

I load in this new theme and it goes blank no other theme does this but yours why is that? Love the theme btw

Comment by josh — August 26, 2008 @ 1:41 pm
25

Big Thanks!! great tutorials Chris…

Comment by Ivor — August 27, 2008 @ 5:07 am