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.
52 Comments
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!
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
The ThemeShapes site isn’t a demo for this tutorial—but the current version of the Shape Theme is.
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.
** 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.
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
The code did not show in my first post…thanks again.
In the shape theme I see :
and in my theme I see:
Well…my widget area shows up as sidebar. I really hope you can understand this.
I’m not sure what you’re getting at.
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.
Nope, no actions or filters with this tutorial.
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
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??
Blogging at ThemeShaper does not make me money directly, no.
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.
That’s a good tip, Karl. Thanks! I’ll have to correct that.
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?
FUNNY! Now, can you please STOP being so sweet and GIVING us “small popato” designers so much help, info, and other really GOOD stuff? I know, right….
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?
Thank you for all our time and patience that was required to create this series, very nice.
Cheers.
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
Joining the congrats for this series
Do you plan in some nearer future tutorial on ‘ how to make thematic theme’ with accent on layouts?
If you mean a “How to create a WordPress Theme Framework” tutorial: maybe.
If you mean “How to create a Thematic Child Theme” tutorial: also maybe—there’re a whole bunch of really great tutorials out there already. Though I do mean to finish my post series on How To Modify WordPress Themes The Smart Way.
And as far as layouts go, really, you’ve got pretty much all the CSS layouts you’ll ever need in this post. I was serious about that.
great, can’t wait
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.
I’ve updated the CSS, Darin. Thanks for the reminder!
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!
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:)
another thing : will it be available as a PDF download?
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.
Basic but wonderful is the theme.
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!
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!
Thanks for the great post and the link to Eric Mayers post. I had never heard of using the CSS reset.
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
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 */to your styles.css after all of the other styles you can just rem it out for projects where it isn’t needed.@import url('styles/fixed.css');
Dave
Hmmm code tags didn’t work ;-(
The changes in my style.css are not being reflected in the php builds at all. Where could I have gone wrong?
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
btw i have taken this codes now and it didn’t work again
http://code.google.com/p/your-wordpress-theme/source/browse
can someody giv me hint
Just another THANK YOU!
I’ve got a great jumping off point for building future themes. Thanks a mint.
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
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”
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
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.
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.
Have you taken a look at How To Modify WordPress Themes?
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.
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.
8 Trackbacks
[...] How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts The final episode of the great WordPress theme tutorial series written by the creator of Thematic for you! This series is just a must if you ever plan to design your own WordPress theme. (tags: WordPress theme tutorial) Leave a Reply Click here to cancel reply. [...]
[...] from: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts Tags: Comments0 Leave a Reply Click here to cancel [...]
[...] Here is the original post: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts [...]
[...] 原文：How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts [...]
[...] See the article here: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts [...]
[...] to Ian Stewart for the tip! If you enjoyed this article, please consider sharing it! tweetmeme_style = [...]
[...] to Ian Stewart for the [...]
[...] See the article here: How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts [...]