BlogStarter – Behind the Scenes

WARNING: If you’re not a CSS or WordPress geek, this post could be a little boring and tech-heavy to you. You can read the quick and easy version here. Or…

VIEW LIVE DEMO

DOWNLOAD (.zip)

Why yet another Free WordPress Theme?

As I have developed more and more sites, I have found myself repeating a lot of steps just to get started. I tried a few themes that other designers have made available with the promise of being a good starting point but was never happy with any of them.

The Problem with other starting point themes

The inspiration for this theme came because I saw others attempting to offer emptied out, basic themes as a starting point, or complex theme frameworks.

Some were out of date and needed updating to be compatible with the latest versions of WordPress. Some were packed with options and settings within the admin area. These are great for someone with out any programming knowledge who wants to simply pick a couple settings and be ready to go. Others still had so many custom hooks and little programming tricks that it would be too much of a learning curve to be worth it. Every one that I have tried or read about has either been too poorly done or too robust. I don’t want hundreds of ‘easy’ options in the admin section or a list of hooks that I can use. I just want a VERY basic starting point for constructing a simple blog theme.

What I have needed is simply an efficient way to start a fully custom basic blog. I’m talking about tweaking some colors, adding a header image, fix the fonts, and be ready to go.

Temporary Solutions

Every time out, I found myself  removing more than I was adding. Extra background images, extra style, unneeded layout, themes that required plugins to work, etc.

I actually found myself (don’t tell anyone!) starting with the default Kubrick theme and chopping out the stuff I didn’t want, digging through its awkwardly organized CSS to find all the different mentions of font-family and color, and then adding my own images and style on top of it. It wasn’t as ugly as it sounds in the end, I promise. But I would never stop at a point before adding in the new style, so that I had a good starting point next time. I always had to start with the brand new Kubrick, then chop away again.

The reason I would start with Kubrick is that I knew it at least contained everything that was needed. It has all the WordPress hooks (ensuring that it would work with all the plugins like it should), all the standard layout, all the standard style, etc. I found it surprising how many themes don’t call the wp_head(); or wp_footer(); hook, lack a widgetized sidebar, or in the worst cases claim to be compatible with 2.7.1 but do not include the wp_enqueue_script( ‘comment-reply’ ); to allow threaded comments.

Back to the drawing board

I finally sat down to create my ideal starting point theme and after outlining all of the problems I had with other themes and thinking about why I always started with Kubrick, I decided it only made sense to start there again. This wasn’t just to be easy. In fact it took a while since i wasn’t going for ugly and quick this time, I was going for clean and efficient. I wanted something that would take the least amount of time possible to edit into a new custom theme.

I won’t bore you with every detail, but I removed all the corny comments, deleted all the images, then started organizing the CSS. I wanted to remove every mention of font-family, color, background colors, link styling etc. I find that 99% of the time, I use one font-family for the entire page, then pick a couple spots to add some variation (usually with the h1, h2 tags, or maybe the post metadata).

I also renamed all of the background images so that ‘body’ has a background called ‘bg_body.jpg’, ‘#page’ has a background called ‘bg_page.jpg’, etc. This makes it easier when I save images from photoshop, try to find them later, or need to change something out.

I have been using a CSS reset for a while now. I find that it helps clean up some problems. So I started with a ‘reset.css’. Then added what remained of my newly organized and edited Kubrick on top of that as ‘default.css’. I stuck those both in a folder to hide them away, then went to my clean ’style.css’ in my main theme folder and added only those few elements that cover a majority of the editing. In just a few lines the site’s width, fonts, basic layout, link colors, font colors, etc. can all be changed. The background image for every major part of the layout is right there, too.

VIEW LIVE DEMO

DOWNLOAD (.zip)

BlogStarter is now part of the WpJumpStart System

Find Out More