wordpress: modifying themes

Basic Stylistic Changes

Many changes to the look and feel of a WordPress site can be handled through CSS alone, without ever touching the templates. This is why it's essential to have some basic CSS skills before attempting theme modification. Let's look at some CSS-only changes you can make to a theme before diving into template modification.

As you'll discover, CSS tweaking can be time-consuming, fiddly work for non-experts. There's no end to how many stylistic changes you can make to a theme, but be aware that you may hit a point of diminishing returns and wish you'd started with a theme that was already closer to your end goal. Time put into initial theme selection is generally better spent than time spent on endless tweaks and modifications.

As a general rule, it's very easy to modify colors, images, and typography, but it's much harder to modify column widths, and harder still to completely rearrange page layouts unless you have advanced CSS skills.

There's really nothing WordPress-specific about editing a WordPress style sheet - it's all standard CSS code, which you can learn elsewhere. The trickiest part is usually in determining which portion of the CSS needs to be tweaked. And for that, you'll need a good debugger, which will help you to examine the page contents and learn which lines of CSS code are controlling their appearance. If you use the Chrome or Safari web browsers, which are based on WebKit, you've already got an excellent debugger built in.

Enabling debug mode in Safari: Go to the Preferences, click the Advanced tab, and enable the option "Show Develop menu in toolbar." You can now debug any web page by pulling down Develop | Show Web Inspector (or hit Cmd-Opt-I).

Enabling debug mode in Chrome: The debugger is always available - just pull down View | Develop | Web Inspector (or hit Cmd-Opt-I) to bring it up.

Enabling debug mode in Firefox: Install the excellent Firebug extension. Once installed, click the small "bug" icon at the lower right corner of the browser.

Let's look at a couple of typical examples where CSS modification might be needed. Screenshots here show Web Inspector, but Firebug instructions would be very similar:

1) I want to change the background image of the theme. Let's say you like the Graphene theme but you don't like the background image that comes with it. Apply the theme, then bring up your debugger and click Elements. Next, click the magnifying glass icon at the bottom left.

Inspector1

To inspect elements on a page in the WebKit Inspector, click Elements, then use the Magnifying Glass to hone in on the element you're interested in.

Now click on the page background and look at the CSS code in the right-hand pane:

Cssbackground

This tells us exactly what we need to know: The path to the background image file can be found on line 75 of the file style.css. If you open style.css in your text editor, you'll see that the entire line is:

So to change the background, upload a new background image to wp-content/themes/[yourtheme]/images, and edit line 75 to match the new filename. Voila! No template changes needed.

2) How can I change the banner image that came with my theme? Start by debugging the same way we did with the background image example. You'll see the header image referenced, but not in a stylesheet. It's a trick! The way the header image is displayed will vary from theme to theme. While some themes might reference the header image in exactly the same way as above, others might hard-code it into the header.php template file. Still others might provide a set of Dashboard controls for setting the banner image. Taking a look in header.php for the Graphene theme, you'll see this:

In other words, the HTML in the header template defines an inline style to the image path. But rather than hard-coding the image path, it calls a custom function defined by the theme. That function knows how to reach into the WordPress database and figure out which image you've told it to use from the Dashboard. In other words, no code changes needed for this tweak - you can do it all with point and click. But now you know how the header image is getting there to begin with.

Sidebar 3) How can I change the color of the sidebar headers? So what if you don't like the white-on-blue of the sidebar headers? There's no Dashboard option for changing that in the Graphene theme, and if you look closely, you can see that there's actually a subtle gradient from a lighter blue to a darker blue. Fire up that debugger again, click on a sidebar header, and you'll see a whole bunch of rules starting on line 1560 of style.css. Things get a little trickier here because using gradients on the web isn't yet a solidified web standard. Therefore, the theme author has set up four different ways of rendering gradients, to accommodate all web browsers:

The first line references an image file, which will work with the oldest browsers out there. So the first thing you should do is download that image, open it in Photoshop, change the gradient, save it, and upload it back to the server. With Photoshop open, grab the new starting color and the new ending color, and replace the references on the next three lines of the style sheet.

4) How do I change the fonts used on my site? By now you should have the hang of this. Launch the debugger, grab the magnifying glass, and click on some text. The debugger will tell you on which line of the style sheet the font is declared. Then all you have to do is tell it which new font to use. See the Fonts and Text section of our CSS tutorial for pointers. You might even want to experiment with custom typography from a service like Google Fonts or TypeKit.