Stylehack

In this article we’ll make our first modification by replacing the header image with our own image.

IMPORTANT:   For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples.

Changing the Header Image

This is a really easy fix. All it requires on your part is a little pre-planning, some common sense and a bit of skill with a graphics program. Sometimes — like this example — it’s as easy as replacing the existing image with a new image of the same dimensions, sometimes it takes a bit more work.

A Little Pre-planning

Load your blog in a browser and look at it carefully. In fact, it is sometimes helpful to save the index page WITH IMAGES as a plain old HTML page on your local computer so you can conduct a quick and easy check of things “under the hood”. Basically you need to have a good understanding of how the header image fits into the design.

The header image (kubrickheader.jpg) for the WP default theme looks like this:

Notice that it is part of a series of images that add a visual frame to the blog and that it has a gray-colored area around it. We can’t just replace the image wholesale unless we want to fiddle with the rest of the design and related images; instead, we’re going to alter that image.

Did you realize that anytime you edit a post after publication WordPress pings any services you have listed in your ping settings… again?! If you’re like me, you make the odd change here and there. Or worse, you find yourself in the position I was just in where I have had to go back and edit some of my older posts after finally upgrading my blog and discovering how much I detested the Autop filter.

I was madly pinging the blogosphere every time I saved during an edit. “Hello World from Stylehack… again! Here are ancient posts I just know you want to read!” [Yeah yeah, they're old but still have some valid content so I didn't want to just delete them.]

Okay, enough said — the scenario for disaster is set (a.k.a. spamming ping services).

Fortunately, I found a great solution, the UP Smart Update Pinger plugin!

In this article we will discuss the housekeeping steps you must perform before you make any modifications to a theme — creating a copy of the theme being modified and making the files “writable” so that you can use the WordPress Theme Editor. For a general review of how your blog is generated by PHP, please read Part 1 of this Series.

IMPORTANT:   For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples.

Creating a Copy of the Theme

You should never make major modifications to a theme without making a new working copy of that theme! [I define major as anything other than things like font color or other minor modifications to general styling.]

The reason I say this is primarily because you need a backup copy of the theme you can refer back to if something goes wrong during the modification process. The other reason is also related to potential problems — you need a fallback, the ability to put things back the way they were with a single click “just in case”.

This series of articles assumes you have at least basic XHTML and CSS skills, and little-to-no PHP skills.

One thing I get asked about quite a bit is how to customize (modify) an existing theme, in particular without using widgets. Basically the questions fall into 4 main categories:

• Changing the Header Image
• Modifying the Footer Content
• Changing text labels
• Modifying the Sidebar

Before we can jump into making any theme modifications, you need to understand how the sections of a post-related page are generated. This might seem a little more technical than you want to get, but trust me… it will make it all that much easier when you actually begin modifying a theme.

IMPORTANT:   For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples.

Oh goody, yet another undocumented snafu. “-)

If you took advantage, albeit unknowingly, of any of the autop functions in old posts… guess what? Once you install the Disable-WPAutoP plugin, ALL your older posts will need to be reformatted with XHTML tags!

Nice. Figured you’d want to know.

I still love this plugin, however!