#27: Designing for WordPress: Part Three

In part three of this series, we finish up the structure of the site and start diving into the details. The typography is set up, the right sidebar is set up, and the footer if flushed out. Then we use SimplePie to pull in the external RSS feed and jQuery to pull in the "social" stuff. Not exactly WordPress related, but I warned you! Then we look at styling up the rest of the WordPress layout types like Single pages (with comment styling) and Pages. At the end we pop open the design in a bunch of different browsers to see how it holds up.

Links from video:


  1. ariyo
    Permalink to comment#

    I don't know how many times I have watched these series of WP. I never get tired. They are so useful to me. Thanks A LOT Chris. Keep up the good work

  2. azmodan
    Permalink to comment#

    Oops! I'm sorry, you're right.

  3. azmodan
    Permalink to comment#

    What is the name of the font you're using on the title of your template?

    Permalink to comment#

    I think he said that the font was called agenda!

  5. Nikhil
    Permalink to comment#

    Incredible video series – thanks so much Chris!

  6. blurred
    Permalink to comment#

    That was one awesome video series , thanks chris for all the work :)

  7. daniel
    Permalink to comment#

    Chris, I really have to say you did an excellent job. Wish more stuff from you …

  8. Tim
    Permalink to comment#

    Chris, thank you very much for this series. I’ve dabbled with WordPress for a while but never got into it properly because I came up against too many headaches trying to amend the default theme so I always reverted to building my sites manually as the blogging component is only a small part of the sites I build.

    Your series showed me everything I needed to know to create a theme from scratch and also gave me a really good steer to Starkers. This has enabled me to really get to grips with WordPress so I can now use it to build normal (static pages) sites with integrated blog content, rather than conventional blog sites.

    I’ve just completed the first one. I followed everything you said in your series and really encountered no problems at all. I did a couple of extra things – listed the latest blog posts on the static front page and customised the header template to allow me to control the meta tags for better SEO.

    Most of the work was (as usual) taming the CSS to layout the static pages – the rest of it was a breeze thanks to your great explanation.

    Take a look if you like: http://www.theadwordsexpert.co.uk

    It’s only just gone up and I’ve a lot still to do but it’s really been very easy thanks to you.

  9. Scott
    Permalink to comment#

    Thanks man this series has helped me out so much!

  10. Marc Brigham
    Permalink to comment#

    Chris thank you for making the series of wordpress tutorials. I would love to see some more. I subscribed to your rss and I use Viigo so I check your site almost every day on my blackberry. Love the site and keep up the great work. I am working on making my own wordpress theme for the first time and tutorials will really help me out.


  11. Web Design Showroom
    Permalink to comment#

    Yep, really helpful videos for the new comer and even for wordpress experts who want to go back to basics.

    Thanks alot!

  12. Tom Barnes
    Permalink to comment#

    Excellent work! Thanks so much!

  13. 纹身
    Permalink to comment#

    Excellent work! Thanks so much!

  14. Jennifer Eden Cruz
    Permalink to comment#


    Thank you so mcuh. This video tutorials really helped me a lot since i don’t know much about wordpress. This is really great stuff!

  15. Mark Clarkson
    Permalink to comment#

    Hey, Chris. Thanks for this series. I had to build a new WP blog from scratch with almost no idea how to start and your videos were pure gold.

    If I had one suggestion, it would be to make them available for download in some form. I’ve watched them many times and each time I have to wait for the video to preload before I can skip to the place I left off. A minor quibble about some great videos.

    • Chris Coyier
      Permalink to comment#

      You’ll notice right up top (above the video), there is a link to directly download any of the videos =)

  16. supersantos


    First of all I love your videos.

    Something got mixed up, no video for this tutorial just audio.

    Please could you fix it? I’m eager to complete last part of the series.



  17. Dillon
    Permalink to comment#

    Hey Chris!
    Great Video I have learnt so much from your videos it is amazing .Thanks!
    (Yeah there is no vidoe just audio? ) Yeah I’m trying to learn about how to change the results page in WP .



  18. Tony
    Permalink to comment#

    Watched pt1 and pt2 put unable to view pt3 video for this tutorial. tried on several machines and browsers. Maybe a resent issue.
    Delete comment if working.
    love the the site.

  19. Clint
    Permalink to comment#

    Hi Chris,
    Thanks for these, your Digging into WP book, and the Lynda.com videos, they’re literally the best WP training around. I keep my subscription open in hopes that you might do a sequel! It’d be great to learn how to do all the cool admin side things (custom widgets, pages where users can input data without having to dive into the code, etc.)

    Is there any chance you could be tempted to do that?

    Thanks again!

  20. Ben

    Thanks for keeping this available, Chris. Lots of commonsense thoughts & great explanation of the WP files. Just what a newbie needs.

  21. Mike

    Sincerely appreciation from my part! This videos should be in school books, if you know what I mean. Cheers Chris

  22. Jerry
    Permalink to comment#

    These videos are a little dates, as wordpress is on a completely different version now, but I can’t tell you how much these still help :)

    Using these, and A LOT of trial and error, I feel like I’m finally on my way to learning php.


  23. Kalpesh
    Permalink to comment#

    Thanks Chris, great video, particularly like the comment styling as I can definitely apply it to some of my sites.

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.