Grow your CSS skills. Land your dream job.

#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:

Need more WordPress training? I have two courses on The Lodge that dig into modern day real world website building with WordPress.

Comments

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

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

  3. Permalink to comment#

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

  4. YAHVINAH
    Permalink to comment#

    I think he said that the font was called agenda!

  5. 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. 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.

    Thanks

  11. 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. Hi,

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

  16. supersantos

    Chris,

    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.

    Cheers,

    supersantos

  17. 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 .

    Thanks

    Dillon

  18. 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. 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. 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.

    Thanks!

  23. 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".