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.
- WordPress Theme Tutorial Introduction
- Theme Development Tools
- Creating a Theme HTML Structure
- Template and Directory Structure
- The Header Template
- The Index Template
- The Single Post, Post Attachment, & 404 Templates
- The Comments Template
- The Search Template & The Page Template
- The Archive, Author, Category & Tags Template
- The Sidebar Template
- 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.
ThemeShaper 
94 responses
Man, this is just what I wanted. I have downloaded all the pages for future reference. Thanks a lot.
I’m getting several “server errors’ from Google Code when trying to download your files
Took a few days but the server is back up! Thanks again, I’m brand new and this is the perfect start.
Ian, thank you for the amazing tutorials and huge contribution to the community. You’ve opened the doors to so many exciting layers of WordPress development for me (and probably countless others). Keep it up!
CSS is far easier than coding for WordPress.
this looks like a great tutorial. I’ve been using wordpress for about 2 years so it’s about time I learned how to build one for my own for my portfolio. i’ll be studying this in detail over the weekend.
There’s a lot of well deserved praise on here Ian, and I’d like to second every single one of them! This is by far the best tutorial I have ever read – and I don’t just mean for WordPress.
I’ve only just started learning how to create custom themes for WordPress and this tutorial has already given me the goods that so many websites out there lack, so thank you again for that. Plus I’m a stickler too for clean, well written compliant code and yours is almost a thing of beauty.
I hope to one day be able to natively write code and even tutorials as well as this. Have you though about including a PayPal ‘Donate’ button or a ‘support this project’ scheme? Might be worthwhile.
Thanks for the great tutorial, I’ll be using it to re-theme my site.
Thanks For The Turorial but the theme we made following your instructions is pretty blank so how can style it with my personnal background, header, footer, sidebar, menu etc……
That’s a little out of scope for this tutorial but a google search for “CSS web design tutorial” should help you out.
I really enjoyed this tutorial but I’m having trouble getting the CSS to work. I believe my 2 main problems are 1) having trouble figuring out which tags to associate with which feature (eg which class or id goes with the header or page buttons) and 2) sometimes I’ll think I’ve figured it out but basic basic css commands don’t work (eg “background-image: (‘images/header1.jpg’)” doesn’t display the image).
Thanks
I, like Sara, am having a problem with getting the CSS to do “anything”. And although not an expert, I have been working with CSS for close to 10 years, enough to know when I am doing something wrong at the minimum.
Could you possibly give us an example of how to make a basic change? I think the problem (for me at least) is not the CSS nomenclature, but the mapping of the style sheets (or better said not knowing where to go to make the corret changes).
Also had another question…there are lots of “id” attributes in your code which do not have a corresponding CSS statement in the style sheets. Are these to be considered arbitrary or am I missing where they are located.
Exceptional tutorial(s) by the way. You have given us an invaluable tool to keep learning the intricate, sometimes mysterious ways of the wordpress platform. I thank you for providing so many of us with quality educative tools.
Ian,
You make all the hard work! I’m a beginner in WP theming, this tutorial puts my mind in the right way!
Thanks a lot
Ian-
Wow! What an awesome tutorial series! I have recently taken the dive into the freelance web design and development world, but my background is in design and not development. This tutorial has been amazing in helping me wrap my brain around all this code. I only wish I had found this a few months back instead of another tutorial I’ve been using.
Thank you so much for sharing!
Hi,
First, just want to say “Thank you” to Ian- I worked my way through this tutorial, and with some minor issues, everything worked beautifully.
I have one problem though, which has crept into the design, now that I’m working with the stylesheet. I downloaded the data from the site I’m redesigning; some of the posts contain photos which the text floats or wraps around. This works perfectly on the live site: however, on the dev site I’m building, the self-same posts look really wonky in Firefox (they display fine in Internet Explorer). The photos have “floated” themselves out of the text, and look as if they’re not respecting the content and post “div” tags that enclose the content. Has anyone else had this problem?
Thank you for the tutorial. Very helpful and informative. I have been hacking WP for a couple years now and was learning the Zend Framework, thinking I could create some standard hacks for multiple sites. Then I learned about themes (heard it before but thought they were talking about skins!). So, I am very excited to get working on some themes for myself and clients. Thanks for breaking themes down and making it easy.
Ian,
Thanks for such a clear and comprehensive tutorial!
I copied the project files from Google Code (http://code.google.com/p/your-wordpress-theme/source/browse/#svn/trunk) and uploaded them to my server. However, I’m not seeing any sidebar with widgets. I’ve doubled checked the code and it seems correct but still no sidebar appears. I’ve tried the other layout styles and it’s always a single column layout with no widgets. Do you have any ideas about what’s going on?
Tom
I’ll be updating the tutorial and sample code in the near future to correct that.
Not really sure what you did to the heading with the rebuild. Where exactly do you declare their heights?
Hey Ian,
I just wanted to let you know what a fantastic series you put together here. Now I have a basic framework to use when creating new WP themes. Very helpful and much appreciated!
Great tutorial!