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

Comments

  1. User Avatar
    Cameron
    Permalink to comment#

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

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

    That was great!! I learn alot thanks!

  4. User Avatar
    Yahvinah
    Permalink to comment#

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

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

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

    hmmmmmmmm
    eric

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

    Is it possible to get your standard css reset?

  12. User Avatar
    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. User Avatar
    Jennifer Eden Cruz
    Permalink to comment#

    Hi,

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

    Cheers,
    Jennifer

  14. User Avatar
    ebflute
    Permalink to comment#

    Can you post your reset css?

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

    Nice video.

  17. User Avatar
    Alaa Samer
    Permalink to comment#

    I love u!!!

  18. User Avatar
    design
    Permalink to comment#

    Thank you for tutor design

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

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

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

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

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

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

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

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

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag