At SBTUG this week we are having a WordPress Extravaganza – everything you need to know about running WordPress as the CMS of choice for your business. My talk will showcase a few of the WordPress sites that I have done without having fantastic skills in CSS and PHP – see my Portfolio Page – and the great features available in WordPress.com, including how this very site was created for a total cost of US$12 / year (+ domain) – see WordPress.com for your domain. I will also talk about WordPress Themes, CSS, and the benefits of choosing a Premium Theme over a Free Theme.
CSS
Firstly, to create any website, you need to understand some CSS. It is well worth taking the time to learn the basics. After months of being too scared to touch the CSS in some of my sites, I decided the take the plunge and got Russ Weakly from Max Design to give me a day long crash course in CSS. For me it was well worth paying the money for a one on one course, but Russ is starting a series of CSS, Javascript and Accessibility courses soon, and I would highly recommend his courses to learn CSS. If you don’t want to do a course, there are some good web resources available and I would start with the W3Schools.com CSS Basics course. There is also CSSTutorial.net which also covers the basics. This is a good resource for showing how just changing the CSS affects the layout and structure of the site. No amount of CSS knowledge is going to benefit more than just playing. So start with Firebug in Firefox (or the IE Developer Toolbar if you have to use IE – it is Built into IE8 Developer Tools), or the Inspect Element command in Chrome. The great thing that Firebug (or the other tools) does is show you that CSS is just a series of boxes. And once you can understand that, then understanding CSS is a lot easier. These tools also allow you to test out changes, before committing your changes to your CSS file. Must Know CSS These are just a few of the CSS topics that I would recommend you need to know about.
And for some more advanced topics
And if you want to go the whole hog, the W3C CSS reference is not that difficult to understand once you know some of the terminology. http://www.w3.org/TR/CSS2/cover.html#minitoc
WordPress Themes
There are thousands of Themes for WordPress. They can be free or you can pay hundreds of dollars for Premium themes or even have one built especially for yourself (eg 99 Designs). The options are endless – and the choice is overwhelming. My suggestion is to just start somewhere, with a theme that you like the look of, but are just wanting to tweak a bit. That way there is less PHP tweaking and more just modifying the CSS. Also, using Firebug allows you to “steal” (sorry, borrow) ideas from other sites you like. I would also go down the path of buying a premium theme – one that costs up to say US$150 as the support will be worth it at some stage. One thing that you need to be aware of is that the CSS in these themes is usually based on a CSS framework (see below) or has a lot of extra CSS in there to cover the multiple theme options, or they have CSS elements applied via PHP, or worse still, they have 3 or 4 CSS files and you are not exactly sure where to change the CSS. This can be very confusing, and make a beautiful theme that you love, be very difficult to work with.
Some of the terminology around themes can also be confusing, such as Child Themes, Magazine Themes, Portfolio Themes, Theme Options, etc etc. Also themes can have built in options such as LightBox, Thumbnail creation, built in SEO features, multiple sidebars or zones etc etc. The only real way to work all this out is to try one and see how it works for you.
CSS Frameworks
Many Themes use CSS Frameworks. There are a heap of different Frameworks, but mostly what they do is set up a grid for you to work with (usually 950 or 960 pixels wide). You can usually tell if your theme is based on one of these frameworks if it has a Div named Container, as this is the very common layout of the white box on a darker background. One of the widely used CSS Frameworks is Blueprint, and you can see how the BluePrint grid works with this example http://www.blueprintcss.org/tests/parts/grid.html. There is also a basic video about Blueprint which is helpful to get your head around any type of grid based framework. Most of the Frameworks make use of the CSS construct of applying multiple classes to the one element. This is what happens with the “span-24 last” type syntax. The Span-24 class is applying the width of the box, and the “last” class is setting the right margin of the right hand column – usually to be zero pixels. Frameworks can be good, and easy enough to work with, and they give you a way of structuring your site that is at least going to look consistent with elements aligned to this invisible grid. However, if you want to control your site to the nearest pixel, you may not want to use a constrictive grid. Usually when you mess around with a grid, you will stuff it up and make it look ugly.
Base Themes
WordPress themes have become big businesses and there are a number of large Themes that are now base themes for many others. The biggest of the lot is of course, Thesis and another is Thematic.
Favourite Themes
The free theme that I used that is based on the grid framework is from Graph Paper Press and it’s called Modularity Lite. It was quite a good free theme, and there is the premium Modularity Theme also.
WordPress has an extensive gallery of Free Themes, but the choice there is quite overwhelming.
The Magazine Theme I used is Arthemia Premium from Colorlabs Project (also see JobSeekr by Michael Specht – his blog is Cutline Theme). Colourlabs have some great themes and the support is good also.
Other notable theme sites are Woo Themes (Craig Bailey’s Xen SEO site) , Elegant Themes (eg TechRepeater also by Craig Bailey) and Themeforest.
And last but not least, this site is the Vigilance Theme by ThemeFoundry, which just happens to be included in the themes offered in WordPress.com.
Update October 2011
Deleted some broken links.
Excellent summary Jodie, and some great links there. Thanks!