Useful resources for creating a WordPress theme

January 1, 2007

To kick off my blog for 2007, I am going to write a series of posts for people wanting to know how to create a WordPress theme. Here’s some resources I’ve found useful for putting one together:

Graphic design:
- Useful to have: Photoshop/Fireworks or the like to create your graphics
- For inspiration: sites like Netdiver, Design Melt Down, CSS Beauty, Unmatched Style etc can help sometimes.
- Color scheme ideas: Colorschemer, Daily Color Scheme and Flickr (photos are a brilliant source for color combinations). Flip through your favourite magazines (I love looking through my How Magazines and books for ideas. Look at how you’ve designed your house/bedroom/office – what color combinations do you like?
- Fonts: DaFont for free fonts and Linotype for purchasing professional fonts.
- Images: SXC for free photos and iStockPhoto for inexpensive illustrations and photos.
XHTML/CSS templating:
- W3Schools for learning or for quick reference.
- Firefox web developer toolbar – essential for checking and testing your code. Great for live changing of your CSS.
- A text editor like Notepad++ to write your code.
- Browser Shots – for testing your design in different browsers
- For reference: Listamatic, Layoutomatic, Practical CSS and A List Apart in general, CSS Zen Garden for insight into how to achieve different layouts and effects using CSS and Layout Gala
Understanding how WordPress themes are put together. I can’t emphasise enough how important the WordPress manual is. Don’t miss the Stepping into templates information.
Understanding “the loop” and various WordPress tags.
Knowing when and how to install plugins. WP-Plugins.net has many plugins, but doing a Google or delicious search for “WordPress plugin” and then the type of plugin you’re wanting will help you find many others.
Knowing at least a little bit of PHP if you don’t want to feel so scared by WordPress tags, the loop, plugins and your templates. There’s some tutorials on W3Schools which can help.

Have you found any others which you find essential?

http://www.my-paradox.net Sarit

Thanks! They really are useful!
http://www.thewatchmakerproject.com/ Matthew Pennell

Adobe’s new Kuler tool is another great colour schemer resource.
http://www.turtleinteractive.com Tim Bednar

The new FireBug is the most awesome tool for coding CSS for templated systems like WordPress,

http://www.getfirebug.com/

It is an essential tool for tweaking CSS and debugging JavaScript.
http://engtech.wordpress.com engtech

I’ve been doing a series of theme reviews looking for bugs in the wordpress.com installed themes.

My help page is a pretty good resource for some very common bugs people have in a lot of their themes.

http://engtech.wordpress.com/tools/wordpress/wordpress-theme-reviews/help
http://garryconn.com Garry Conn

Hey there,

I found your article from the reference in Darren Rowse article and wanted to tell you that this information will definately be very useful for me in the future. I want to learn how to create custom wordpress themes. I have wanted to do this for some time now, and some how it always gets put to the side. I will be saving this article and reading it again when I have some time set aside to work on this. Thanks for the great info.

- Garry
http://jrocas.com.ph jhay

Another great resource. I’ll definitely create my first custom theme this year. Thanks!
http://alpesh.nakars.com/blog Alpesh Nakar

This is an awesome!

Thanks for summing it all up

Cheers!
Alpesh
rachelcunliffe

You’re welcome
Pingback: Weblog Tools Collection » Blog Archive » Useful resources for creating a Wordpress theme
rachelcunliffe

Thanks Matthew for the Kuler tool — hadn’t seen that before.

Tim, I’ve tried using Firebug but I guess I’m so used to using the CSS editor part of the Web Developer Toolbar that I didn’t find it so essential. But, others swear by it.

engtech, your theme review looks so thorough and should be a useful guide to people looking at default themes.
Pingback: 24th Floor - Technology, Web, Tips, Tutorials, Jokes and my life. » Useful resources for creating a Wordpress theme
Sterne

Open Design templates are also extremely useful. Sites like http://opendesigns.org/ http://openwebdesign.org/ http://andreasviklund.com/templates/ and http://www.freetemplatesproviders.com/ should definitely be on the list for both inspiration and standards-compliancy educational purposes…..
http://www.outsourcingboom.com sandeep

Very Resourceful post. Great!
http://www.brilliantlogos.com saif

what a reference
http://blog.tassoman.com Tassoman

You could also work with open formats (png and svg) using free software as The Gimp and Inkscape. Instead of Adobe’s.
Pingback: Useful Resources For Creating Wordpress Theme » In My Pad
http://kevh.net kevh

thank you, appreciate the work you put into providing this information to the community. also, another handy graphic editor for windows users is paint.net, especially handy for creating simple lineart
http://www.exanto.de Ingo

Hi, thanks for the links! A great tool for extracting color schemes from pictures can be found here:

http://www.degraeve.com/color-palette/

Greetings,
Ingo
Pingback: serialdeviant.org(y) » Theming and design
Pingback: links for 2007-01-03 - Squitix.de
http://blog.copperred.net vestel

I really liked the Dreamweaver Plugin for creating wordpress templates. A lot of plugin buttons and standart function calls selected as buttons for easy navigation.
Usefull thing for creating WordPress Theme on existing design layout, which is already converted to html/css and images.
Pingback: links for 2007-01-03 at Webmercial.dk
jack

Good post!
Pingback: Freakitude Technology Blog » Blog Archive » Hot Picks - January 03, 2007
Pingback: Almost, Not Yet - » Blog Archives » links for 2007-01-03
Pingback: Terrón Org » Blog Archive » Recursos útiles para crear temas en WordPress
Pingback: DV for Teachers » Blog Archive » WordPress Theme Resources
Pingback: links for 2007-01-03 » Bloganbieter.de
http://www.turtleinteractive.com Tim Bednar

The new beta FireBug is completely different from the older versions. One of the best things is that you can detach the inspector panel to a separate window; if you have 2 monitors move it to your second monitor and edit HTML/CSS on the fly.

Plus, if you open a new FireFox tab you don’t lose your changes (like WebDeveloper).

The other amazing feature is the layout box which shows you offsets, margin, padding measurements with a ruler. This is killer.

FireBug is absolutely essential for debugging JavaScript no more need for the alert(‘foo’); debugging.

Now if only something like this worked on IE….?
Pingback: Drainedge Link Tank » Today’s Links
Pingback: ceslava.com » ¿Cómo crear una plantilla para tu blog en Wordpress?
Pingback: Creazione di temi per il WordPress
Stahn

Opera Developer Tools: http://dev.opera.com/articles/view/opera-developer-tools/

Includes Live CSS Editor and DOM console.
http://veines-noires.org Bárbara

Great article!
http://www.w4network.com wayne

thanks for the list
Pingback: ARTbird309’s Blog » Blog Archive » links for 2007-01-04
Pingback: at Style.overSubstance
http://digitol.blogspot.com Sumesh

hai, i am new to this blog. i have a Blogspot blog, http://digitol.blogspot.com. I would like to make a new, more graphical design, of my own. You said that Photoshop is useful. Where can I find some articles and tutorials on webdesign using Photoshop?
http://digitol.blogspot.com Sumesh

sorry, i messed up with the link-

its http://digitol.blogspot.com

Thanks,
Sumesh
Rachel C

Sumesh, I would get a few photoshop books, there are some good tutorials online – you might find Computer Arts helpful, or Photoshop TV.
Pingback: links for 2007-01-04 at Amy Stephen
Pingback: Akkam’s Razor
Pingback: blog.mojeauto.net » WordPress Theme Tools
Pingback: mhinze.com » Blog Archive » links for 2007-01-03
Pingback: Web-Sites of the Month: December 2006 | Smashing Magazine
http://terra.incognita.ws craig kerwien

Great list. Also worthy of mention: I’m using aggrss, a plug-in to display RSS feed in a column. Available at http://www.soderlind.no/

It’s a great resource to supplement news content to a site.
Pingback: Useful resources for creating a Wordpress theme | cre8d design: blog design, Wordpress themes, Drupal, Web 2.0 : Popular Bookmarks : eConsultant
Pingback: links for 2007-01-04 at guessboy
Pingback: Trasteando con OS X » Posts » Recursos para Wordpress
http://tdsdigitalwebsolutions.com Tina Stephen

I just wanted to thank you for what you’ve provided here. It will be invaluable when I make the plunge to make my own themes and help to teach others to do the same.

I would also like to extend a HUGE thank you to Tim Bednar (in an above comment) for mentioning Firebug! This is the ultimate tool that EVERY web designer should be using. It’s also pretty handy for those people that are wanting to learn HTML and CSS. I don’t know how I lived without this extension!
Pingback: Wordpress theme: Creating a theme (Step 2) | cre8d design: blog design, Wordpress themes, Drupal, Web 2.0
Pingback: Educated » Blog Archive » Useful Tips for WordPress Theme Design
Pingback: Educated
Pingback: Utopia Parkway · links for 2007-01-04
Pingback: Secret 2 Make Money Online » Useful resources for creating a Wordpress theme
http://tinytreasures4you.leo-crebiz Natti

Thank you so much for sharing these great links. I’ve still finished some themes and must find time to step into the templates.
http://www.berlin-dad.de Antje

luv it – thanks a lot! Great links!

Useful resources for creating a WordPress theme

Hi, I'm Rachel Cunliffe!

Keep updated