How to start learning CSS and theme development?

Question

What would be your suggestions for learning CSS and WordPress theme development ?

I have been using WordPress for over 4 years now, but I have never really gotten comfortable with CSS or theme design (I could tweak it here and there, but that's not really doing much). I would love to be able to do these, but don't know where to start. Most guides I came across are not WP specific, and I fear I'd go through redundant material.

Thanks

Answer 1

First of all differ between the stuff. WP is not CSS and CSS is not WP. But WP themes make use of CSS. So if you learn about CSS you're basically not doing wrong (good thing with CSS is, it is common between all websites). The other part is HTML. And then you have PHP.

So these are three computer languages that are used with each other:

• a programming language: PHP
• a structural language: HTML
• a domain specific language: CSS

Then you have a multi-layer network architecture: PHP is executed on the server and HTML and CSS is provided by the server but read / processed by the Browser on the client computer.

So even if themes might look simple, with WP this all gets interchangeable mixed and you must yourself put the stuff apart again.

PHP is in "Theme" (PHP) Files, HTML is generated (and as well is) inside those Theme files, CSS is in the CSS file.

So basically you need to decide yourself what you want to learn. Most resources differ between PHP and HTML/CSS.

Based on your question I can only suggest to you to learn CSS. It is very powerful after you have fully understood the Cascade. You need to know HTML forehand (not PHP, just HTML). In the end CSS is absolutely important for the visual representation of a website, it's a power tool to decorate any website. So you can use that with everything, even wordpress themes ;)

Go for it. If you haven't understood until now after 4 years, spend yourself some education. I suggest some book like http://oreilly.com/catalog/9780596101978 which is perfect for self-education (next to practicing).

CSS itself is very well deined by the W3C as well as HTML is. The definition there is not very user-friendly but it's correct so with some will you can learn a lot there as well. w3schools is nice made as well (and that site somehow makes it over the years, looks at least some brain is behind it). HTML/CSS, that is the WWW, grab your source :D

For PHP there is php.net. For wordpress, well, it's always changing and consumes resources of your personal career, so do not focus too much on to it. Its well kept developed anyway so, just look for whats good for you, do not focus on wordpress too much.

Answer 2

As far as CSS goes, there isn't a whole lot of WordPress specific stuff in this area. Go to w3schools and go through their tutorials. As far as learning how to build a theme, the two best resources I can recommend are the codex's theme developer section and the default theme (as of now, Twenty Ten). Read through the Theme Development page and the Templates page to get a good basic understanding. Then, just read through the source code of the default theme, using the developer docs (especially the Template Tags and Function Reference pages) as a reference.

I hope this helped!

Answer 3

Step 1: Create a child theme of a good solid parent theme. A. Install the thematic theme. B. Follow their instructions for making a child theme. (Move the thematic-sample-child-theme folder outside of the thematic folder, under wp-content/themes. Now you'll have /wp-content/themes/thematic, and /wp-content/themes/thematic-sample-child-theme. C. Rename the latter directory to your new preferred theme name. D. Go the appearance screen, and activate your new theme.

Step 2: Edit styles.css, and experiment with CSS. A. For instance, add:

#primary, #secondary {
   background-color: #e8e8d6;   
   margin-right: 10px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   padding:18px 0 0;
}

#branding {
    background: url(http://example.com/wp-content/uploads/2010/09/example.jpg) top left no-repeat;
}

It's easiest to start just by changing colors and fonts, then you can get into fancier things such as rounded corners, floating divs, etc.

Step 3: Use the original style.css in the /wp-content/themes/thematic directory as your guide. Really study that style.css. Use a reference such as http://reference.sitepoint.com/css to help understand each rule.

With a child theme you can change as little or as much as you like. For instance, some will only change the #brand logo, as shown above. The more you try, the more you'll learn.

Answer 4

The most important thing you can do is create a local WordPress install that you can play around with. (Instructions for: Mac | Windows | Linux) This will allow you to experiment and make mistakes without the rest of the world watching.

The fastest way to learn is by modifying existing themes and creating child themes for the various frameworks. Of those, my personal favorite is Thematic. It's very difficult to start from scratch, so these resources can help you hit the ground running.

To learn CSS, w3schools.com is the resource. For many designers, Firebug is an indispensable tool. Don't leave home without it!

Answer 5

Kylan mentioned Firebug for firefox.

It's a really great tool for seeing how others built their themes.

Download a few cool looking themes and then use Firebug to explore them. That helped me out alot when I got started.

Answer 6

these guys have helped me out a lot (and still do) http://digwp.com/ Their bookis realy handson and easy to understand & so is their blog!