WordPress Theme is responcible for the visual whoomp of your blog. It is a single, most important element that creates the Look and Feel of your blog and determines the visual message you send to your visitors. It is also one element of your WordPress blog that will either help you or drive your visitors away!

No matter how well crafted are your posts, how well research and presented your content – if the first impression is negative – your chances of retaining the visitor are slim. This article of WordPress Guide Series will concentrate on the task that according to the poll on this blog is The Most Painful Task:

poll.jpg

A few words before I begin with this tutorial:

  • I’m not a designer and while I can “make do” I recommend you get a pro if you need a really custom theme
  • I do not support any mods you will create as result of this post and do not provide any support or take any responsibilities, use this guide at your own risk
  • Make absolutely sure to have a good backup of your existing theme BEFORE starting any mods

1. Getting Started With Theme Mod

I will continue to use WordPress Default Theme as an example for modification and before doing any mods in this case we need to ensure it will not get overwritten with next WordPress core update. If you are not using Default theme – you can completely ignore this step.

You have couple options: copy and paste default folder with different name or rename the default folder to something else. I choose to rename, see image below:

rename_theme.jpg

Once I was done renaming I had to go into Admin->Presentation->Themes and click on Classic theme to activate it and then Click on Default to re-activate it and make it current. The reason behind it is because that theme stores its info in wp_options table and need to be re-activated to point to a new folder location.

2. Changing Your Header Image

There are a few ways to go about this one. First I will discuss how to Replace Existing Image with your own to create a custom look. This one will be appropriate ONLY if your theme already has an image…

Simplest way is to view the blog front page and then save the header image to your desktop, edit it to your desire and then upload it back to the directory you got it from but I actually want to explain the inner workings that determine the image location and image name, so you could use it later…

Admin->Presentation->Theme Editor->Header

Open header.php file for editing and locate the section that identifies the header layout options. See image below for details. Default theme uses style.css file for defining the header image and that is what I’m showing you in image

header.jpg

Once we located section above we know we have two devisions we need to locate in style.css: header and headerimg. So lets have a look at the file and see what they have to say…

header2.jpg

As you can see in style.css we have locate that our image name kubrickheader.jpg and it is used as a background image with size 192×740.

All you have to do now is either upload header image with same filename and dimensions and overwrite current or use a new file name and make sure to edit style.css to reflect a new filename: I have chosen the second option, see image below:

header3.jpg

Second option is a lot more elaborate and requires that you add image to a theme that doesn’t have one defined. There are couple things you will need to do to implement this one.

1. Locate a place in header.php where you can place the image. This one can be varied depending on the theme and there is no clear definition but based on what I always see is that you need to locate code similar to below:
header4.jpg

Generally with after <body> tag you will have a division defining the page layout, in example above <div id=”container”> but it can be anything as that division is defined by Theme Designer. Placing image after that devision should get you the header.

2. Add following code replacing the variables as appropriate:

<center><img src=”http://www.yourblog.com/path/to/header/header.jpg” border=”0″ width=”960px” height=”100px” alt=”My Blog Name”></center>

Following variables will depend on your theme:

  • http://www.yourblog.com/path/to/header/header.jpg
  • width=”960px” height=”100px”

Obviously description above is very general but since there are so many variations it is nearly impossible to address them all.

3. Customizing Style of WordPress Theme

This is the part of your theme where you can do either greatest change or biggest damage to your blog look and before touching anything I highly advise you make a good backup copy of style.css file within your theme.

First change and one that can have a biggest impact on your blog Look is defining a background color or image. In my personal experience EVERY theme I have seen has a #body definition within which you can change this aspect.

style1.jpg

In image above I have underlined section responsible for background in my blog using WordPress Default theme. If you don’t like the image and would like to simply change it to a color (and save on load time of the page) simply replace it with color definition:

background-color: #d5d6d7;

Please be aware that doing so will make you blog look a bit out of place, because page uses another image for outlining its form. But in a theme that doesn’t use an image for page layout this will work quite nicely. Like the case with the blog you are currently reading.

Other major changes you can within the style.css file is definitions for all H1, H2, H3, etc. tags. Since every theme is using a different definitions I will not be providing them here but it is an option you can look into as it drastically changes appearance of your blog.

There is obviously a lot more you can do within that file and I simply have no way to provide a comprehensive guide due to differences in themes but do experiment and change it to your desire.

4. Final Recommendations

I’m not the most color coordinated person and when I’m picking colors for the theme modification – I need help. Unless you know what you are doing I want to recommend this free tool that will generate the color theme for you to use.

I’m not even going to mention backup of your existing theme again Cool but I do want to bring your attention to a great plugin you can use to work with theme without your visitors knowing about it.

  • Theme Test Drive – this plugin, when installed allows you to test a new theme and it will be visible only to logged in administrator – you. Besides testing new themes you can use it for moding a new theme to your heart’s desire and activate new theme ONLY when its ready to present the full glory of your designing skill to your readers.

That would be the end of part 1 on Theme Customization and I wanted to save Sidebar Modification for second tutorial. Sidebar is one of the areas on the blog we use to increase interaction and integrate monetization options so I wanted to spend a bit more time on it, so stay tuned and in mean time I would appreciate the Digg or Stumble or any other form of social plug if you liked the tutorial.