Creating a WordPress Theme Without Images

What do I mean?

If you are creating a basic theme for distribution, consider designing it, or at least offering a variation of it, that is image free. As in style everything with CSS, and don’t resort to images for the layout and design.

Why do it?

Customization. It makes it so much easier for the novice user to change a bunch of color values in the CSS, and add in their own images, then to try and remove yours or change the colors. I have spent a lot of time re-skinning themes by trying to make sure that the images I use in a design match up with the original theme.

Also you will be surprised by just how much can be done with CSS without using images as a crutch. Often what the user is looking for in a theme is the functionality and layout, not the pretty styling (since everyone else who purchases the theme will have the same style). So make it easy for the user to get the functionality, remember after they purchase the theme, it is their theme, not yours. Design with the user in mind.

Who is doing it?

We are! Though the theme is not released yet (look for it in the next week or so). It is a theme that focuses on structure and functionality for a CMS style site. The look and feel of the theme can be changed in a few minutes, a new background image can be placed in easily, and then you have a totally new site, but with great functionality!

Also check out the News theme by Quommocation. It looks beautiful, has great typography and layout, and doesn’t use a single image (except for that post photo). Check out the Demo.

Anything else?

In attempting to try this style remember a few things:

  1. Comment your code. I have encountered lots of themes that have far too little commenting, but never a theme that has too much. Since we are creating themes for the purchaser, I would aim for too much commenting. Make that code very easy to understand.
  2. Separate out style code. Consider adding a section of your code for the colors and other aspects of the theme that can be changed. This will make it easier, instead of having to look through code for the :hover style on that <a> tag.
  3. Design places for images. Just because you don’t include images, doesn’t mean you shouldn’t make it easy for your user to. Consider making it so that you can add a background image to the <body> that will completely restyle the site, but without having to change any code. That would be a graphic designers dream come true.
  4. Focus on typography and spacing. These are the cornerstone of every good design. Get these right, and everything else will follow. Now you have to focus on them because you don’t have any images. Check out Khoi Vihn’s site Subtraction. Yes, he does use an image, but focus on the structure, typography, and grid. It’s beautiful.
  5. Think outside the box. CSS is powerful. Use it in new ways.

That’s your new idea for the week. Feel free to post any other examples or what you come up with in the comments. Enjoy!

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>