So far, you’ve learned that themes control the appearance of your site, so you might assume that getting the look you want is a matter of choosing the right theme. The truth, however, isn’t so simple.
Choosing a theme is the Big Choice you make about your site’s visual appearance. It settles a number of important formatting issues—for example, the way WordPress uses graphics, fonts, and color across all your pages, and the overall layout of your of header, sidebar, and footer. It also determines the way WordPress presents key ingredients, like the date of a post, the post’s category and tag information, and the links that let guests browse through your archives.
But even the slickest theme may not mesh perfectly with your site. To get it right, you may need to adjust a number of additional settings. Your page’s header image is a perfect example—if your theme includes one, you’ll almost certainly want to replace the stock image with something that better represents your site.
In this chapter, you’ll start by learning how to make small changes that customize a theme. Then, once you have an understanding of exactly how flexible a theme is (and isn’t), you’ll go theme shopping for something with more pizazz.
NoTE To work on a theme, you use the dashboard. As you’ll soon see, WordPress groups all its theme-related commands into a single dashboard menu: Appearances.
your TheMe Every theme provides a handful of basic options (and some provide many more). To
see these options, go to the dashboard and choose Appearance→Theme Options (Figure 5-2).
Figure 5-2 These are the options for WordPress’s Twenty Eleven theme. You can choose between color schemes (light or dark) and three layouts, as well as change the color used for links.
Often, theme preferences let you switch between different “versions” of the same theme. For example, it’s common for the same theme to offer different color schemes.
Twenty Eleven has its usual light, airy color scheme as well as a white-on-black vari-ant for darker, moodier people. Similarly, many themes offer a choice of layouts.
Twenty Eleven gives you two additional layout choices: you can put the sidebar to the left of your posts (instead of keeping it in its usual spot on the right), or take it away altogether.
Finally, the Theme Options page may include a miscellaneous setting or two that has nowhere else to go. In the case of Twenty Eleven, there’s an option that lets you change the standard blue hyperlink color. Other themes let you tweak font sizes, or hide some of the buttons on the home page.
NoTE Although every theme has a different version of the Theme Options page, one fact is consistent: there are rarely more than a few settings that affect its appearance. After all, a theme is meant to convey a specific design vision—if you find yourself needing to customize it too heavily, you probably need to pick a more suitable theme.
your TheMe
When a visitor arrives at your site, the first thing she sees is the eye-catching header that sits at the top of your home page. Right now, that’s a problem, because the standard header screams “Generic WordPress Site!” It’s for amateurs only.
To change the header, you need to go to the Custom Header page. From the dash-board, choose Appearance→Header (Figure 5-3).
What your header looks like, based on your current settings
Ignore the stock
pictures here Upload a more suitable picture here
Figure 5-3 By default, the Twenty Eleven theme displays a random stock picture every time you load a page. This trick will impress exactly no one, because these pictures have nothing to do with your site. A far better idea is to upload your own image.
As with theme layout options, every theme has slightly different header settings.
However, most of them give you similar header-customizing options. You can:
your TheMe for most themes.
• Remove the header picture. This gives your site a simple, bare-bones look.
• Remove the header text. This makes sense if your header image contains a graphical version of the text—for example, a stylized logo or company banner.
The header options may also let you tweak the color or size of your header text. But you can’t change the text itself from the header options page because that text is part of your WordPress site settings. To modify it, choose Settings→General and edit the text in the Site Title and Tagline boxes.
Here’s how to upload a new header picture for the standard WordPress theme:
1. Prepare your picture.
Before you upload a new picture, look carefully at the information in the Custom Header page. It usually tells you how big your picture should be. The standard Twenty Eleven supports any header size, but recommends a picture that’s 1,000 pixels wide and 288 pixels tall.
If possible, you should resize or crop your picture to those specs, using an image-editing tool before you upload it. That way, you’ll get exactly the image you want. If your image doesn’t match the dimensions your theme expects, WordPress may crop or resize it, which can reduce the quality of your picture.
TIP Need a good picture but lack the photographic or illustrative skills to make one? Don’t do a Google image search—you’re highly likely to end up stealing someone else’s copyrighted work. Instead, try a free stock photography site like Stock.XCHNG (www.sxc.hu). It offers a vast collection of member-submitted pictures, most of which are free for other people to use. (In fact, stock.xchng was the source of the sunny yellow teapot picture that graces the Magic Tea House site; skip ahead to Figure 5-5 to see it.)
2. In the Upload Image section, click the Browse or Choose File button (the exact wording depends on the Internet browser you’re using).
This pops open a window where you can choose the file you want. Find the header picture on your computer, and then select it.
3. Click Upload to upload the picture to your WordPress site.
If your picture doesn’t fit the required dimensions, WordPress may ask you to crop it down to size. This works well if your picture is just a little too tall (see Figure 5-4) or too wide, but can cause problems in other situations. For ex-ample, if your picture isn’t wide enough, WordPress enlarges the whole thing to fit and then asks you to crop off a significant portion of the top and bottom.
You’ll end up with the worst of both worlds: an image of lower quality (because WordPress had to scale it up) and one missing part of the picture (because you had to crop it).
your TheMe
Figure 5-4 To crop a picture, drag the highlight rectangle until you frame it the way you want it. Here, the problem is that the picture is a bit too tall—by positioning the highlight rectangle in the middle, WordPress will trim out part of the top and bottom of the picture. When you finish, click “Crop and Publish.”
Or, click “Skip Cropping, Publish Image as Is” if you want to ignore your theme’s recommenda-tions and use an oddly-sized header.
If you upload a perfectly sized picture, WordPress automatically puts it on your site (Figure 5-5).
Figure 5-5 This new header makes much more sense for the Magic Tea House site.
your TheMe Some themes support multiple pictures. When you upload multiple pictures with
Twenty Eleven, you can choose the one you want your site to show (from the Uploaded Images section of the Custom Header page), or you can ask WordPress to randomly pick a picture for each page (choose Random).
NoTE Some folks love the changing-picture trick. For example, on a food blog it’s a great way to showcase a number of different and delectable dishes. However, most people prefer to pick a single header and stick with it. That gives the site a clearer identity, and helps visitors remember your site.
If you want a more streamlined look, you can take away the header picture alto-gether, so that only your header text appears. To do that, scroll down until you see the Remove Header Image button, and then click it. Alternately, you can keep the image but ditch the text—in this case, you need to set the Display Text setting to No. This is a great trick if your header image includes text (like the one in Figure 5-6). And if you’re a truly odd duck, you can remove both the header picture and the header text, but that will make your site look just plain weird.
Figure 5-6 For a professional touch, remove the text from your header, and create a header image that includes the text. This example does that (and applies an out-of-focus, pointillist effect to the picture). Notice that the theme is intelligent enough to relocate the search box. It used to sit beside the header text;
now it’s in the menu bar.
NoTE There’s another part of the header that you haven’t touched yet: the menu. In the Twenty Eleven theme, the menu sits just under the header picture. The menu is a great place for links to extra information (like an “About Us” page). You’ll learn to customize it in Chapter 7.
your TheMe
The last part of a theme you can tweak is the background. To do that, choose Appearance→Background. The resulting Custom Background page usually gives you two choices:
• Add a background image. Most themes tile the background image (that means they repeat the image endlessly, from top to bottom and left to right, filling your visitor’s browser window). For that reason, you need a picture that looks good when it’s jammed edge-to-edge with another copy of itself. Small pictures called textures work well for this task, and you can find them online, but the effect is distinctly old-fashioned.
• Change the background color. This is the most commonly tweaked background setting. You can use it to make the page background blend in more smoothly with the background of your header image.
The background color doesn’t always apply to the part of your layout that you expect.
In the Twenty Eleven theme, the background color is the color that shows up on the outer edges of your site, not the color that appears directly behind your posts. To change the color behind the text in your posts, you need to tweak the theme styles, as explained on page 439. Figure 5-7 shows the difference.
The background color (which you can change)
The color behind the posts (which you can’t change)
Figure 5-7 Ordinarily, the Twenty Eleven theme centers content horizontally in the browser window, and pads the edges with a nondescript gray border (see Figure 5-6). Here, the background color is set to match the yellow from the header image, giving the page a seam-less effect that makes the teapot seem like it’s floating. The color behind the posts remains white, ensuring easy reading.
your WiDgeTs in an HTML color code (like #e7df84, suitable for web nerds), or you can use the
groovy built-in color picker (Figure 5-8).
2. Adjust the darkness by clicking in the square The HTML
color code 1. Pick the color by
clicking in the ring
Figure 5-8 To pick a background color with the Twenty Eleven theme, click Select Color, which launches the color picker shown here.
Although it’s a bit hard to see in black and white, getting the exact shade you want from the color picker is a two-step pro-cess. First, you click the right color in the outside ring, and then you set the shade of that color by clicking somewhere inside the square.
TIP If it’s getting hard to visualize the differences between the examples in the black-and-white pages of this book, check out the Magic Tea House sample site for yourself at www.prosetech.com/wordpress.