Grow your CSS skills. Land your dream job.

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

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

Comments

  1. Cameron
    Permalink to comment#

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

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

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

    hmmmmmmmm
    eric

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

    Is it possible to get your standard css reset?

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

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

    Cheers,
    Jennifer

  14. Permalink to comment#

    Can you post your reset css?

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

    Thank you for tutor design

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

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