How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

CSS can be tricky. It can also be incredibly easy. I had a lot of help getting my head wrapped around CSS when I was first starting out and I take great pleasure in helping others the same way I was first helped: with solid code examples to learn from.

Here we’re going to layout a WordPress Theme CSS development arsenal for you:

  • A stylesheet that resets default CSS across all web browsers and makes a sane standard we can work from
  • Another stylesheet that rebuilds our typographical foundations in a smart way
  • A stylesheet just for WordPress classes (keeping the first two pure so we can use them for non-WordPress projects)
  • A series of 6 fluid stylesheets that will create ALL the common blog and website layouts you expect—and each one ready to adapt into a fixed width layout.

All the code we’ll talk about is open-source, under the GPL, and browse-able at the Your Theme Project Page. View the raw source for any one of these files and copy-paste at your leisure.

First things first, make a “style” directory in your Theme folder. That’s where we’ll be putting everything. Your CSS quiver, as it were. Ready to hit the target?

Reset CSS

Our Reset CSS is adapted from Eric Meyer’s famous Reset CSS with some minor, minor changes. Basically what it does is take all the typographical defaults of every browser and … obliterates them. You’re left with a squashy, gray mess.

It’s beautiful.

What this does is equalize the rendering of every browser, leaving you free to ignore countless individual quirks particular to each one.

Using it is simple. Add the following lines to your style.css, at the very top, immediately after the initial comments section.

/* Reset default browser styles */
@import url('styles/reset.css');

Reload, your page and check it what reset.css does in multiple browsers (if you can). It’s wonderfully gross, isn’t it?

Rebuild CSS

Our Rebuild CSS is my own personal invention adapted from an early version of the Blueprint CSS typography stylesheet and refined in the Thematic Project. What it does is swing back some vertical rhythm in our pages, but in a really smart way.

What I’ve tried to do with this iteration of my typography-rebuild CSS is combine the best of both worlds for web typography: using Pixels for font height, with relative line-height for the main declaration on the body element, and Ems for all subsequent vertical margins (like for paragraphs and lists).

What does this mean? It’s really easy to set your font height later—without doing any math work—and have all of your typographical elements follow suit with an appropriate vertical rhythm (the vertical space between type elements like paragraphs and lists).

Using rebuild.css is also really easy. Just add the following lines immediately after your reset.css import.

/* Rebuild default browser styles */
@import url('styles/rebuild.css');

The Basic WordPress Styles

There are some elements in WordPress that you’re just going to have to style every time. What I’ve done is taken those styles and put them in there own little corner called wp.css.

Right now, what we’ve got in there are styles for floating all the images—including handling captions and image galleries. And! preset styles for simple pull-quotes. All you need to do is add a class of left or right to the blockquote tag and you’re ready to roll.

Can you guess how we’re going to use wp.css?

/* Basic WordPress Styles */
@import url('styles/wp.css');

All The Layouts You’ll Ever Need

For your new theme, I’ve taken the rock-solid, indestructible layouts that shipped with the Sandbox Theme and adapted them for your new HTML structure. There are 6 in total. Each is a fluid layout (that stretches to fill the width of your browser window) but each one is easily adaptable to a fixed width layout.

Using anyone of these layouts is simple. Immediately after your basic WordPress styles import, import one of these layouts. Here’s how to import the 3 column layout, with the content in the center.

/* Import a basic layout */
@import url('styles/3c-b.css');

The simplest method of turning any one of these layouts into a fixed-width layout is to add a width and centering margin to the #wrapper div.

#wrapper {
  margin: 0 auto;
  width: 960px;
}

Bonus: Styling The Menu

If you’ve never taken an unordered list (that’s the smart markup generated by wp_page_menu) and styled it to look like a menu before it can seem kinda weird. As a bonus, here’s the CSS I use when I start out creating menus for WordPress Themes.

#access {
	margin: 0 0 1.5em 0;
	overflow: auto;
}
.skip-link {
	position:absolute;
        left:-9000px;
}
.menu ul {
	list-style: none;
	margin: 0;
}
.menu ul ul {
	display: none;
}
.menu li {
	display: inline;
}
.menu a {
	display: block;
	float: left;
}

It’s pretty simple but it’ll put you on sure footing. Good luck!

How To Create a WordPress Theme

This post concludes the WordPress Themes Tutorial series that shows you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

  1. WordPress Theme Tutorial Introduction
  2. Theme Development Tools
  3. Creating a Theme HTML Structure
  4. Template and Directory Structure
  5. The Header Template
  6. The Index Template
  7. The Single Post, Post Attachment, & 404 Templates
  8. The Comments Template
  9. The Search Template & The Page Template
  10. The Archive, Author, Category & Tags Template
  11. The Sidebar Template
  12. Reset-Rebuild Theme CSS & Define Your Layouts

If you have any suggestions for posts that will fit in this series or complement what we’ve done so far I’d be glad to hear them. Let me know in the comments.

94 thoughts on “How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

  1. hugas says:

    Hi! Ian, this is a wonderful series :) But I do hope you’d fix the code snippets whenever someone tries to print them. Just a humble request, this might be odd but I just want to voice out my concern :)

    Thanks a lot!

  2. Pingback: links for 2009-07-07 | Links | WereWP

  3. Ian,
    I have truly enjoyed the series.
    Not just great information, but great writing style.

    In looking at the demo, http://themeshapes.com/shape/, there doesn’t appear to be any styling at all. It is using temporary/style.css.

    Do you plan on updating the demo site to include info from today’s post?

    Regards,
    Brian

      • Daniel Balfour says:

        Ian,

        Is there documentation on the Shape theme available? Particularly the CSS file architecture? I’d hate to randomly ‘hack’ at it as I’m sure there must be a more methodic approach to creating child themes. I must admit, I’ve spent countless hours over the last 2 days trying to get at it with little to show for it.

        I’d love it if you could give me some pointers (or help files! – if they exist yet) on how to methodically ‘child’ either of your current parent themes.

      • Daniel Balfour says:

        ** Please delete the dupe ** (above)

        Another thought..

        Something I haven’t seen anywhere but certainly an angle worth exploring is the release of a ‘CSS Framework’ as a companion or ‘sub-framework’ to WordPress frameworks such as Thematic or Shape. This would consist of ‘straw’ CSS files with all of the selectors present in the target (parent) framework, along with concise documentation (or tutorial series) on what each selector does.

        I think something of this sort would be invaluable to the developer community that bases (or plans to base) WordPress site development on your parent frameworks. Finally, I think that with any open-source platform, the key to generating revenues (for yourself) through the release of largely free frameworks, lies squarely in documentation and support. Something very worthwhile considering.

      • Daniel Balfour says:

        I just came across it this morning actually, I do plan on reading the materials today. I’ll get back to you on this.

        I firmly believe there’s a need for a comprehensive, methodic and uniform approach to child-theme development, and that the key to that lies in the framework developer’s adding a ‘child theming toolkit’ as a companion to the parent theme. The alternative to that is one-size-fits-all generic CSS tutorials which, while being a terrific resource, lack the specificity needed for a ‘specific’ framework.

        Keep in mind that LOADS of developers out there would love to standardize on your frameworks (Thematic & Shape). Developing a systematic approach to the task, with a clear methodology and documentation would take your existing toolset to the next level.

  4. Pingback: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

  5. Todrick Moore says:

    Ian,
    Thank you for an excellent series. It has helped me understand a few things about wordpress. I have one question, when I look for the widget areas with firebug I only see them as the sidebar () instead of
    (
    ). Did I miss something? I have been unsuccessful in finding the error but I will continue to look at the code to find it.

    Thanks

  6. thanks for this series.

    though I thought you’d be explaining more about how to integrate actions and filter hooks, as in the thematic theme.

      • I must admit I was a bit confused, because in the introduction post you compared this theme to thematic, so I was expecting a framework tutorial. Thus the comment.

        But don’t get me wrong, I’m really grateful for this excellent tutorial. Thanks :)

      • I didn’t compare it to Thematic in the intro but I can see where the confusion could have come from. This is Theme is pretty advanced but it’s still a basic Theme, if you know what I mean.

  7. brian says:

    Do you make a living with this site?? or that’s your future intention?

    just wondering, cause i can’t see any advertising or sponsor listed here.. So can’t realize if and how you make money with this??

    just wondering… you write a lot in each article.. you put a lot of work here.. just wanted to know if it pays??

  8. Enjoying your comprehensive WP articles, thanks!

    One thing with this post though – did you really mean display:none for the skip link style? That will hide it from screen readers… I tend to hide it off screen and make it available with :focus to benefit keyboard navigation.

  9. brian says:

    it takes a lot to browse the page.. why do yu make the articles SO LONG…??

    also are you trying to replace Small popato wpdesigner’s ?

    • Finally! I’ve caught you in my trap, Brian! I’ve been writing long articles for months and months, hoping against hope that one day you would come upon my blog and be annoyed that I was trying to help you out with a comprehensive tutorial! A free tutorial no less! Ha ha ha! And now you’re so annoyed that you’ve commented! Ha ha ha! You’ll never get those precious minutes of your life back, Brian! NEVER!

      And how do you know I’m not Small popato wpdesigner’s, Brian? Eh? Eh? HOW DO YOU KNOW?

  10. tolmarc says:

    Hi Ian,

    thanks for another great post and for the entire series.

    I thinks it’s much better to have a plain WordPress theme and not a “frameworked” one. I think that the time I’ve put into learning and customizing actions and filters could have been used to just customize the theme in an ordinary way. I know this is the least preffered method, but when I build a site for a client he may ask only small changes, and rarely wants to update his entire site. in the end I’ve found it’s quicker for me to just fix the theme with each new version.

    again great series, and I hope you’ll keep the shape theme updated as it’s very very useful!

    • You know that this WordPress Theme tutorial has nothing to do with creating a “Theme Framework” with actions and filters, and everything to do with creating a “plain” theme, right?

  11. Pingback: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts | Free Wordpress Themes - CityScape

  12. Pingback: 如何创建 WordPress 主题 CSS 样式表 | 精品博客

  13. Congratulation Ian. You got a troll!

    I pesonally think these tutorial are by far the best I’ve ever seen. You’re the first who did it right.

    I’m working on a new theme for my blog right know and this tutorial makes it so freakin’ easy. It’s almost spooky. I can not thank you enough for this extraordinary tut :)
    If you are interested I’ll let you know when I’m finished.

    Greetings,
    Seb

  14. Joining the congrats for this series :)

    Do you plan in some nearer future tutorial on ‘ how to make thematic theme’ with accent on layouts?

  15. Ian, I appreciate your articles. Even for someone like myself who frequently makes entirely custom WP themes, they’re useful.

    As such, I was reminded to put in skip-to-content links into my sites with heavy nav. But I notice you’re styling them with display: none, which hides the link from the major screen readers. Sort of defeats the purpose, right?

    I currently use absolute positioning, positioning it -9999px off the left side of the screen with a width of 9990px. This gets it out of the document flow and off the page, but screen readers still seem to read it.

  16. awesome! usually i have a really hard time following tutorials online, but this one was perfectly done to match my brain’s way of thinking. :) thank you, Ian!

  17. Shane C says:

    Thanks a million for this Ian. Very well written and cuts through a lot of the other crap I’ve seen on the same subject:)

  18. tom g macamhloaibh says:

    Great site and great insight (ooh, I am getting clever). I haven’t finished the entire tutorial yet but want to thank you now as I peruse some of the commentary. I’m a complete novice in every resprect and I couldn’t have begun to get to the nuts and bolts of creating a decent wordpress doc without this site. As we would say in Irish ‘go raith maith agat’ and to hell with any begrudging comments. Keep up the faith and the good work. Peace. Up.

  19. Pingback: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts | WpMash - WordPress News

  20. Pingback: Save time using WordPress default CSS stylesheet

  21. Pingback: Save time using WordPress default CSS stylesheet « Test Blog

  22. Pingback: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts | My Site!

  23. Derek says:

    Thanks for the great tutorial! I walked through everything, but had a couple of questions.

    1. Why aren’t any of the widgets showing? I thought they were supposed to be there by default. They show from the admin screen, but not on the actual site. Also, I tried the preview from the WordPress theme directory and noticed no sidebars. Any thoughts?

    2. Are you going to talk any about the footer?

    Thanks again!

  24. adam says:

    hi. i’d like to know after i have done all of this tutorial, where do i then style my text, and background colours/images etc… thx for a great tutorial!

  25. This was a great tutorial Ian, thankyou very much. a couple of points though.

    I’m not getting anything in the sidebars/widget areas even though the WP backend says that there should be some there.

    Also I’ve noticed that the menu (where the pages are displayed below the header) is actually sitting inside the .skip-link div. that might just be my kak-handed cop/paste skills though.

    Otherwise great work, now I’ve just got to figure out the JS I need to get it doing what I want :)

  26. One thing to note: If you add
    #wrapper { margin: 0 auto; width: 960px;}
    You will also need to add body {margin: 0!important;} or your body will be pushed outside of your wrapper.

    One other little trick. If you add /*
    LAYOUT: Fixed
    DESCRIPTION: This makes your template fixed layout
    */
    body { margin: 0!important; }
    #wrapper { margin: 0 auto; width: 960px;}

    to a file called fixed.css and /* Fixed Layout */
    @import url('styles/fixed.css');
    to your styles.css after all of the other styles you can just rem it out for projects where it isn’t needed.

    Dave

  27. Im working with WordPress for the first time , so I’m a n00b to the end , i good with HTML/CSS & JS ,// pHp :(

    So please hellpe me out good internet ppl :)

    I cant see my widgets on the index.html ( #primary, #secondary div’s) the divs are OK but the widget content is not appearing

    Pica related —> http://i47.tinypic.com/9jkped.png

  28. #1st says:

    I nedd som other hellp now how to limit the number of posts in the index.html i know it has to do something with the loop but i just can’t fugure out how to do it can you hellp me out ?!

    Anyone

  29. EagerBob says:

    Ok, but then the stylesheet will not be found, since the links we made earlier are not valid anymore.
    So how can I make WP know how the stylesheet is to be found in its new location?

  30. EagerBob says:

    mmmh, seems I cannot use a blockquote ?
    With my question I was referring to your advice to put the stylesheets in a new “style” folder.

    Thanks, for the great “How To”

    • Jules says:

      You probably figured this out months ago, but if anybody else should ever stumble upon this with the same question in mind: only put the child css files into the ‘styles’ folder, leave the ‘style.css’ file in the theme’s root folder. That way WordPress finds the ‘style.css’ file where it will be looking for it, but from there you can link to as many other css files inside the ‘styles’ folder as you like – without making the root folder a confusing mess.

  31. Hi Ian,

    Thanks for the tutorial – it has been a great help, especially the @import section. because of these tutorials, I understand a lot more than I did yesterday. :)

    However, what I’m a bit stuck on is how to really control the way the final result looks… You mention before that the reset makes a beautiful mess, and that rebuild adds some much-needed vertical clarity, but where can I find the documentation to control the rest of the styling?

    I’m sorry if I’m being a bit dull, I would prefer not to keep stabbing in the dark at ideas, but would like to build upon the structure that you have (thankfully) provided.

    Any suggestions in particular?

    Thanks again!
    Aaron

  32. Jonathan Meharry says:

    Wow! Thanks so much for this tutorial. I really appreciated all the help in understanding all the moving parts of WordPress. I also appreciated your thoroughness and your clean and standards based approach to code. The CSS resetting stuff is so awesome.

  33. Rob Henrichon says:

    It would be EXTREMELY helpful if the code boxes were stripped of their inherent numbers.
    Every time you copy a snippet of code, you have to manually go in and delete all the number .
    This gets pretty time consuming in spots.

    Also, a little heavy in the PHP department for beginners I’d say.

  34. bomteidler says:

    Appreciate the labor of love here. Got me up and running in no time with just enough of “everything” to help me dive in on my own deeper. Thanks so much for the great work.

  35. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | Astagram Studios- A Creative Studio- Official Blog

  36. Zenzen says:

    First of all, a huge Thanks for this big job ! This is a fantastic tut that really helps me to figure out the “skeleton” of a WordPress blog. Now I understand so much better. I am so happy and excited .
    I just have a short question…may”be dum…
    I am designing my blog and playing around with the various css files.
    But I see that css is effective only with the Style.css file , meanwhile changing wp-css or the layout ( via ex 3c-r.css) does not do anything.
    Am I missing something ?

    Thank again and congrats for your huge contribution.
    Cheers

  37. Great Post Ian!
    This css structure is different from the current Thematic structure, right? If so, are you hinting at a future restructure of the CSS files in thematic?

  38. brainfreeze says:

    hi, this is a truly amazing tutorial. but for dummies (beginners to say),

    1. my widgets fail.

    2. i dun see the wrapper div tag. not in any of the css at all.

    3. the css given through your tutorial has to be filled in accordance to our preference? yes?

    i will love to learn, with your given patience please? to any out there who can help?

  39. Brad says:

    Hi Ian,

    Thank you so much this this series. Please forgive me for my lack of WP skills. I am three days new into WordPress and trying to get you tutorial to work but I getting this error. I downloaded all the files directly from http://code.google.com/p/your-wordpress-theme/source/browse/#svn/trunk%3Fstate%3Dclosed. The only thing that I changed was the “your-theme” on all pages to “bpwp1″. Any suggestion why I’m getting error?

    Thank you in advance for you help.

    ================= ERROR =======================
    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    bpwp1 Stylesheet is missing.

  40. Jules says:

    There have been no new comments in a while, but I stumbled on this site only recently and can’t restrain from thanking you. While I’ve created a few custom WP themes for my own site to work as a CMS, I’ve never taken on the task of really building anything comprehensive to work with my blog. Thanks to this tutorial, I learned a lot about the business – copying and pasting CAN take you to a new level, after all – and am now on my way to layouting the thing. I might even mimick Kirby to a certain degree – it’s one of the most beautiful and plain layouts for WordPress I’ve seen so far. (I’m not a fan of flamboyant designs, as you might guess. :-) )

    Thanks again and take care.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s