Daniel Harrison's Personal Blog

Personal blog for daniel harrison

WordPress Theming October 16, 2007

Filed under: development,internet,me — danielharrison @ 12:59 am

Small Potato (should I not be using capitalisation?) created a very useful resource on how to create a WordPress theme.

I found it most useful in understanding how WordPress is hooked together. Having recently joined the blogging fraternity I needed to create a theme but went about it in a slightly different way. If you’re familiar with css, html, php and the like, but like me, just starting writing and itching to be up and running, then this is the alternative technique that I used. I tend to use this approach more generally for any site that’s already got well formed and structured content and treat it as a website refactoring.

First things first, make sure you’ve got firefox, the web developer extension as well as a trusted editor (I use editplus).

Choose your theme, I just switched to the classic which seemed pretty simple and wasn’t going to be too hard to dig through and edit. Add a comment and some sample text you can use that’s going to give you a representative sample, throw in a few paragraphs, lists, bold and italic text so that you’ve got a good sample of what’s going to go up on your blog.

Next download the theme or just copy the existing one and rename it to your site so you can make changes locally and offline, eg Classic -> knowtu in my case.

I didn’t particularly care that I would have an incomplete site that’s available for a few days so I could do this live and didn’t really need a local wordpress install or config. If you do, Small Pototoes’s guide links through on how to do this. I think from memory in Suse for example it’s available as an app to install via the yast and being a php app it’s pretty straight forward anyway.

First step, save the page using firefox’s save page as, save it as ‘Web Page Complete’ to a suitable location.

Save Page as in firefox

Secondly, Open the content in firefox and your editor and include a reset.css. Why? well once everything’s on a level playing field it’s much easier to go forward as well as being closer to deterministic. I first came across the reasons for a reset css via an msdn blog. Secondly change the existing style.css reference to a local one. Finally remove the content from the style.css. Viewing the page in firefox should show a pretty blank page with all fonts the same (including headings) which is exactly what you want as the next step is to start moving and sizing things and you want a blank slate to go nuts.

Change styles to local and include a reset.css

Start looking at the content and figuring out how it all hangs together. I also ran htmltidy over it, as if you want to grok the content, then well formed and layed out is usually easier.

Where the web developer extension comes in, is that it gives you way to edit the sites css and see the changes instantly so you can play around and see how you want things to sit. You can enable it via clicking on the CSS dropdown and selecting edit CSS, or ctrl+shift+e. You should see a display like the one below.
Firefox edit css dialogue.

So onto the formatting, structure first, typically you want to play round with layout and get a feel for how it’s going to sit on the page which I tend to find starts giving you colour and font ideas. When I was doing mine I also changed all fonts to Verdana and started getting fonts the rough size. When doing the font sizes and structure I tend to use the named measures, eg small, xx-small. The advantage of this is it really shows proportions and if you’re not sure a quick trick I use to visualise is the ctrl+mouse scroll. This quickly ups and downs your font measure by one which is handly to see if you want a bigger or smaller font. This is where the edit css comes in really handy again. If you turn on view style information, you can quickly see the structural mark-up by moving your mouse over the page. Typing in the CSS updates as you go, so it’s a neat, cheap WYSIWYG editor with minimal overhead. If you CSS is rusty or you need a reference, try ILoveJackDaniel’s handy pdf cheat sheet. One thing though, don’t forget to save. From what I saw switching tabs would loose your edits.

Finally start thinking about colour and fonts, if you’ve been playing around with the structure you’ve probably already been doing this or got a colour scheme in mind or even drawn and coloured it out on a napkin. I used Adobe’s kuler to visualise colour themes.

You may during this notice the markup isn’t quite what you like, if you edit the page to be what you want in an ideal circumstance don’t forget to go back to the template and make the matching changes. It’s usually pretty easy to track things down. Refer to the WPDesigner tutorial if you’re struggling. I tend to work better with formatting etc so I mainly deleted stuff like the sidebar content and things I planned on growing later. XMLFriendsNetwork?, who needs it, I’ve got plenty of friends already? I’ve done quite a bit of xml stuff and if they’re still friends after all this time, good for them. I also did some minor formatting as I went to spacing, converting a few things to div’s and added some extra classes so I could identify them better.

Finally copy any css images back in the theme folder, create a screenshot called (not surprisingly) screenshot.png and upload to the themes folder in wordpress. Select it in wordpress and it should now be running. You’ll probably want to run it back through the w3c validator to make sure it’s all kosher, but if you’ve done it right there should be no changes and it will all work out happily.

I tend to use this approach for sites that have well formed content and structure and it’s pretty quick to get a site with a new design. The power of this approach is based on the strength of CSS and the more semantic the markup the easier it is to radically redesign a site in a matter of hours (Granted WP classic is pretty simple).

I point out I also only really cared about IE 7, firefox and browsers that could handle w3c CSS standards and for people likely interested in this blog along with 2/3 rds of the web I figure the majority are going to be just fine with this. Having actually done sites with graceful degradation all the way back to the 4 series and for something that I want to be fun I just couldn’t stand the pain.

So in wrap-up, this got my site up, running and uniquely mine pretty quickly. It’s not complete and hopefully like the content, will grow over time.


3 Responses to “WordPress Theming”

  1. retro Says:

    I do love the classics.

  2. Melina Says:

    very interesting. i’m adding in RSS Reader

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s