Customizing Image Elements in WordPress

When it comes to customizing WordPress themes I generally have an easier time of it changing CSS or tweaking the PHP code than I do modifying image elements of the theme. That’s probably because I’m not a graphic designer.

Fortunately you don’t have to be a graphic designer to be able to customize the image elements of your Genesis themes. If that was a requirement I’d be sunk.

What Are Image Elements?

What do we mean by image elements?

These are the portions of your theme that are referenced as files in the style sheet rather than created directly by code. Typically they are used to display textures, gradients and shapes that aren’t readily possible to create in CSS.

In most Genesis child themes like ours here at Web Savvy Marketing the image elements are found in an /images/ folder inside the theme folder. In our themes we further subdivide some of the image elements into separate folders inside the /images/ folder for images specific to each different color scheme that is built into the theme.

Image Element File Types

Generally speaking we prefer the PNG file format.

There are a couple advantages to using PNG’s vs other image file types with themes. For one thing, PNG’s can have transparency. This allows whatever is beneath the image to show through the image above. This isn’t possible with some other image formats such as the JPG format.

PNG files can also be optimized to reduce their file size. There are a ton of services like tiny png that will optimize your images. It is good practice to optimize your image elements because they often add the most bulk to a theme. Properly optimized images can make a big difference in the load speed of a website.

I should point out that large background images can end up being rather large files, especially as PNG’s. In those cases it might be better to use a JPG file with the quality dialed down some to reduce the file size.

Photoshop is My Tool of Choice

Generally speaking Photoshop is my tool of choice when it comes to customizing image elements, though you can use whatever image manipulation software you prefer.

Personally I’m still using my old copy of Photoshop CS3 (did I mention that I’m not a graphic designer?). I’m not excited about Adobe’s new subscription model. But I’ll have to upgrade at some point.

If you are using a good theme shop (like Web Savvy Marketing!) they often provide PSD element files with their themes. That way they are already in the Photoshop format and are ready for you to edit by changing the element colors or whatever.

Unfortunately there are theme vendors which do not provide the elements already in the Photoshop format. In those cases it is a bit more complicated. Basically you’ll want to open the image element in Photoshop, edit it as desired, save the updated file in the proper (png) format and then upload it to your theme on your server.

Potential Problems to Avoid

Backup your images before customizing them. This should go without saying. But it is so important that it needs to be said. If you don’t backup your files before you start working on them it’s only a matter of time before you get burned by a mistake that you can’t recover from.

You will want to be sure to save the file with the exact same file name as you find in your theme. If you change the file name then you will need to edit your style sheet so that the file names match or the theme won’t know which file to call.

When I say the names need to be exact, I truly mean they need to be identical. This includes things like capitalization (or not). And that includes the file extension. So these three files would likely all be different on most web servers:

• background.png
• Background.png
• background.PNG

So make sure your file name is an exact match for the one you are replacing and you’ll have far less difficulty.

If you are adding an image element to your site to customize something do yourself a favor and never use spaces in the file name when you save it. In my experience the overwhelming majority of web servers tend to choke on file names with spaces. So instead of calling your file My Image Element.png try My-Image-Element.png or My_Image_Element.png or simply MyImageElement.png.

Again, you will just make your life easier in the long run doing that.

Be sure to save the image in the exact same location on your server as the file you are replacing. When you FTP up your new image take a moment to look at the folder hierarchy you are in before you click the upload button. If your image file is not in the location the style sheet is expecting then your image element will not show up.

Lastly, if you are using a caching plugin or a service like CloudFlare then do yourself a favor. Disable the caching before you start customizing your theme. You will save yourself hours (and hours and hours!) of frustration by disabling your caching first. Trust me. I know.

Hopefully that will help you get started customizing the image elements in your theme if you need to go that route.

This is the eighth in our series of articles on Best Practices for Genesis Theme Customization.