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.
Part One: Download, Install, “Reset” Theme
Video Page
Direct Video Download (.mov)
Part Two: Structure
Video Page
Direct Video Download (.mov)
Part 3: Finishing Touches, Extra Stuff
Video Page
Direct Video Download (.mov)
Download – “Personal Homepage Theme”
I figured I might as well call it what 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.
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.
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
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
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!
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.
Looks great.
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.
great job chris :)
Good Job :)
This is so good! Thanks Chris for all of your help!
You really did a great job on this.
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!
Much Appreciated, very nice stuff easy to follow and you’ve covered everything!
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!
As usual: extremely helpful and well explained!
I would love to see a serie like this for Drupal too ;-)
can u make this theme in blogger format
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!!
Hi, Chris!
Just discovered your site and – wow! – immediately enjoyed it!
And: Your theme is absolutely wonderful. Thanks for sharing!
Greetings from Austria!
I really enjoyed this series. The videos are very informative. Mahalo for sharing!
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..
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!
Perfect. I love it! Well done!
This is really great. Thanks for sharing!
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!
I load in this new theme and it goes blank no other theme does this but yours why is that? Love the theme btw
Big Thanks!! great tutorials Chris…
Not sure if you’ve noticed, but there’s an issue with the twitter feed, half the time (even on your own site), it returns nothing.
Ended up hacking it to work my way once I noticed it, not as pretty, but it works every time.
@Roger: Yeah that’s a sucky problem, dumb Twitter API is just slow. There are probably more efficient ways to handle it, like maybe check only few minutes and cache it. If you wanna share your hack, I’d love to see it!
@Chris: Oops, I put the link to the site I usually use when I meant to link to my blog. it’s http://www.rogerstringer.com/ and the javascript file is http://www.rogerstringer.com/wp-content/themes/PersonalHomepageTheme/stuff.js
I prefer to keep all my javascript seperate from the HTML, and in terms of twitter, I like to display the relative time the post was made, so there are a few extras in there but can be easily toned down. :)
@Roger: Nice! Thanks for providing. I ripped it off completely =) and I added an extra little bit to “linkify” links in inside the tweets (which is snagged from here). Now we need to write a function that will link the @xxx bits to the users Twitter pages, that’d be cool.
@Chris: That one’s easy. I made some changes to the linkify function and now have it running on my site that it can make @xxx bits into links :)
I can’t say how happy I am to see this article! Now I am really going through it.
Thanks!!
Chris – thank you so much for this. I’ve been looking for a decent WP template building tutorial for ages.
Really well explained, and very very useful
It seems strange to me, but the trick with the footer doesn’t seem to work. I mean, it just scrolls up and down with the rest of the page. I’m using Firefox 3 on Ubuntu Linux.
Any idea?
Anyway, great work :D
Very very good tutorial …that is just amazing
i have posted it in my site with a link to your site
Great work. But I think there is something wrong with the theme that you let us download. It is not possible to click any headline/permanent link (you only get to the front page over and over again). Any solutions would be very nice!
i love people who share their knowledge with other people, great site :-}
Chris, thanks for these tutrorial. You are sure to have helped a load of people with this. I have been looking at setting up a blog for some ntime but never get round to it. Now I have no excuse. I have bookmarked your site and will be visiting regularly.
Hei chris, thanks for the tutorial. It’s really – really help me.
Thank You very much :-)
This is really great. Thanks for sharing!
Looks great
Chris,
Thanks for the download for the theme. One problem though. When I go into the php editor to edit the twitter widget, I can change the html so that when clicked it goes to my twitter page but the twitter updates are still yours. Any advice on how to change it so my updates show?
Thanks
To change the account it pulls the tweet from, change the username (chriscoyier) in the header.php file as part of that first $.getJSON function.
Chris,
Thanks for answering my first question. Where would I go to edit the header (I looked in header.php) to edit "YOUR NAME" and the small name of the site?
Feel bad asking another question so soon….
Where you have "CSS Tricks" and "My Photos", is it possible to make that a side bar? I know you can edit it in "sidebar.php" but is there a way to make a side bar? I'm not a tech guy
Just Saw it but very helpful Indeed!
Thanks!
This Thanksgiving I'm thankful for your top-notch tutorials! I've always said that anyone can learn anything, with the right teacher. I've tweaked other people's themes for ages, but your friendly help gave me the confidence and inspiration I needed to start from scratch.
Don't be too critical if you look at my efforts, though – I have zip artistic or design skills. So please forgive me for copying a lot of your ideas. I hope I'll get more of my own as I flesh out my theme (it's not done yet).
I'm glad you included cool stuff like Simplepie, which I got going on my blog. I actually stopped the video, squinted, and copied some of your code (to limit the number of feed items fetched). Now I'm fired up to watch all your screencasts about jquery and make a cool tabbed sliding widget with my simplepie feeds, like the one on this site.
I know "content is king" but I gotta admit I'm a css/php junkie. WordPress is more fun to play with than any video game!
Disregard my previous comment Chris… I found it!
amazing theme. how to change columns position
KickASS Theme!!!
going to give it a try! =)
MoiN
http://www.SmashingDownloads.com
Great Theme,
I have problem with comments.php
please help. Thanks
Thank you so much for posting this. As a techie with no CSS or PHP experience, I’ve been going through these videos and others on CSS-Tricks to get my WordPress theme set up to something uniquely mine, and I couldn’t have done it without all this great info!
Believe me, I’ll be back. :)
Very cool tutorial. You’re giving me hope in switching over to creating websites for clients with WP as the CMS! I’d been dragging my feet on this for months, mainly b/c I just didn’t have the time to dig into this and figure it out by myself. Most other tutorials out there are pretty basic and don’t help you do what you really need to do/know.
Chris Coyier your tutorials are amazing. i love ur all tutorials but specially this one.