#26: Designing for WordPress: Part Two

We have WordPress installed, now let's really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts/pages. Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all important things to consider as well as the overall feel. WordPress sites don't need to scream "Blog!" unless you want them to. Then we take a look at the modular nature of a WordPress theme and start altering the markup of the files and writing CSS. In part three, we will continue touching up the design, adding details and content. We may get to the finishing touches of adding the "extra-content" stuff like the Twitter feed, or that might be a part four.

Links from video:


  1. Cameron
    Permalink to comment#

    This is absolutely, 100 per cent wonderful. Beautiful. I thank you.

  2. Stefan Pinto
    Permalink to comment#

    Definitely helpful. WordPress is quite scalable; it's a must know if you want to blog… even build websites.

  3. Nathan
    Permalink to comment#

    That was great!! I learn alot thanks!

  4. Yahvinah
    Permalink to comment#

    Hi< Thank you so much for including this, you are a legend! Cant wait to see the next installment!

  5. Dhane Diesil
    Permalink to comment#

    Great video Chris! Is it possible to get the psd of the layout so it's a little easier to follow along with the tutorial?

  6. mitzs
    Permalink to comment#

    Thank you so much for these videos on WP. I am just starting out with my blog on a new host and was totally lost. You have helped me alot already and I’ve not even seen the 3rd one yet. Great Stuff, and you instruct in a way where I don’t feel like I am overwhelemd with the whole process. Again thank you for doing these and look forward to seeing more of your stuff.

  7. eric
    Permalink to comment#

    Chris, this screen cast, heck your entire site, has been fantastic for me. Thanks for all of the effort.

    Today I was following this tutorial, action by action, and somehow I ended up “Page” links appearing in my header area, right below the blog description???

    They appear again, as they should, below the search box and under the pages heading, but these magic links that just appeared, I have not clue how to get rid of them.

    You can see the “opportunity” ;) on the raw site at http://moviepals.net/index.php

    Thanks for any help you can provide.

  8. eric
    Permalink to comment#

    ugh, going to double comment here.

    Seems that the extra “Pages” links only appear with the starkers theme, if I go default or with WP Classic they do not appear.


  9. Rich
    Permalink to comment#

    You make it look so easy. I really have picked up some great stuff from your tutorials. Kudos to you and keep it coming…

  10. Anthony
    Permalink to comment#

    Thank You for putting these videos together. I’ve been watching these several times over just getting my head around putting things together with CSS. It always seems to be 500% easier to follow along with the videos than learn from books. I’ve even taken several web development classes, and they sorta gloss over the CSS part. Thank You again.

  11. Jeff
    Permalink to comment#

    Is it possible to get your standard css reset?

  12. Sean
    Permalink to comment#

    I’m coming to this tutorial a little late and notice there is no link to part 1 or part 3. Off to google to find it, but it might make it easier for your site visitors if the link was already there.

  13. Jennifer Eden Cruz
    Permalink to comment#


    Thank you for a lot of really good stuff! Keep it coming…


  14. ebflute
    Permalink to comment#

    Can you post your reset css?

  15. Kyle
    Permalink to comment#

    Hi Chris,

    Thanks for the great video. Just a note to anyone watching this and having trouble with the footer not sticking to the bottom of the page make sure you close the div in the socialsidebar.php

    Not sure if you did that in the video Chris but I was having such a hard time figuring out why it wasn’t working. Yes I’m a newbie so divs are really giving me trouble.

  16. Oliver
    Permalink to comment#

    Nice video.

  17. Alaa Samer
    Permalink to comment#

    I love u!!!

  18. design
    Permalink to comment#

    Thank you for tutor design

  19. sofii
    Permalink to comment#

    Thanks this is great!
    However, I am working locally on MAMP using WordPress and the Starkers theme. Unfortunately I can’t get the images to rendered when I put them inside the theme images folder and use the prefix

    got any ideas?

  20. Hasan
    Permalink to comment#

    Dear Chris Coyier,

    i want a tutorial which will teach me from the scratch, in this video you taught us, how to make a wordpress theme using the existing theme and code, i want a kind of tutorial which shows all the steps to create wordpress theme without using existing theme. So please guide me and show me the right path towards wordpress.

  21. Jay
    Permalink to comment#

    Dud why is it most times I cannot access your video. Tried so many times ….. :-(

  22. David Nguyen
    Permalink to comment#

    I was trying to find the Nude theme and came accross this. http://viewportindustries.com/

    Click on the “starkers” Menu and then you will be able to see a DOWNLOAD Text.

  23. Diana
    Permalink to comment#

    Thank you for creating this tutorial. It is awesome :-)

  24. V
    Permalink to comment#

    So I’ve put all the wordpress files in a /blog/ folder so the url is http://www.website.com/blog. In the reset.css when I try and specify a background image (I’ve but the .png in the image folder), it won’t show if i do background: url (/blog/wp-content/themes/themeName/images/bg.png), but if I move the image to the blog root, it’ll show when I do url (/blog/bg.png) – any idea why?

  25. Lindsay
    Permalink to comment#

    Chris, can you let us know which starkers theme you use now as there are some different versions?

  26. Lindsay
    Permalink to comment#

    Chris, can you let us know which starkers theme you use now as there are some different versions? Also your starkers link is broken.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.