Blog

In my series this week on how to get started blogging, I’ve touched on the business of blogging for yourself, why you should use WordPress and how to configure it, and the best WordPress plugins.  Today I’m going to focus on look and feel.

WordPress uses a “theme” system to bundle images, CSS files and PHP templates into a single package (well, zip file).  You can browse through the official WordPress theme gallery, or you can search the web for “WordPress themes” and find all kinds of good stuff.  Go browsing around, find one you like, and then make sure you really, really like it exactly the way it is.

Don’t ever, ever, ever edit a theme.

Unless you make a living doing CSS work, unless you understand the intricacies of browser rendering engines, unless you put absolutely no value on your time, don’t ever open the hood and start monkeying with the theme.

Want proof?  Check out this screenshot of SQLServerPedia by Stuart Ainsworth (who blogs about SQL Server at CodeGumbo.com):

The perils of web page styling

The perils of web page styling

That’s SQLServerPedia, and no, it’s not supposed to look like that.  It looks fine on Firefox on a 22″ monitor, looks fine on IE on a 19″ monitor, but it looks like boiled hell on IE on a 22″ monitor.

Why does it look like that?  Because us Questies couldn’t find a theme that was “just right”, so we worked with our graphics department to throw all kinds of things into an existing theme.  It’s been a long, hard slog through CSS files and PHP templates, and it’s never freakin’ done.  Fix one thing, and three other things pop up.  I’m a SQL Server DBA, not a CSS guru, and it’s frustrating to have stuff like this get in the way of the technical stuff I want to accomplish, like writing and editing articles.

I’ve run into this same problem on my own personal blog.  Every year or two, I’ll get itchy about the way the site looks, and I’ll want to change the theme.  Mix things up a little.  Keep it fresh.  Whatever.  So I go around looking for templates, and I’ll find one that’s really close, and if only I could change one thing…bam, the CSS nightmare starts.

Even worse, when you tweak a theme, you can’t upgrade to newer versions of that theme without rebuilding your tweaks.  Theme editors sometimes update their themes by popular demand for certain tweaks (like easier resizing, or maybe different numbers or positions of sidebars) and you’ll want to use their free upgrades – but you can’t, not without investing more hours in a text editor.  Blech.

My recommendation: pick a theme that meets as many of your criteria as possible, and then stick with that theme the way it is.  So what criteria do we use to judge a theme?

Fluid Width versus Fixed Width

Fluid width themes will automatically expand when the reader has a big monitor.  Fixed width themes are stuck at around 1024×768 or 800×600.  The theme on my site right now is a fixed width theme, and here’s what it looks like on a 22″ widescreen monitor:

See all the wasted space on the sides?

See all the wasted space on the sides?

For an example of a fluid width site, check out Amazon.com.  No matter how wide your monitor is, Amazon will suck up the whole thing:

Amazon uses the entire page width

Amazon uses the entire page width

There’s pros and cons to each approach.  If I could find a fluid width theme I really liked, I’d use it, but they’re surprisingly hard to find if you want to use photos across the top.  Decide early on which style you want, and don’t ever try to change a fixed one to a fluid one without professional web guru help.  (And I don’t mean me, because I’ve lost days of my life to that thankless task.)

Don’t Worry About the Images

Most themes come with a stock photo across the top or down the side.  Maybe it’s a happy couple, maybe it’s a house for sale, maybe it’s a goth kid with an eye piercing – ignore it.  It’s easy to swap out photos.

For photos across the top of your theme, you can use your own photos, or search Flickr.  Use Flickr’s advanced search and at the bottom of that search form, check out the Creative Commons options.  You can check the box for only searching Creative Commons licensed content, and reuse those photos on your own site – as long as you’re not trying to make money, and as long as you give them credit for their photos.  (Pay attention to the licensing.)

No matter what kind of site you’re doing, you can easily find funny images to put across the top, but…

Don’t Use Themes with Irregularly Shaped Pictures

Some themes can’t be easily edited because they threw so many graphics into it.  This Japan-Style Theme has all of the big warning signs:

Note the wacko shapes and transparent edges of images

Note the wacko shapes and transparent edges of images

There’s all kinds of curved images in here, buttons with graphical backgrounds, transparent leaves on the background, you name it, it’s got pretty graphics.  Problem is, if you want to swap one part of that out, it’s going to be a huge pain in the rear.

If you’re a graphic artist by profession, then show your stuff.  If you’re a database administrator, any attempts to be a graphic artist are going to look – well, they’re going to look like a DBA trying to learn Photoshop.  ‘Nuff said.

Know a Little About the Theme Designer

Themes come out, new browsers come out later, and the abandoned themes don’t always work well with new browsers.  Ideally, find a theme that has been out for a while and has been updated at least once so that you know the original developer still cares about it.

I chose PrimePress because:

  • The author cared enough to put a page on his own web site about it.  Some themes are just on the WordPress gallery, and nothing else – the author doesn’t even have a home page.  You can bet that theme will never be updated again.
  • The theme had a changelog.  Holy moly.  I’ve used SOFTWARE that doesn’t even have a changelog.
  • The author had a web forum for support.

These are way above and beyond what a normal WordPress theme has, but keep your eyes peeled and you can find a gem like this. (Or, just use PrimePress like mine, hahaha, but please do us all a favor and don’t use my images at the top of the page.  The world gets enough exposure to my photos as it is.)

Wait – This Sounds Like a Lot of Work!

I think picking the right visual theme is harder than setting up the blog plumbing!  But if you focus on the mechanics first, get the site up and running, and make sure it all works, then changing the way it looks is easy to do along the way.  You can experiment with different themes all the time without having to blow up and rebuild your blog – WordPress makes that part easy.

Continue to Part 5: Blog Etiquette

↑ Back to top
  1. I must say that you’re right about editing themes though I think I have done it fairly successfully. I changed my theme from 3 columns to 2 so I could widen the content column. Otherwise, some of my blog posts would be too many pages vertically.

    I also resized my main blog graphic and edited a great deal of the presentation CSS such as modifying the look of ordered and non-ordered lists, the hyperlink behavior, etc. It was a lot of work, but I simply couldn’t find an “out of the box” theme I could live with.

    Even after all that work, I still can’t figure out how to make decent “glassy style” buttons for it.

    It’s interesting to note as well that while I have found SQL geeks to be more than helpful with problems I’ve had, you can post questions on http://www.wordpress.org regarding blogging until you’re blue in the face and get very little response.

  2. Incidentally, does your theme randomize the picture set at the top? Nice.

  3. Yep! I have a to-do list item to add more pictures into there one of these days.

  4. For the most part, I agree with you about not editing themes; for those of those that are constantly dipping our toe into the blogging waters, the temptation to edit themes often overwhelms our desire to write (which is the main point of a technical blog).

    HOWEVER, as a coder, I view my blog not only as an opportunity to share my thoughts on all things that I care about (and communicate with my peers), but also as an neverending work-in-progress. I write code; I reverse engineer other people’s code. I both create and destroy; a theme in WordPress will give me ample opportunity to explore CSS and php (two domains of knowledge that I do not claim to master). If I want to learn how CSS works, I have a perfect testing ground (my own blog); it does mean that I have to be careful to have a working copy at the end of the day (which is not always the case :) ).

    IMO, I think it has a lot to do with what sort of database professional you are; DBA’s (which I used to consider myself) want stuff to work without really caring about how or why it does it. They want it to be reliable, perform well, and flexible (so they can add new features to it). Developers, on the other hand, can’t live without sticking their finger in the socket.

  5. I am finding this site VERY annoying to read, and figured you would like to know about it. I am using Firefox 3.0.4. Every time I click on a link in one of your blog posts, read it, then return by using the usual “go back one page” button, I find myself back at the top, rather than at the point in the page where I left off. I don’t know the cause, but it is a major annoyance.

  6. Roy – that’s certainly unusual. Most people find my site very annoying because of the content, not because of the presentation. Are you sure you’re reading the content closely? ;-)

    In a little more seriousness, I’m using Firefox 3.0.4 myself, and I don’t have that problem here. I’m on a Mac, though – it may be a problem exclusive to Firefox on Windows, perhaps. I gave up troubleshooting browsers years ago – that was one of the annoyances that drove me out of development.

    You might try using an RSS reader instead like Google Reader or Bloglines. I just copy/paste my favorite blog URLs in there, and I read all of the blogs in the same presentation-free display. It cuts out a lot of that buggy visual distraction. I’m right there with ya – if I had to read a lot of blogs in their native habitat, I’d read a lot less blogs!

  7. Pingback: Thanks for the blogging assist Brent! | Jake Hackl

  8. Brent, This is a great post! Just the nudge I needed to get started. I do have one question about changing the stock photo that goes across the top of the theme. How do you do this? I go to Appearance and hit the ‘header image’ button, and it says “All header images are located in /[theme-name]/images/header. All images in that directory will be rotated.”

    How do I access the directory? Sorry for being such a newb:)

  9. …I’m pretty sure that most DBAs would prefer a theme that looked just like the command line…osql…no buttons, no GUI, no wacky colours.

    :)

  10. Brent, thanks for a great series of posts (yes I did read the etiquette post too). We are about to start a blog and I think you have saved us a lot of time on the start up. Really appreciate the help. What goes around comes around my mother used to say. You have helped us, we will pass help along.
    Ann

  11. Great post! Reading your blog is what helped me launch our tech blog http://www.itconflict.com/blog
    Great stuff, thanks for sharing the info!

Leave a Reply

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

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>

css.php