WordPress theming update

A few days ago, I managed to work through part 3 of wpdesigner.com’s WordPress theming tutorial. This left me with a locally installed copy of WordPress, a plethora of test posts (which are invaluable), and a rudimentary theme. And perhaps most important of all, I learned a lot about how a WordPress theme works (and a little bit about php along the way too!).

So now I’m mulling over how I want this blog to look. I’ve been following Lauren’s posts over at Creative Curio which have provided valuable discussion on the topics of design and layout. I’m probably going to go with something infinitely more pedestrian than Lauren. I’ve also been mulling over the huge amount of examples at Design Meltdown and I think I’m zeroing in on something closer to minimalistic. While I like these types of sites, I can’t deny that a minimalistic design might also be easier to code! :) It’s really the css part of things that scares me more than anything.

I’ve also finished reading Dan Cederholm’s book Bulletproof Web Design, and that has taught me that things may not be as difficult as they look. Most of the methods he uses for things like rounded corners and expandable boxes make common sense and are easy and clean to implement. That bodes well for a CSS simpleton like me.

So for now, I’ve come up with a very rudimentary layout. It’s pretty much a standard two-column layout but I’ve added a left column to hold the ‘header’ image. I decided to put in the side purposely just to avoid the header+2columns+footer monotony that seems to prevail in WordPress blog designs. Does shoving the header in vertical left side column change that? Likely not, but we’ll see where it goes. I’m not fixed on the layout, it’s likely to change, but it’s a starting point. I’m also determined to likely keep everything white -especially the posting area- since I’ve been stung by posting images and photos on top of a weird background color only to be disappointed that things look better when they show up in Google Reader than they do on the blog itself.

In the end, I want the design to be clean with a generous amount of whitespace. For now, I’m thinking of marking off the various areas with curved corner hatches, likely very thin and grey coloured to denote the different areas without loading up the page with images:

rough_sketch_small1.jpg

9 thoughts on “WordPress theming update

  1. Cool. I dig it. I’m working on getting halfway competent with CSS by designing/building something myself. I have a feeling that the design/mockup process in Inkscape is a lot more fun than trying wrangling the CSS will be, hehe.

  2. @OmegaMom,

    You’ve just summarized just about how I live my life in that last sentence! :) Keep us updated on how it goes.

    @JakeT,

    You’re right about Inkscape. I’ve done a few mockups of different ideas in Inkscape, and while I’ve been gung-ho when starting them, after they’re partially complete, they seem to lose their appeal. I may get around to posting some of them just for giggles. It’s a cool program for laying stuff out because then you can slice out images fairly easily. Heathenx did a great tutorial on doing exactly that in Episode 16.

  3. On completely unrelated note, do you have any screencasts about using Inkscape on a small screen?

    I was playing around with it yesterday in Gnome and just didn’t feel like I had the screen space to work well on my laptop (15″ screen, resolution won’t go tighter than 1024×768).

    Are there tricks you can use to manage all the little other windows well? Maybe using Openbox? Any good resources online about that? Thanks!

  4. JakeT,

    While Openbox will get you smaller title bars and thin (or no) borders, it probably won’t help you out much. I do know that Inkscape 0.46 will be coming with dockable dialogs so they won’t have to be floating around all over the place. They will slide out from the side when you need them.

    Also, if you run Compiz/Beryl, you can open up all the typical dialog boxes you use and group them together.Then just alt-tab between them. I forget the hot-keys for setting this up, but I’m sure you can look it up. It effectively lets you have a single dialog box that you can flip around to get 5 or 6 dialogs in one. That might help too.

    Good luck and let me know how it goes.

    And thanks for reading. :)

  5. yeah, I was thinking about trying out fluxbox for something similar.

    I did see that F12 hides all the dialogs. I might try that.

    When’s .46 come out? Have you tried the preview–is it stable enough for everyday use?

  6. Jake,

    I didn’t know about F12. Thanks. As far as 0.46 goes, I think it’s coming out very soon. They’ve held and chosen their About Screen contest winner, so it shouldn’t be long now. I can’t seem to find a date at the moment.

    There are development builds you can run. I haven’t run 0.46 at home on my linux box, but I’ve got it running here at work on XP. Check out: http://inkscape.org/download/?lang=en

    For the windows builds you need to get the 7zip program to unzip the files. No big deal though. Once you extract it, you just run it from the unzipped directory. Stability-wise I haven’t noticed anything too weird, but then again I don’t use it that often at work.

  7. Hey, thanks for that link to the ‘how to build a wp theme’ tutorial. That’s a great resource. I started on it today and it’s really great.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 7 = 14

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>