How I Built This Custom WordPress Theme

The site you are looking at now (unless this is like 2010 or later), is a custom built theme for WordPress. I had a rather mundane personal site for a long time I thought it was time for an upgrade. I love working with WordPress, so I thought while I was doing this I would not only make the theme and original files available to everyone, but also shoot a series of video screencasts details the process from start to “finish”.

The entire series of videos is available for direct download or watching on the web as well as a a download of the finished theme.

Designing for WordPress: Complete Series and Downloads

Comments

  1. carlnunes says:

    Thank you Chris!

    I’m a novice web design guy moving head strong into the freelance realm. I really appreciate the honest, current, and relevant posts!

    I have always wanted to hack and retool WordPress. After seeing video cast two; I skinned a blog for a client. I hadn’t seen cast three; but dove right in. Well it was a success. Thanks for the inspiration!

    Keep up the good work!

    Carl

    P.S. Thanks for changing the video player, now I can use FF3 to watch’m!

  2. Fouad Masoud says:

    how come u didn’t post about part 3 in CSS-tricks i mean the blog.

  3. Chris Coyier says:

    Part three will be officially posted tomorrow. Then I’ll have the downloads stuff already for Friday.

  4. pab says:

    Yeah I saw this last night…

    very sneaky hehe

    like always, good job Chris,

    I do have a question, is there anyway to set up wordpress to manage your own page includes…

    basically

    I’m working on a design and have an include that I added to the wordpess, I’m looking for a way to associate this include with the wp control panel so i can edit the content from there and not directly in the file?

    once again keep up the great work.

    pab

  5. Richard says:

    Your wordpress theme is awesome and your tutorials are just brilliant and I always keep them on hand as references, Thank you. ;)

  6. Daniel K says:

    pab: you’ll want to work up a plug-in to handle the page.

  7. Jespera says:

    Awesome tutorial, thanks

  8. Kevin says:

    Great tutorials. Got me up and running with WP.

    Very Nice.

  9. pab says:

    Thanks Dan K.

    much appreciated.

  10. Chocopunk says:

    Thanks for this !

  11. badger says:

    first off thanks for taking the time to do this. Really enjoyed it! One problem I had was when working a long with you while you built the side bar. When using simple pie to pull in post from another blog, i get this error:

    “Warning: ./cache/ec08f73050436aff8bd89d98388e9c25.spc is not writeable in C:\Domains\domainname.com\wwwroot\blog\wp-content\themes\bobblog01\inc\simplepie.inc on line 1769″

    I have combed the forums and tried what they have said

    “enable cache to false”

    “change folder permissions”

    Just is not working. have you had this problem before?

  12. badger says:

    just for the record, I put “domainname.com” in the warning message myself. Because the site is still in development

  13. mikeo says:

    thanks for the tutorial.

    gave me some ideas and some ideas about how to tweak wordpress.

    which i’m guessing is the whole reason for this

    later
    .mike

  14. Chris says:

    Chris, just seen your vids of how you made this theme, it was great, I had done something similar myself, as a first time wordpresser I ended up messing about with a theme, but having seen your series, I was able with more confidence to edit it a little more.

    Nice one, thanks

    c

  15. Great tutorial. I’d like offer a suggestion for your .button class. If you add the attribute cursor:pointer; It makes the for a nice visual cue for the user. IMHO.

  16. Hey Chris, cant remember how i came across your website css-tricks, but all i can say is excellent! Has to be by-far the best resource for css, its so easy to understand and easy to follow the tutorials.

    I’ve worked before with wordpress, and like you said in screencast 1, its an absoulute nightmare to design a theme round the default theme. Now thanks to you, you have gave me the starkers theme. This will make designing wordpress sites 10x easier!

    Keep up the good work, and i have sunscribed to your rss feeds :)

    Tyler

  17. Raymond says:

    Thanks for this inspiring article Chris! Hope you don’t mind if I took some concepts from your design and applied it to my blog redesign. :p

  18. This was a great series, after watching it i designed a website that similar to yours (i really hope you dont mind) i remixed it up a bit heres the link

    http://khaledstudios.com

  19. Chris Coyier says:

    @Raymond @Khaled – Nope, of course I don’t mind! I’m glad you found the design compelling enough to use for yourselves. Enjoy.

  20. Jade Morie says:

    Yea, these are all great suggestions! I am so with you on this one… Let me see if it suits in my blog.

  21. As a blog reader, I am always on the search for content that are both awesome and worthwhile to digest and I must say your blog passed my criteria. Thank you so much for the wonderful content you have shared! Will be coming back soon!