Build a Basic Wordpress Theme in Blogger - Part 1

Everyone loves Wordpress themes - am I right? Well, before we get started I'm going to tell you a story about my first attempt at building a Wordpress theme in Blogger before Google came along a auto-deleted my work. Auto-deleted??

The goal of this tutorial is to build and modify an existing standard Blogger layout to look just like the Wordpress Tw****Te* theme. (The reason I did not actually add the words here is because Google thinks that particular keyword is somehow asscociated with spam). I started this mini project by naming my Blogger blogspot example tw****te*.blogspot.com. As I started working with it I suddenly received an error. Looking back at my blog listings, that particular one had been deleted by Google!!

I'm not sure of the rationale here but I'm guessing that Google feels that name is a means to drive a spam site. I wasn't too far into it yet so it really wasn't much of a loss - but I must admit I was a bit shock by the sheer bravado of Google to assume that I was spamming the system. So, it this tutorial I"ll be using more, 'a-hem', generic words. You'll know what I mean when you see the actual template in action.

Basic Theme Configuration in Blogger

Starting from scratch, the easiest way to build this theme is to start with Blogger's 'Simple' template. Here's the visual of my first step - just highlight the theme in the Template window:

This template works well for a look-a-like Wordpress theme since it is easy to manipulate. However, it does have a few quirks that force you to use some simple, custom CSS code. I'll get to that later.

Even though we chose the Simple template, go back into the Template designer to change the Simple template color scheme to the more black and white look (if you're not sure how to get to the template designer, take a look at my post called How to Add a Background Image to Blogger - it shows how to get there). Just choose the Simple template on the far right (be sure to hit the 'Apply to Blog' button on the far upper right):

The next steps are to adjust your template's background, colors, links, and text sizings. Stay or go back into the template designer for now. We're going to set a group of values together. Let's start with the main body text size and color. In the 'Advanced / Page Text' settings, change the font to Georgia, size to 14.7px (enter it in by hand), and the text color to #333333 like this:

Next, set the 'Outer Background' to #eeeeee (just type it in with the # symbol) and leave the 'Main Background' to its default value:

Now we'll set the 'Links' colors to custom values (Note: there is an error here that is fixed in Part 3 - you can go ahead and alter the Links colors but you'll have to fix them later). Don't worry about the sidebar colors just yet - this will alter all of the base (#191919), hover (#191919), and visited (#bb2188) colors for both Posts and Sidebar links:

The actual 'Blog Title' font and size will have to be modified next. Set the font to 'Arial', the style to Bold (just click on the 'B'), the size to 20px and the Title Color to (#191919):

Next, set the 'Post Title' font to Arial and the style to Bold (again, just click on the 'B') with a 20px height like this:

If you noticed on the Simple template the 'Date Header' is reversed by default with the text white and the associated background grey. Let's reverse that by setting the text color to grey (#666666) and background to white (#ffffff). We'll alter the style in the next post:

Congrats! You've completed configuring all of the core base settings. Be sure to hit the 'Apply to Blog' button now to save your work like this:

As you can probably see by now, the template is starting to look much like the Wordpress theme above! However, let's do a few final steps to get a bit closer.

Customizing the Theme Description

One oddity in this particular template is a missing configuration to modify the blog's description text. First thing to do is add a blog description if you haven't yet by going back to the main menu and choosing 'Settings' like this:

Go ahead and enter your description by clicking on the 'Edit' link as shown above. I entered 'Just another Blogspot blog' for mine and save the setting. You should now see the description under the title of the template.

Our last step for Part 1 is to add a couple of simple CSS template changes. First, we'll add a CSS change that places a small margin at the top and bottom of the template to make it look more like the Wordpress theme. And, we'll also add some code to modify the font characteristics of the description.

Go back into the Template designer again and choose the 'Advanced' / 'Add CSS' section. Add the following code to your template like this:

At the top you see the .content-outer section change which will add a margin at the top and bottom of your blog. Now, if you're advanced enough to know how to hide the standard Blogger navigation bar at the top, you don't need to add the 'margin-top:20px;' code (NOTE: UPDATE - I noticed a week later that this didn't work on Internet Explorer 8 - change margin-top and margin-bottom to padding-top and padding-bottom instead -- so, you should have 'padding-top:20px;' and 'padding-bottom:40px;'. That works fine!). When the nav bar is hidden you get automatic padding. The second section is to modify the font of the blog's description in the '.Header .description' section. Just add both of the font declarations I have in the picture. Be sure to hit 'Apply to Blog' to save the changes.

This ends Part 1 - as you can see, we're getting close to the theme:

Next up in Part 2 - some deeper modifications to add the top image, add a Page menu, and altering the sidebar. If you're ambitious enough, maybe you can try to do these yourself.