#25: Designing for WordPress: Part One

by: Chris Coyier

Nov 15 2008

WordPress is a hugely popular CMS for blogging. The blog section of CSS-Tricks is run on WordPress and I am very happy with it. By popular request, we are going to walk through designing for WordPress. In part one, we will be downloading and installing WordPress. Then we will install the "Starkers" theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it's more trouble than it's worth! In part two, we will go over the theory behind designing for WordPress and how it's much like "working modularly" and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.

Links from video:

Running Time: 16:27

Download Video File

Need more WordPress training? I have a comprehensive course available on Lynda.com - WordPress 3.0: Creating and Editing Custom Themes

Subscribe to The Thread

  1. Michael

    Chris great tutorial as always keep them coming however why didnt you setup the site on a local host?

    Reply ↓
  2. chriscoyier

    Good idea, I added those links. There is also a home-base style post here:
    http://css-tricks.com/designing-for-wordpress-com…

    Reply ↓
  3. Web Design Company in Mumbai

    A quick suggestion would be if you could add links to the part two, three…. here that way we can bookmark this page and use it as a reference for anyone wanting to learn how to design a WP theme…

    Anyways.. this is a great resource.

    Thanks
    Alexander Gounder

    Reply ↓
  4. chriscoyier

    Thanks, fixed that.

    Reply ↓
  5. Mikael Rieck

    Chris, your link to part three links to part two ;)

    Reply ↓
  6. luan

    hi. i’m new to webdesign. quick quesiton, how do I sign up for joyent is it free. I tried to sign up for the open social developers. Is that what I want? sorry.

    Reply ↓
  7. stickybomb

    great tutorials for wordpress beginners man. Quick question though kind of off-topic what app or extension do you have installed on your mac that displays the download completed msgs?

    Reply ↓
  8. JJ

    Hey Chris,

    Thanks for the awesome tutorial videos. I am learning tons from them. The WordPress ones have really peaked my interests though with my new website I am wanting to create.

    I have a small question though. I have installed WordPress on my server; I get to the screen where it generates that random password and then I click on the Login button where it is supposed to take me to the actual login screen but nothing comes up. I even try clicking on the index page after and nothing comes up there either. Have you ever heard of this problem. Is this a server side problem?

    Thanks for your help and I really appreciate you making those great videos.

    Reply ↓
  9. Scott

    Could you place a link to your videos on Youtube so I can watch them from my iPhone?
    Thanks.

    Reply ↓
  10. Jennifer Eden Cruz

    Hi,

    That’s really a great tutorial. Can’t wait to see the next one! This will really help a lot in building a home based business

    Reply ↓
  11. Ben

    Thanks a bunch for these videos mate.

    Reply ↓
  12. Web Designing Company in Mumbai

    Your tutorial is great and I have opted some great techniques to create new designs for my client. Thanks!

    Reply ↓
  13. Matthew

    Now that there has been a number of WordPress updates since this tutorial was released
    do you still use Starkers theme for your clean starting theme?

    Reply ↓
    • elhaq

      I just wanted to ask this same question because the starker theme link is just html.

    • elhaq

      Just realized the link has no CSS it’s meant to be naked. Does the theme work in 3.3.1? It says it’s good for 3.0.

  14. silvana

    Hello, I have tried to downloadthe starker but it is no more there… how is it possible to get it?

    Reply ↓
  15. David Nguyen

    http://viewportindustries.com/ ^ Starker Theme

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~