#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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  3. User Avatar
    Permalink to comment#

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

  4. User Avatar
    Permalink to comment#

    I think he said that the font was called agenda!

  5. User Avatar
    Permalink to comment#

    Incredible video series – thanks so much Chris!

  6. User Avatar
    Permalink to comment#

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

  7. User Avatar
    Permalink to comment#

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

  8. User Avatar
    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. User Avatar
    Permalink to comment#

    Thanks man this series has helped me out so much!

  10. User Avatar
    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. User Avatar
    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. User Avatar
    Tom Barnes
    Permalink to comment#

    Excellent work! Thanks so much!

  13. User Avatar
    Permalink to comment#

    Excellent work! Thanks so much!

  14. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar


    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar

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

  21. User Avatar

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

  22. User Avatar
    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. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.