Viewing and editing the themes code

The next step is looking for the code you want to change.

Suppose that you want to remove the gray box from the Author's Grid theme, which I mention at the start of "Customizing the Current Theme" earlier in this chapter, and replace it with a picture. This box is a secondary column, and secondary columns of a theme are called sidebars, so it stands to reason that the box you want to fiddle with is in the file called sidebar.php.

For this example, select sidebar.php in the Theme Editor window. You see this code on the left side of the window:

Thanks to some great comments by the theme's builder, it looks as though the gray box is 300 pixels by 250 pixels, which means that you need to replace it with a picture of the same dimensions. You can doublecheck by looking at this theme's CSS. Select the CSS file to display the code in Theme Editor, and look for the mpu class:

.mpu { width: 300px; height: 250px; background: #e5e5e5; margin-bottom: 20px;

That clinches it: Your image should be 300 pixels wide and 250 pixels high to fill that entire box.

Because you know that the box is defined in sidebar.php, select that file in Theme Editor once more to display its code. Then add the boldface code below, substituting your own URL, theme, and photo file name:

<img src=" themes/author-grid/images/scotthead.jpg" alt="scott">

</div><!--/300x250mpu--> Figure 11.29 shows an example of the result, which has a much better picture in the sidebar, wouldn't you say?

Figure 11.29 Ahhh—this picture is much better than that boring old box. I wonder who the hand-

some man is.

Figure 11.29 Ahhh—this picture is much better than that boring old box. I wonder who the hand-

some man is.

Most minor changes require some basic HTML knowledge, but you should feel comfortable poking around in any of the files that make up a theme. Just be sure to back up any files that you plan to change so you can recover quickly from any mistakes.

Because you're changing the actual files that make up the theme, be sure to back up your customized theme before you make any sort of change. Your changes aren't stored in a WordPress database but in the files themselves, so when you upload a new version of the directory to your Web host, you'll overwrite your custom copy unless you plan ahead.


Was this article helpful?

0 0

Post a comment