WordPress: Theme Design Tips & Tricks

Greets. If you never did a WordPress theme before, then this post is for you. As you may already know, I released my very first wordpress theme a couple of weeks ago and it’s the one you’re looking at right now (unless you’re reading this from last year’s archive). I can’t say it was very easy developing it, but I noted down some tips that would make the process quicker for you whenever you decide to create one yourself.

• Get yourself some paper and a pencil and start sketching. You may skip this, but you’ll regret it!.. Unless you’re a photoshop genius, master of disaster, creator of a devil..
• Imagine your theme while you sketch – not about the look, but about how it will work. You must keep in mind the menu, posts, posts headers, meta, content. You may also try to imagine the sidebar along with some widgets and don’t forget about the footer – don’t make it too complicated (and yes, you should include a “wordpress driven” link – it rocks!).
• Think about your future theme. If your posts and pages and main post-roll look alike, you are ready to draw your sketches on computer (photoshop or whatever). If they don’t then I suggest you sketch your other pages on paper. If your main page is done it shouldn’t take much time.
• Ready? So your theme’s on computer now and you’re ready to slice it…? No, you’re not. You wouldn’t want your mates to tell ya “it’s okay, but it could have been better” right? Feedback! Feedback! More and more feedback! Upload your drawing somewhere and post it around asking for comments, likes and dislikes. Don’t listen to everybody though, only those who you agree with (there are tonnes of pseudo-designers out there who’d like to spoil your work). Make changes, ask for more. Make sure you don’t get into an infinite loop, two or three times is quite enough.
• Coding time! This is the step where you want to slice your theme into one (or two) XHTML file (don’t forget about the CSS stylesheet). Don’t mix this up with wordpressizing. This is the time where you can make some final minor changes. Now, put on your sunglasses and get ready to rumble! 8)
• WordPress. Wha?! Okay, take off your sunglasses, I was joking… I hope you’ve got a local webserver up and running with a copy of wordpress installed with the default theme. If you don’t, stop right here. Go get some XAMPP Web Servers package for Windows or install Apache, PHP and MySQL on Linux, then setup WordPress on your machine, cause working with a remote server through FTP WILL be a pain in the ass. Done? Fine, make a copy of the Default wordpress theme into a new directory and start editing it file by file: style.css, header.php, index.php, sidebar.php, footer.php, post.php, comments.php, page.php, … That’s the order I like. Hope you got my idea…
• So you didn’t get my idea…? Remember the XHTML file you have? Split it up into four parts: the header, the footer, the sidebar and the content and fill in your wordpress files. Remember that you have to use the WordPress Template Tags, so keep your WordPress Codex nearby.
• Polish. Widgetize. Promote.

The last step is all about debugging. Install some plugins, see how they work (or don’t), make corrections – that’s called polishing. Mine were almost all in the CSS stylesheet, mainly for youtube videos, image alignment, etc. Once your theme is complete, show off! Write about it, tell your friends, post into galleries, submit on CSS galleries (if you think it’s good enough). I’m not saying that you should make the theme available for free download (I didn’t! Yet..), no, just post screenshots or live previews. Get more and more feedback comments that generate new ideas. You’ll be ready for version 2 development in no time. Once version 2 is up and running, you can publicize your first theme, making your second one exclusive!