ThePickards
standards, accessibility, and ranting and general stuff by the web chemist

Okay, so I’ve decided to build myself a Wordpress theme. Great. The first question is how, precisely, do I go about doing this?

Step 1: Take an existing wordpress theme. Dismantle it. Work out the bits you want, put them together in the order you want. When I’ve got it approximately right, then I can start tweaking around with the more in-depth bits. Yes, I do have permission to be doing this to someone’s theme. I asked nicely (you’ll find out what it started out as in due course).

Indeed, it may end up being more accurate to say I just changed the design of an existing theme. I just don’t know. It depends how down and dirty I get with the code, doesn’t it?

Well, in order to answer that question, there are a number of other questions I need to ask myself first:

• What is the purpose of the site?
• What is actually going to be on the site?
• What sort of layout do I want?
• How am I expected to write a WordPress theme in PHP when I’ve never coded anything in PHP before?
• What sort of theme or ‘flavour’ is the new site going to have?

Well, the purpose of the site is roughly the same as before. It is intended that it will serve as a template for my blog. However, I do intend to bring my family tree into the new styling, as that had been still running on a different style to this one.

What is actually going to be on the site? Well, pretty much the same as before. Blog posts, blog pages, links to blogs I read, sites I visit, various badges and so on. I’ll also be planning on using the Revish API to publish information on books I’ve been reading or reviewing too, but that’s not public yet so I’ll just have to remember to leave space for it!

What sort of a layout do I want? I’d agonised over this before. Technically, without the use of javascript to tweak my css (which I ain’t gonna do), I don’t think I actually can have the layout I wanted, which was a semi-fluid design with narrow columns on the left and right that would have both a minimum and maximum width expressed in pixels but to be set as a percentage of the overall screen width, provided it fell within those ranges. Secondly, I’d want the middle content column to appear first in the source order, to take up the rest of the width of the page (up to a maximum specified in pixels), I’d want the columns to be of equal height, and I want a header and a footer.

I mean, I’m not asking for much, am I?

Actually, as it turns out, when I start really thinking about what I want, I don’t need the columns to be of equal height at all. I’m planning on them all having the same background colour, so it’s not like it’s going to be too blocky, and if I float ‘em — using the any order columns method from position is everything (thanks muchly), then I can stick my footer at the bottom just by clearing the float, can’t I?

Of course, there’s always the option of sticking the stuff that was going to go into the footer in the middle column, and more or less just doing away with the footer as a separate block, but I’ll have to decide what precisely I actually want in there before I can start making that sort of decision.

And I can live with the outside columns being fixed width, provided that the middle column will increase according to the size of the page up to some kind of maximum, just so I don’t get an absolutely ridiculous number of words per line.

Playing around with my current settings on a screen resolution of 1024×768, a sample piece of lorem ipsum text shows up that I’m outputting 87 characters per line — well above the recommended maximum of 55 to 60. However, it’s likely that someone suffering from dyslexia will be using an increased text size, and if the text size is increased by 50%, this brings you down to around 57 characters per line, or 67 characters per line if you’ve adjusted the size by two “notches” on internet explorer. I can live with that.

Obviously, at screen widths above 1024 pixels, the middle elastic column will get wider (to a maximum) and has on a 1280 pixel monitor got to over 120 characters per line. However, it’s my assumption — and that’s all it is, an assumption — that there won’t be many users with dyslexia who use screens at that sort of resolution. However, like everything else, if someone contacts me and explains why some of my settings are causing them problems personally, I’ll do my best to adjust ‘em. But at least let me get the thing live before you start picking holes in it…

And then there’s the contact me / search boxes and so on. One option would be to put them up in the header somewhere, so that they are nicely visible, rather than having them on one of my menu columns. I’ll maybe have to experiment with that and see how I get on.

What sort of theme or flavour am I going to go for? Well now, there’s a question.

I’m wanting to go for a light on dark design for a number of reasons — one of which being that I’ve only ever done one, and that was for a site for a mate which will technically live, I don’t think has ever actually been used in anger. Another one being that I happen to like light on dark designs, and it’s my bloody site, so I’ll do as I bloody well please on it.

Of course, being the accessibility zealot that I am, I will want to ensure that there is sufficient colour contrast between the various colours used in the design, but I am no longer going to pay any attention to WCAG 1.0.

I will, of course be doing my best to make the site accessible or at least striving to ensure that I’m comfortable with where the site lies in terms of the accessibility spectrum (it probably ain’t gonna be perfect, I’ll warn you now) — it’s just that I won’t be paying that much attention to published guidelines.

On the other hand, I may be testing for compliance with WCAG 2.0 (assuming I don’t get too hacked off with how it’s shaping up in the meantime). Now this may sound a little contradictory, but this is because I’ve already invested a fair bit of time and effort looking into WCAG 2.0, and the previous ‘style’ of this site managed to (according to me, at least) claim the Triple-A rating under WCAG 2.0, so I’ll be interested to find out where exactly my new design fits in, and it will help keep me up to speed with any changes that have been made to WCAG 2.0.

Sorry, where was I? Oh yes, the overall theme. Well, on the one hand, it’s my site, it’s my personal site and I don’t conduct a business from it, so I’ve got pretty much free reign to do whatever I like with the design and imagery. I’m definitely going to drop most of the images I’m using at present, and I was giving serious contemplation to going for more of an “alchemy” theme than a “chemist” theme, or maybe dropping the whole “web chemist” thing altogether and going for something completely new.

And then I thought, naaaaah. After some thought, I managed to come up with some ideas for a colour scheme and imagery that still retained the whole “web chemist” theme and yet was a complete change from what I’ve got at the moment — other than the “mad scientist” cartoon, which I’m still debating whether or not to continue with.

So what’s it all going to look like?

… you’ll just have to wait and see (unless you catch me in the middle of testing it), but I will be posting screen shots here now and again, so keep your eyes peeled.

This entry was posted on Friday, February 9th, 2007 at 11:46 pm and is filed under Blogging, The Pickards, Web. You can follow responses via my RSS 2.0 feed. You can leave a response or trackback from your site.