WordPress: The Missing Manual (2014)

Part II. Building a WordPress Blog

Chapter 5. Choosing and Polishing Your Theme

Using the skills you picked up in the previous chapters, you can create a WordPress site and stuff it full of posts. However, your site will still come up short in the looks department. That’s because every new WordPress site starts out looking a little drab, and pretty much the same as everyone else’s freshly created WordPress site. If that sounds colossally boring to you, keep reading, because this chapter shows how to inject some serious style into your site.

The key to a good-looking WordPress site is the theme you use. Essentially, a theme is a set of files that control how WordPress arranges and styles your content, transforming it from raw text in a database into beautiful web pages. You can think of a theme as a visual blueprint for your content. Themes tell WordPress how to lay out the components of your site, what colors and fonts to use, and how to integrate pictures and other graphical details.

Every WordPress site starts out with a standard theme. Right now, yours uses the straightforward Twenty Twelve theme (assuming you followed the instructions on One More Task: Choosing a Starter Theme). In this chapter, you’ll learn how to enhance the Twenty Twelve theme or pick a stylish new one from the hundreds that WordPress offers. You’ll also see how to choose sidebar widgets and arrange them on your site. Master these skills, and you can transform your site from standard-issue plainness to eye-popping pizzazz.

How Themes Work

One of WordPress’s most impressive tricks is the way it generates web pages dynamically, by pulling content out of a database and assembling it into just the right web page. Themes are the key to this process.

In an old-fashioned website, you format pages before you upload them to your web server. If you want your site to look different in any respect, you have to update your pages and re-upload the whole site. But in a WordPress site, your content and your formatting information are separate, with your theme handling the formatting. As a result, you can change the way WordPress styles your pages by editing or changing your theme, without needing to touch the content. The next time someone requests a page, WordPress grabs the usual content and quietly applies the latest formatting instructions.

So how does a theme work its content-formatting magic? Technically, a theme is a package of files. Most of them are templates that set out the structure of your pages. For example, the template file header.php determines how the header at the top of every page on your site looks (seeFigure 5-1), and the template file single.php assembles the content for a single post.

Each template includes a mixture of HTML markup and PHP code. (If you’re fuzzy on these web basics, know that HTML is the language in which all web pages are written, and PHP is one of many web programming languages you can use to create dynamic content.) You won’t actually touch the template files in this chapter, but you’ll learn how to edit them later, in Chapter 13.

Along with your template files, WordPress uses a style sheet, named style.css, that supplies formatting information for virtually every heading, paragraph, and font on your site. This style sheet uses the CSS (Cascading Style Sheets) standard, and it formats WordPress pages in the same way that a style sheet formats almost every page you come across on the Web today. There’s no special WordPress magic here, but you can edit your theme’s style sheet to add special effects, like fancy fonts (Using Fancy Fonts).

The WordPress “Year” Themes

Every new WordPress site starts out with a default theme. Odds are it’s a year theme, one of a few standard themes officially sanctioned by the team of WordPress developers. We call them year themes because WordPress releases them annually and names them after the year in which they appear. The first year theme was named Twenty Ten. It was followed by the Twenty Eleven theme, the Twenty Twelve theme, and so on (see Table 5-1 for the full list). The fine folks at WordPress plan to continue this release pattern for the foreseeable future.

Figure 5-1. Each WordPress site uses a single theme, and each theme includes a pile of interrelated template files that control different parts of your site.

Table 5-1. The WordPress year themes

The year themes are also called the default themes, because most sites start out using one of them. If you run a self-hosted WordPress site, it comes with the most recent year themes preinstalled (currently, that’s Twenty Twelve, Twenty Thirteen, and Twenty Fourteen). If you host your site with WordPress.com, you get easy access to all the year themes.

NOTE

At the time of this writing, all new self-hosted WordPress sites start out using Twenty Fourteen, a magazine-style theme with a heavy black frame. It feels slick, serious, and dark, and it’s best suited to photo sites and news magazines, rather than traditional blogs. For that reason, you switched your site to the simpler Twenty Twelve theme on One More Task: Choosing a Starter Theme to practice posting.

UP TO SPEED: WHAT’S IN A NAME: THE YEAR THEMES

The year themes often confuse WordPress newcomers. The naming system seems to imply that older year themes are out of date, and that newer year themes are their natural successors. But that’s not true.

First, it’s important to understand that each year theme is a new creation. For example, the Twenty Fourteen theme was adapted from an existing community theme called Further that was initially built by Takashi Irie, while the Twenty Thirteen was designed in-house by the WordPress experts at Automattic. The two themes are entirely different and independent; Twenty Thirteen didn’t evolve into Twenty Fourteen.

Similarly, newer year themes don’t replace older ones. WordPress clearly states that the goal of each year theme is to be different, thought-provoking, and useful. The goal is not to provide a single all-purpose theme that satisfies everyone. That’s why the appearance of Twenty Thirteen is radically different from Twenty Fourteen, and why many WordPress gurus still rely on older classics like Twenty Twelve to get the balance of features and style they want. (That said, the two oldest year themes, Twenty Ten and Twenty Eleven, don’t work as seamlessly with mobile devices. To save yourself some work, pick a later year theme instead.)

When WordPress releases Twenty Fifteen, it will offer yet another new style that doesn’t replace the themes that have gone before. This change won’t affect you, however, because you’re about to learn how to make any theme work for you—and how to find even more specialized themes in WordPress’s expansive theme catalog.

Making Your Theme Suit Your Site

Now that you have a basic idea of how themes work, you’re ready to start improving the look of your site. There are several paths you can take to change the appearance of your theme, depending on how dramatic your alterations are. Your choices include these:

§ Changing to a different theme. To give your site a dramatic face-lift, you can pick a completely different theme. With that single step, you get new fonts, colors and graphics, a new layout, and—sometimes—new features. WordPress.com users have over 250 themes to pick from, while WordPress self-hosters can choose from thousands more.

§ Tweaking your theme settings. WordPress gives you a number of useful ways to personalize your theme. The options depend on the theme, but you can usually alter a theme’s color scheme, change the header picture, and shift the layout.

§ Customizing your widgets. Most WordPress themes include one or more sections you can customize, like a sidebar you can stock with various links. The sections in the sidebar are called widgets, and you can change them, rearrange them, and add new ones.

§ Editing your theme. Advanced WordPress fans can crack open their theme files, work on the code with some help from this book, and make more substantial changes. The simplest modification is to fine-tune the CSS styles that format your pages. More ambitious theme hackers can change virtually every detail of their sites.

In the rest of this chapter, you’ll tackle all these tasks except the last (hardcore theme editing), which you’ll study in Part 4 of this book.

Choosing a New Theme

Choosing a theme is the Big Choice you make about your site’s visual appearance. Themes determine a number of important design details—for example, the way WordPress uses graphics, fonts, and color across your pages, and the overall layout of your 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 guests use to browse through your archives. An ambitious WordPress theme can rework almost every visual detail of your site (Figure 5-2).

Figure 5-2. The Greyzed theme creates a grungy effect that looks like lined paper on stone. Every design detail—from the look of the menu to the widget titles—differs from a plain-vanilla WordPress site.

WordPress tailors some themes for specific types of content. You can find custom themes for travel blogs, photo blogs, and magazine-style news blogs. There are even themes that lean heavily toward specific topics, including one for coordinating and celebrating a wedding (called Forever) and one that looks like the old-school Mac desktop (called Retro MacOS). Figure 5-3 shows the latter.

Themes also influence the way your site works, in ways subtle and profound. For example, some themes tile your posts instead of putting them in a top-to-bottom list (which is great if you want your site to show a portfolio of work rather than a list of articles, as demonstrated on Themes That Make the Most of Pictures). Or your theme may include a fancy frill, like a slideshow of featured posts (Featured Images).

Figure 5-3. A theme for old-school Mac aficionados may be a bit excessive for an ordinary site. But the theme is put to good effect on this Mac-centric sample site.

Even if you’re happy with the standard WordPress theme, it’s worth trying out a few others, just to open your mind to new possibilities. As you’ll see, although changing a theme has a profound effect on the way your site looks, doing so is almost effortless. And most themes are free, so there’s no harm in exploring.

The only limitation with WordPress themes is that somewhere in cyberspace, there are sure to be plenty of other websites using the same theme as you. This isn’t a huge problem, provided that you’re willing to customize your site in little ways—for example, by choosing a suitable header picture, as described in this chapter. (It’s also true that no matter what your site looks like, its content makes it unique.)

TIP

However, if you’re a style-conscious site designer who wants a distinctive theme, you run a self-hosted site, and you aren’t put off by a bit of hard work, you can customize any theme. Chapter 13 explains how.

Visiting the Theme Gallery

To change your theme, visit the Themes page (Figure 5-4) by choosing Appearance→Themes in the dashboard.

Figure 5-4. On the Themes page, WordPress displays all the themes currently installed on your site. In this freshly created self-hosted WordPress site, you start with three choices. The first theme in the gallery (here, that’s Twenty Fourteen) is the one that your site currently uses.

The theme gallery looks slightly different for WordPress.com sites than it does for self-hosted sites. If you use WordPress.com as your host, the gallery includes every supported theme, more than 250 at the time of this writing. Some themes come with a price tag, in which case you’ll see a Purchase link with a dollar figure—usually between $50 and $100.

If you run a self-hosted WordPress site, you’ll find the theme gallery fairly sparse. A standard WordPress installation includes the latest year themes (currently, that’s Twenty Twelve, Twenty Thirteen, and Twenty Fourteen), and nothing else. You need to add any other theme you want to use. Fortunately, there’s no reason to fear this process—new themes take up very little space, installing them takes mere seconds, and you can do it all without leaving the dashboard.

The following sections explain the theme-changing steps you need to follow, depending on how you host your site.

NOTE

Some web hosts preinstall extra WordPress themes. If you use one of these hosts, your theme gallery won’t start out quite as empty as just described. However, you’ll probably still need to install new themes to find the one you really want.

Activating a Theme in WordPress.com

In WordPress.com, the Themes page is a crowded place. At the top of the list is the theme your site currently uses. After that are all the themes that WordPress.com offers.

Roughly two-thirds of the themes on WordPress.com are free. The others—recognizable by the green price tag circles next to their names—are premium themes that require a one-time fee. The average premium theme costs around $70, although they range from $18 to $125. Once you buy a theme, it’s yours forever—or at least as long as you keep the site. But if you want to use the same premium theme on more than one WordPress.com site, then you need to buy a separate copy for each site.

TIP

If you want the freedom to experiment with multiple premium themes, consider buying the Unlimited Premium Themes upgrade (available from the dashboard’s Store menu). It costs a reasonable $120, although you need to pay that fee every year.

If you’re interested in free themes only, click the Free link at the top-right corner of the theme gallery (Figure 5-5).

Figure 5-5. WordPress.com lets you sort the theme gallery so the theme you want is more likely to turn up at the top, or filter it so you see just free themes or just premium themes.

You can choose how WordPress sorts the themes list by clicking one of the three links in the top-left corner. Ordinarily, it sorts the list in trending order, which puts new, hot standouts at the top of the list. Alternatively, you can sort by popularity, but be warned that this list is skewed to long-lived themes, like Twenty Eleven, found on legions of old blogs. Finally, you can sort by date to spot just the newest themes, which is handy for keeping up with the latest additions to the gallery.

The most useful theme-hunting tool is the search box just above the gallery. If you remember a theme you browsed before, or you have a theme characteristic in mind (say, “minimalistic” or “dark”), you can type that in. WordPress.com filters the list as you type.

When you find a promising theme, point to it without clicking your mouse. You’ll see several buttons (Figure 5-6):

§ Theme Details displays basic information about the theme, including a brief description and a link to the person or company that created it.

§ Preview opens a preview window that shows your site dressed in this theme. It’s called a live preview because you can treat it exactly as you would a real site—clicking links, browsing content, and feeling your way around. Usually, the live preview is enough for you to decide whether you really do want the theme you’re checking out. Click Cancel when you finish, or Activate to apply the theme to your site.

§ Activate reconfigures your site to use this theme. The changeover happens instantaneously.

§ Purchase replaces the Activate button for premium themes. Clicking this button starts the checkout process. Once you cough up the fee, WordPress activates the theme.

Figure 5-6. Point to a theme’s thumbnail, and you see these three buttons.

Don’t be shy—you can activate one theme, and then another, and then another, until you find the right one for your website. When you pick a new theme, WordPress may prompt you to start customizing it with the theme customizer (Other Theme Options). However, it’s generally easier to customize your theme using the group of pages under the dashboard’s Appearance menu, because the options there are more comprehensive. You’ll start customizing your theme on Customizing the Header.

Installing a Theme on a Self-Hosted Site

Before you can switch to a new theme on a self-hosted WordPress site, you need to install the theme itself. To see the themes you can add, click the Add New button next to the Themes heading at the top of the Themes page. This takes you to the Add Themes page, where you can browse WordPress’s theme repository to find exactly what you want (Figure 5-7).

Initially, the Add Themes page shows you a list of featured themes, which are new and particularly noteworthy designs that the folks at WordPress think might interest you. If they don’t, you can browse the most popular themes (click Popular) or the most recent ones (click Latest).

Figure 5-7. The Add Themes page crams several theme-finding tools into one place. When you first arrive, you see a gallery of featured themes, like this one.

Browsing is fine, but the most powerful way to hunt down new themes is with a search. The Add Themes page gives you two ways to do that: by keyword and by feature.

To search by keyword (for example, “magazine” or “industrial” or “professional”), type the word in the search box and then click Search. WordPress shows you themes that have that search term in their names or descriptions.

TIP

Here’s a trick to see even more themes: Leave the search box empty, and then press the Enter key. You’ll get a list of well over 1,000 themes.

To search by feature, click Feature Filter. WordPress displays a long list of checkboxes, representing different features and theme characteristics (Figure 5-8). Turn on the checkboxes for the features you want, and then click Apply Filters.

NOTE

You can’t search by keyword and filter by feature at the same time.

Figure 5-8. The Feature Filter helps you find themes that meet specific criteria. This search will find themes that feature the color green and use a three-column layout. (More than 50 do.)

No matter how you find a theme, you install them all the same way. First, point to your new theme without clicking the mouse. The Install and Preview buttons appear (Figure 5-9, top). Click Preview to see a sample site that uses the theme, and to read a brief description of the theme and the person or company that created it. Click Install to copy the theme to your website so it’s ready to use.

TIP

Don’t be afraid to install a theme that you might not want to use—all the themes in the WordPress repository are guaranteed to be safe and spyware-free. And don’t worry about downloading too many themes—not only are they tiny, but you can easily delete those you don’t want.

Once WordPress installs a theme, it gives you three choices (Figure 5-9, bottom):

§ Live Preview. This opens a window showing you what your site would look like if WordPress applied the chosen theme. Think of it as a test drive for a prospective theme. You can read posts, search your site, and click your way around your content, secure in the knowledge that you haven’t changed the real, live version of your site.

§ Activate. Click this to start using the theme.

§ Return to Theme Installer. This takes you back to the Add Themes page (Figure 5-7), where you can search for another theme.

Figure 5-9. Top: When you’re ready to take a closer look at a theme, point to it and click Preview. Bottom: WordPress has finished installing the latest version of the Alexandria theme on your site. Click Activate to start using it.

To see all the themes you’ve installed on your site so far, choose Appearance→Themes. This returns you to the theme gallery. To take a closer look at a theme, point to it. If you point to the theme you currently use, you’ll see a Customize button, which launches the theme customizer (Other Theme Options). If you point to one of the other themes, you’ll see two familiar buttons: Live Preview, which lets you test drive the theme; and Activate, which applies it to your site.

Once you activate a theme, the best way to get familiar with it is to poke around. Try adding a post, viewing it, and browsing the list of posts on the home page, just as you did in Chapter 4. Check out the way your theme formats the home page and presents individual posts.

Once you familiarize yourself with your new theme, you’ll want to check out its options and consider tweaking it. That’s the task you’ll tackle next.

NOTE

There’s one other way to add a theme: by uploading it from your computer to your site, using the Upload button on the Add New themes page. You’ll use this option only if you find a theme on another site, buy a premium theme from a third-party company, or build the theme yourself.

UP TO SPEED: THE PROPER CARE OF YOUR THEMES

When you install a theme on a self-hosted site, you get the current version of the theme. If the theme creator releases a new version later, your site sticks with the old version.

That makes some sense, because WordPress has no way to be sure that the new version of the theme won’t make drastic changes that break your site. But this design also raises the risk that you might ignore an important security update for one of your themes, thereby exposing your site to an attack. (Remember, themes contain templates, and templates contain PHP code, so themes can create security vulnerabilities.)

To minimize your risk, check regularly for theme updates. Go to Dashboard→Updates and look at the Themes section. If a theme has been updated, WordPress lists it here, and compares the version number of your copy with the version number of the latest release. If your site has multiple themes installed, WordPress shows the updates for all of them—it makes no difference whether you currently use the theme or not. To protect yourself, download all the available updates. To do that, turn on the checkbox next to each update and then click Update Themes.

Finally, if you install a theme, try it out, and decide you aren’t ever likely to use it, it’s a good idea to delete it. Even if a theme isn’t active, its template files are accessible on your site, allowing attackers to exploit any security flaws the templates may have. This isn’t a common method of attack, but it has happened to unsuspecting site owners before.

Tweaking Your Theme

The first step in getting the look you want is choosing the right theme, but your site-styling doesn’t end there.

Every theme lets you customize it. In fact, you need to customize your theme to make sure it meshes perfectly with your site. 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 a picture that better represents your site. Other basic theme-preparation tasks include shuffling around your widgets and setting up your menus. You handle all these tasks in the pages of the Appearance menu.

Customizing the Header

When a visitor arrives at your site, the first thing she sees is the eye-catching header 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.

Different themes may have slightly different header settings, but here are the details you can usually change:

§ The header text

§ The color of the header text

§ The header image

The header text includes the title and tagline you specified when you created your site. WordPress stores this information as part of your site settings, and you can modify it using the Site Title and Tagline boxes at Settings→General.

Most themes also let you pick the color of your header text. Usually, it starts out black. (Twenty Fourteen is a notable exception, because it uses white text on a black background.) To pick a different color, go to the Custom Header page at Appearance→Header and look for the Text Color setting. Click the Select Color button next to it to open a miniature color picker and choose the exact shade you want.

NOTE

At this point, it may occur to you that there are many other ways you might want to adjust your site’s header. For example, you might want to change the size of the text or pick a fancier font. But making these types of changes is an advanced operation. If you have a self-hosted site, you need to modify the CSS style rules that control your theme. You’ll learn how to do that inChapter 13. And if you have a WordPress.com site, you need to buy the Custom Design upgrade (for $30 per year) to even be allowed to make this sort of formatting change (see Getting Ready).

Many themes let you use a picture in your header. Depending on the theme, the header text may be displayed above the image, beneath the image, or on top of it (or you may choose to hide the header text altogether). Deciding whether you want to use an image is the most important decision you’ll make while customizing your header. Figure 5-10 shows how the Twenty Twelve theme deals with header images.

Figure 5-10. Top: The Magic Tea House is a bit plain with a text-only header. Middle: Every theme makes its own decision about where to place the header image. If you add an image to the Twenty Twelve theme, it turns up underneath the menu. Bottom: Hiding the header text results in a much cleaner look.

Here’s how to upload a new header picture for the standard WordPress theme:

1. Choose Appearance→Header.

The Custom Header page opens.

2. Prepare your picture.

Before you upload a new picture, look carefully at the information on the Custom Header page (Figure 5-11). It usually tells you how big your picture should be. Because the theme’s layout dictates the size of the header, each theme has different size specifications. For example, Twenty Twelve needs a header 960 pixels wide and 250 pixels high, while Twenty Fourteen expects a wider and shorter image (1260 x 240 pixels).

Figure 5-11. The Custom Header page gives you options that let you add a picture and hide your header text.

If possible, you should resize or crop your picture to those specs, using an image-editing program 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.

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 in Figure 5-10.)

3. In the Select Image section, click the Browse or Choose File button (the exact wording depends on the Internet browser you’re using).

In the window that opens, find the header picture on your computer, and then select it.

4. 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 (Figure 5-12). This works well if your picture is just a little too tall or wide, but it can cause problems in other situations. For example, 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 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).

Figure 5-12. To crop a picture, drag the highlight rectangle until you frame the image the way you want it. Here, 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. When you finish, click “Crop and Publish.” Or, click “Skip Cropping, Publish Image as Is” if you want to ignore your theme’s recommendations and use an oddly sized header that may not fit nicely into your layout.

5. Consider removing the header text by turning off the setting “Show header text with your image.”

In some themes, the header text meshes neatly with the header image. For example, Twenty Thirteen superimposes the header text on the header image.

In other themes (like Twenty Twelve), the text and picture are separate. For a slicker look, you may choose to use a header image that includes stylized text, and ditch the theme’s standard header text. The result is shown in Figure 5-10 (bottom).

Incidentally, if you decide to go the other way, you can remove the picture you added by clicking the Remove Header button. 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.

6. Click Save Changes.

If you add or remove a header image, you don’t need to click this easily overlooked button at the bottom of the Custom Header page, because WordPress incorporates the change right away. But if you change one of the other header settings, such as the “Show header text with your image” option, click Save Changes to make it permanent.

GEM IN THE ROUGH: RANDOM HEADER PICTURES

Some themes have the ability to perform a curious header-switching trick. First, they let you upload multiple pictures. Then they randomly choose a different picture for the header on each page. All the standard year themes provide this feature, from Twenty Eleven on.

To try this out, start by uploading more than one picture on the Custom Header page. (Just repeat the steps that start on Customizing the Header.) If your theme doesn’t display multiple header images, it will simply toss out the old picture when you add a new one. But if your theme does allow multiple images, it will keep track of each picture you add, and you’ll see a thumbnail for each in the Uploaded Images section of the Custom Header page.

You can choose to show a picture you uploaded by selecting it in the Uploaded Images section. But if you’re after a more exotic effect, choose the Random option. Now start browsing the posts on your site. As you click from page to page, you see the header change from one picture to another. Eventually, WordPress will cycle through all your images.

The only catch is that once you upload a header image, you can’t remove it from the Custom Header page. If you decide that you don’t want WordPress to include one of your uploaded pictures in its lineup of random headers, you need to delete the image using the media library. First, click Media in the dashboard menu. That brings you to the media library, where you’ll see a list of all the images you uploaded to your site (including any pictures you placed in your posts). You can recognize the header pictures that the current WordPress theme uses, because they have the text “Header Image” after their filenames. Point to the header you don’t want, and then click Delete Permanently to banish it from your site. (Viewing the Media Library has plenty more about the media library feature.)

Some folks love the changing-picture trick. For example, it’s a great way to showcase a number of different and delectable dishes on a food blog. 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.

Changing the Background

Many themes let you change the background of your pages. You can find these options in the Custom Background page by choosing Appearance→Background.

Most themes give you two background-altering 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 against 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.

“Background color” doesn’t always mean what you expect. For example, in the Twenty Twelve theme, the background color shows up only on the outer edges of your page, not behind your posts. To change the color behind the text in your posts, you need to tweak the theme styles, as explained in Chapter 13. Figure 5-13 shows the difference.

Figure 5-13. Ordinarily, the Twenty Twelve theme centers content horizontally in the browser window and pads the edges with white space. But here the background color is set to match the yellow from the header image. The color behind the posts remains white, ensuring easy reading.

To change the background color the standard WordPress theme uses, you can type in an HTML color code (like #e7df84, suitable for web nerds), or you can use the groovy built-in color picker (Figure 5-14).

Figure 5-14. To pick a background color for the Twenty Eleven theme, click Select Color to open 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 process. First, you select a color by dragging the ring on the left, and then you set the shade of that color using the slider on the right.

TIP

If it’s hard to see the differences between the examples in the black-and-white pages of this book, check out the Magic Tea House sample site at http://prosetech.com/wordpress.

Other Theme Options

Some themes include additional options, which you can find in the Appearance menu in the dashboard. For example, if you install the Greyzed theme, you’ll get a new page of options by choosing Appearance→Greyzed Options. If you use the aging Twenty Eleven theme, you can view its settings by choosing Appearance→Theme Options. But the later year themes, such as Twenty Twelve and Twenty Fourteen, don’t include any extra options.

If a theme does include a page of additional settings, here’s what you’re likely to find:

§ Options that change one of the design elements on the home page. For example, if your theme includes a picture slider—a nifty feature that cycles through some of your post’s pictures—you might be able to tweak how it chooses those pictures, how many pictures it shows, or how it transitions from one image to the next. Featured Images has more about sliders.

§ The ability to switch between two or three preset color schemes. For example, Twenty Eleven has its usual light, airy color scheme as well as a white-on-black variant for darker, moodier people.

§ The ability to switch between different basic layouts. For example, Twenty Eleven lets you 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.

NOTE

Themes are complex creations, and it takes a bit of fiddling before you have a good idea of which theme suits your site best. You’ll see plenty of examples in the following chapters that show you how to capitalize on the features found in different themes.

FREQUENTLY ASKED QUESTION: THEMES WITH MISSING PICTURES

I picked a theme that has plenty of pictures on the home page, but right now, all the picture boxes are empty. How do I fill them?

Many of the most attractive themes use a visually rich style that incorporates plenty of pictures. Some themes include a slider that shows pictures from different posts. Others turn the post list into a grid of post titles and picture thumbnails. But before you can use this type of feature, you need to learn more about how WordPress works with pictures.

Although WordPress has a variety of features that use pictures (all of which are described in the next chapter), most graphically rich themes rely on featured images. A featured image is a picture that represents a specific post, but doesn’t necessarily appear in the post. Featured Images explains featured images, shows you how to link them to posts, and explores several themes that use them to create eye-catching home pages.

The Theme Customizer

If you’re tired of jumping from one page to the next using the Appearance menu, you may be interested in the theme customizer, a dashboard tool that lets you quickly configure a new theme. The theme customizer uses a multi-tabbed page that combines many of the settings and options scattered throughout the Appearance menu. To open the customizer, choose Appearance→Customize. Or, when viewing the theme gallery (Appearance→Theme), point to the current theme and click the Customize button. Either way, WordPress displays a live preview of your site with a sidebar of theme-customization options. Figure 5-15 shows the Twenty Twelve theme under the microscope in the theme customizer.

NOTE

The theme customizer doesn’t always look as it does in Figure 5-15. Some themes offer fewer customizable sections, and WordPress.com sites put the sidebar on the right side of the page instead of the left. However, the basic concept remains the same: You configure common theme settings while watching a constantly updated preview of your work.

Figure 5-15. To modify your theme using WordPress’s theme customizer, click a section on the left to open it and adjust the settings (like those for Colors, shown here). Make your changes and watch the preview unfold on the right. If you like the result, click Save & Publish at the top of the panel. If you don’t, pick something else, or click Cancel to back out of all your changes.

There’s a lot packed into the customizer’s tabs. But, oddly enough, some important details are inexplicably absent. It’s not that you can’t set them—you can, if you use the different pages in the Appearance menu—but for some reason they escape the customizer’s notice. For that reason, you might be decidedly cool on the theme customizer. It’s a useful place to start customizing, but it’s not a reliable long-term partner.

NOTE

The theme customizer may also include two tabs that you won’t consider in this chapter. Those are Navigation (where you pick a menu to display on your site) and Static Front Page (where you can choose a custom home page for your site). To use either of these features, you first need to study the pages feature, which you’ll master in Chapter 7.

Customizing Your Widgets

By the time you pick a theme, fix up your header, and adjust your theme settings, your site is starting to look more respectable. But you’re not done tweaking yet. Although your theme may look a whole lot nicer, there’s still one area that most WordPress site creators will want to change: the sidebar.

The sidebar is a terrifically useful place to put links, like the ones that let your visitors browse your archives. It’s filled with something WordPress calls widgets. A widget is simply a block of useful content (like a list of links) that you can stuff into a sidebar or put somewhere else in your site (Figure 5-16). Here’s the neat part: WordPress widgets work with any theme.

NOTE

Technically, the theme you choose provides one or more areas (like a sidebar and a footer) for widgets. It’s up to you to choose what widgets go in those areas, and to configure the widgets you add.

Figure 5-16. Widgets are like building blocks for your website. In a freshly created site, you start with the six widgets shown here.

Positioning Your Widgets

To see all the widgets you can use, choose Appearance→Widgets to open the densely packed Widgets page, which is a bit confusing because it shows you two things at once:

§ All the widgets WordPress has to offer. In the big box on the left, under Available Widgets, is a long list of all of WordPress’s widgets, including those you’re using and those you aren’t, in alphabetical order.

§ The widgets you’re currently using. On the right, below headings like Sidebar and Footer Area, WordPress lists the widgets currently active on your site. It arranges them in individual boxes (based on what part of the site they occupy) and lists them in the order they actually appear.

Each theme dictates where you can place widgets. If you’re using the Twenty Twelve theme on a newly created WordPress site, you start with a Widgets page that looks like the one in Figure 5-17.

Figure 5-17. The Twenty Twelve theme has just three locations for widgets: a sidebar and two front page areas. You can use the latter two areas only when you create a new home page using the Front Page template (page 235). Right now, the sidebar is the only section that actually has any widgets in it. As you can see, the six widget boxes shown here correspond to the six widgets shown in Figure 5-16.

NOTE

Different themes may position their widget sidebars in different places. For example, the Twenty Twelve theme’s sidebar sits alongside the post listing on the home page and on the individual post pages. By comparison, the Twenty Eleven theme’s sidebar appears on the main page but not on individual post pages. You might see other variations, too—for example, you could have a sidebar that appears on every page, but a widget-capable footer that appears on only the home page. It all depends on the theme you use.

The easiest thing you can do on the Widgets page is move a widget. That’s as simple as dragging the widget to a new spot. Why not try relocating the search box to the bottom of the sidebar? There’s no need to click any button to save your changes—as soon as you drop the widget in its new position, WordPress makes the change and you can view your site to check out the effect.

The next-easiest widget-customization task is deleting a widget. To do that, grab hold of your widget and drag it over to the big Available Widgets box on the left. When you drop the widget there, WordPress removes it from your site.

TIP

Congratulations, you’ve now graduated to the second level of WordPress mastery! It’s time to delete the Meta widget from the main sidebar. Although its login and site administration links are convenient for you, they look unprofessional to your readers. In the future, you’ll need to type in your dashboard’s address (just add /wp-admin to the end of your website address) or bookmark the dashboard in your web browser.

Next, you can try adding a widget by dragging it from the Available Widgets box and dropping it on one of the widget areas, like the sidebar. (You’ll learn what all these widgets actually do starting on The Basic Widgets.)

As you get a bit more ambitious, you may want to try moving widgets from one area to another. For example, if you use the Twenty Twelve theme, you can drag a widget from the Main Sidebar area to the First Front Page widget area. Unfortunately, you won’t be able the see the change immediately, because the First Front Page widget area doesn’t appear on your site unless you create a static front page (a technique you’ll practice on Creating a Custom Entry Page). But if you experiment with a different theme, you’ll often find many more widget areas to play with. For example, the Twenty Thirteen theme provides a Main widget area that appears in the footer of your site, and a Secondary widget area that appears as a sidebar on the right (Figure 5-18).

Figure 5-18. The Twenty Thirteen theme puts two distinct widget areas to good use on the same page. Each area currently holds two widgets. Some themes use dramatically different formatting in different widget areas, as is the case with Twenty Thirteen.

When you drag a widget over a new widget area, WordPress expands the area so you can see any widgets currently there. Then, you simply drop the widget into the appropriate place, as shown in Figure 5-19. To peek into a collapsed widget area without dragging a widget onto it, click the down-pointing arrow in its top-right corner.

Figure 5-19. Here, you’re moving the Recent Posts widget from the Main widget area (which creates the footer for the Twenty Thirteen theme) to the Secondary widget area (which creates the sidebar).

GEM IN THE ROUGH: WHEN ADDING WIDGETS IS A DRAG

Tired of dragging all your widgets into place? WordPress offers another way to add widgets:

1. First find the widget you want in the Available Widgets box, and then click it once.

2. WordPress opens a list of widget areas below the widget you picked. Choose the area you want (for example, “Main Sidebar”).

3. Click Add Widget to place the widget.

This widget-adding technique requires several clicks, but you might find it more convenient if you have piles of widgets to sort through and lots of widget areas to put them in. To make your life even easier, add the widgets in the order you want them to appear, so you don’t need to rearrange them afterward.

Other themes may offer additional widget areas, like two sidebars, one on either side of the main content area. Some themes offer multiple footer areas, which is perfect for creating fat footers chock-full of links, ads, or pictures. The Twenty Eleven theme has no fewer than three footer areas for widgets. Although this seems confusing, it really isn’t—you simply use what you need. If you want a simple footer, use Footer Area One and ignore the others. If you want a two-column footer, which splits the footer area into columns, use Footer Area One and Footer Area Two. And if you want a pumped-up three-column footer, you know what to do: Put widgets in Footer Area One, Footer Area Two, and Footer Area Three.

Table 5-2 describes how the year themes stack up, widget-wise.

Table 5-2. Widget areas in the WordPress year themes

Changing Widget Settings

Widgets are surprisingly useful things. They let readers find recent posts, browse through your archives, and keep track of recent comments. As you refine your site, you won’t be happy just shuffling them around. You’ll also want to configure the way they work.

Every widget provides a few settings you can adjust. To see them, expand the widget by clicking the down-pointing arrow in its right corner. Change the settings you want, and then click the Save button to make the changes permanent. Figure 5-20 shows the settings for the Recent Posts and Categories widgets.

Figure 5-20. You can change the Recent Posts widget to show as many posts as you want (not just the latest five). The Categories box gives you three special options. “Display as dropdown” compresses the category into a drop-down list box, which saves space but forces people to click the box open. “Show post counts” shows the number of posts in a category in parentheses after the category name. And “Show hierarchy” displays the category tree, which is especially handy if you use subcategories, as described on page 110.

Even if a widget provides no other settings, it always includes a Title text box, which you can use to replace the widget’s standard headline—for example “Hot News!” instead of “Recent Posts” or “What People Are Saying” instead of “Recent Comments.” If you leave the Title box blank, the widget uses its default title.

When you add a new widget, it starts out with its standard settings. In some cases, you might want to remove a widget from your site without throwing away its settings—for example you may be planning to add it back later on. WordPress has a special Inactive Widgets box designed for exactly this situation. To remove a widget but keep its settings, drag the widget into the Inactive Widgets box instead of the Available Widgets box. (If you don’t see the Inactive Widgets box, scroll down—it’s right underneath the Available Widgets box.)

The Basic Widgets

You are now the master of your widgets. Before you go any further, take a closer look at exactly what WordPress’s widgets can do for you.

Table 5-3 describes the WordPress widgets you’ll see in a freshly installed, self-hosted WordPress site. In Chapter 9, you’ll learn how to expand your widget collection with plug-ins.

Table 5-3. WordPress widgets

You’re already well acquainted with the basic set of widgets that every blog begins with: Search, Archives, Recent Posts, Categories, Recent Comments, and Meta. In the following sections, you’ll tour a few more widgets you might consider adding to your site.

TIP

You can add the same widget more than once. For example, you can add two Custom Menu widgets to your page, give each one a different title, and use each one to show a separate set of links.

UP TO SPEED: I HAVE EVEN MORE WIDGETS!

The list of widgets in Table 5-3 includes all those that a self-hosted WordPress site starts with. But if your site is on WordPress.com, you’ll find the Widgets page stocked with a number of preinstalled extras, including widgets that let you share posts with nifty web services like Facebook, Twitter, Flickr, Goodreads, and Delicious. So what’s up?

The discrepancy reflects the way WordPress handles plug-ins. If your site is on WordPress.com, you can’t install plug-ins, so you’re limited to whatever Automattic offers in the Widgets window. For that reason, the company tries extra hard to include a broad set of useful widgets for everyone.

Self-hosted WordPress sites start out with fewer widgets, but you can add more—in fact, as many as you want—through plug-ins. You can start by adding all the WordPress.com widgets to your site with the Jetpack plug-in (The Jetpack Plug-In). You’ll learn to use these more exotic widgets throughout this book.

Finally, it’s worth noting that some themes come with their own specialized widgets. Usually, you can recognize them by the fact that the widget name starts with the theme name, like Twenty Fourteen Ephemera (which is included with the Twenty Fourteen theme).

The Calendar Widget

The Calendar widget gives readers a different way to browse your site—by finding posts published on a specific day (Figure 5-21). It’s most commonly used in blogs.

Figure 5-21. In the month of March, four days have at least one post—the 3rd, 4th, 6th, and 25th. Click the date to see the corresponding posts.

The Calendar widget used to be a staple of every blog. These days, it’s far less popular. The problem is that unless you blog several times a week, the calendar looks sparse and makes your blog feel half-empty. Also, it emphasizes the current month of posts while neglecting other months. Most readers won’t bother clicking their way through month after month to hunt for posts.

You probably won’t use the Calendar unless your posts are particularly time-sensitive and you want to emphasize their dates. (For example, the Calendar widget might make sense if you’re chronicling a 30-day weight-loss marathon.) If you use the Calendar widget, you probably won’t use the similarly date-focused Archives widget, or you’ll at least place it far away, at the other end of your sidebar or in another widget area.

The Tag Cloud Widget

You’ve already seen how the Categories widget lets visitors browse through the posts in any category. The Tag Cloud widget is similar in that it lets readers see posts that use a specific tag.

There’s a difference, however. While categories are well-defined and neatly organized, the typical WordPress site uses a jumble of overlapping keywords. Also, the total number of categories you use will probably be small, while the number of tags could be quite large. For these reasons, it makes sense to display tags differently from categories. Categories make sense in a list or tree. Tags work better in a cloud, which shows the most popular tags sorted alphabetically and sized proportionately. That means that tags attached to a lot of posts show up in bigger text, while less-frequently used tags are smaller (Figure 5-22).

Figure 5-22. This tag cloud shows that “health” is the most frequently used tag, with “store” close behind. As with categories, clicking a tag shows all the posts that use it.

There’s no secret to using the Tag Cloud widget. Just drag it into an area of your theme, and see what tags it highlights. The tag cloud might also tell you something about your site—for example, what topics keep coming up across all your posts.

NOTE

If clouds work so well for tags, it might occur to you that they could also suit categories, especially in sites that have a large number of categories, loosely arranged, and with no subcategories. Happily, a category cloud is easy to create. If you use WordPress.com, the handy Category Cloud widget does the job. If you self-host, you’ll notice an extra setting in the Tag Cloud widget: a list called Taxonomy. To create your category cloud, change the Taxonomy setting from Tags to Categories.

FREQUENTLY ASKED QUESTION: TAMING THE TAG CLOUD

What do I do if my tag cloud shows too many tags? Or not enough? Or makes the text too big?

The Tag Cloud widget is surprisingly uncustomizable. If you use fewer than 45 tags, it shows every one of them (although it ignores any tags you added to the Posts→Tags list but haven’t yet used in a post.) If you use more than 45 tags, the Tag Cloud widget shows the 45 most popular.

Occasionally, people want a tag cloud with more tags. But usually they have the opposite concern and want a smaller tag cloud that’s slim enough to fit into a sidebar without crowding out other widgets. If you want to tweak a tag cloud on a WordPress.com site, you’re out of luck. But if you run a self-hosted site, there are options. One solution is to crack open your template files. That’s because the behind-the-scenes code (the PHP function that creates the cloud) is actually very flexible. It lets you set upper and lower tag limits, and set upper and lower boundaries for the text size. You can get the full details from WordPress’s function reference at http://tinyurl.com/wptagcloud. (However, this information won’t be much help until you learn how to dig into your WordPress theme files to change your code, a topic explored in Chapter 13.) Another solution is to search for a plug-in that lets you pick the tag options and then generates a customized tag cloud. You’ll learn how to find and install plug-ins in Chapter 9.

The Text Widget

The Text widget is simple but surprisingly flexible. You can use it anywhere you want to wedge in a bit of fixed content. For example, you can use it in a sidebar, to add a paragraph about yourself or your site. Or you can put it in your footer with some copyright information or a legal disclaimer.

However, the Text widget becomes much more interesting if you stick some markup in it. Since it recognizes HTML markup, you can stuff in lists, links, pictures, and more. (In fact, WordPress self-hosters often use the Text widget to stuff in a video or an image, as explained on Adding Pictures to the Media Library.) Figure 5-23 shows two uses of the Text widget.

Using the Text widget is easy. First, drag it onto your page (as with any other widget). When you expand it, you get a nice big, multiple-line text box. If all you want is ordinary text, just fill in a title and type in your text underneath. Make sure you also turn on the “Automatically add paragraphs” checkbox. That way, wherever you separate the text (by pressing the Enter key), WordPress inserts an HTML line break element (that’s <br>) that, in turn, inserts the space you want.

Figure 5-23. Left: At its simplest, the Text widget displays a title (formatted according to the theme you’re using) with one or more paragraphs of text underneath. Right: Add some HTML, and the Text widget looks a whole lot fancier.

It’s almost as easy to put HTML in the Text widget. First, turn off the “Automatically add paragraphs” settings. Then, type in your content, with the exact HTML tags you want. Here’s an example that puts a word in bold type:

The following word will be <b>bold</b> on the page.

And here’s the HTML-formatted text from Figure 5-23 (right):

The <b>Magic Tea House</b> is a quirky mash-up: it's a fine tea importer with

the rarest gourmet teas, and a music venue for small-venue jazz, chamber, and

coffeehouse bands like:

<ul>

<li>The Black Teas</li>

<li>Cosmic Harmony</li>

<li>U.V.Q.</li>

<li>Samantha Told Me So</li>

</ul>

See our <a href='http://tinyurl.com/cyboj83'>location</a>.

If your HTML skills are a bit sketchy, you can copy markup from an HTML editor into the Text widget. Before you do, make sure you look over the markup and strip out any unnecessary details, like inline styles. That gives it a better chance of blending into your site without disrupting the rest of your WordPress page.

Mobile Themes

If you build a website today, it’s a safe bet that some of your visitors will browse your pages using smartphones, tablets, and other mobile devices. Unfortunately, pages that look good in a desktop or laptop browser aren’t so swell on smaller screens.

The problem is space—namely, how to adapt your pages when there’s not nearly as much room to work with. If you’re using an intelligent, mobile-aware theme, it can adapt itself to work in cramped spaces. It can rearrange your content, simplify your site’s layout, and increase the size of your text (Figure 5-24). This design philosophy is sometimes called responsive design because it responds to the needs of the viewer.

Figure 5-24. Left: The Twenty Twelve theme recasts itself for people with mobile devices. It shows your blog postings on a large, readable page, using a single column. To save space, it squashes the menu down to a single button (click it, and the full menu drops into view). Right: The Twenty Twelve theme still displays your widgets, like Recent Posts and Recent Comments, but it bumps them to the bottom of the page, below the list of posts.

Themes that aren’t mobile aware (meaning they don’t distinguish between desktop computers and web-enabled devices), don’t make any effort to tailor your pages for tiny screens. The result is a postage-stamp-sized page that’s difficult to navigate and read (Figure 5-25).

Figure 5-25. The aging Twenty Ten theme doesn’t attempt to accommodate smartphones. Browse a site that uses the theme, and you get the familiar bird’s–eye view of the page. Navigating this site requires plenty of zooming in and out.

The easiest way to make your site look good on mobile displays is to pick a theme that reconfigures your content for mobile devices. All the year themes from Twenty Eleven on do. When WordPress detects a visitor using a mobile device, the theme automatically substitutes a different layout—one that’s both simpler and carefully rearranged.

TIP

You can search for themes that have built-in mobile support using the Feature Filter. Just find the Layout section and turn on the Responsive Layout checkbox before you search.

If your theme doesn’t recognize mobile devices, all is not lost. If you have a self-hosted WordPress site, you can use a mobile-aware plug-in. One is WPtouch (http://tinyurl.com/wptouch), which identifies smartphones and other mobile devices, and makes sure they get a simplified theme that better suits their capabilities (and looks pretty slick, too). You haven’t yet learned how to use plug-ins, but you’ll consider WPtouch when you do, on Adding Mobile Support.

NOTE

Even if your theme does recognize mobile devices, you may still opt for the expanded features of a mobile plug-in. In the WordPress year themes, the mobile version looks nice but still makes some questionable design decisions. For example, they retain your sidebar widgets in an unwieldy list after your post. Similarly, the home page still includes the full content of each post, which creates a seemingly endless page. (Surely shortened excerpts are more convenient, and easier on the ever-scrolling index finger.) If you want to customize the mobile appearance of your self-hosted WordPress site, a plug-in like WPtouch is the perfect tool (Adding Mobile Support).

If your site is on WordPress.com, you can’t use a mobile plug-in. However, WordPress.com provides a similar but simpler set of built-in features. If your theme doesn’t have mobile smarts, you can ask WordPress to swap in its own basic mobile theme. Choose Appearance→Mobile, and next to “Enable mobile theme,” click Yes.

On the same page, you’ll find a few more options to configure your site for mobile devices. Most usefully, you can use the “Show excerpts on front page” setting to use a post’s excerpt (Summarizing Posts with Excerpts) instead of its full text in the post list on the home page. Although WordPress.com doesn’t give you nearly as much control as a mobile plug-in like WPtouch, it’s enough to let you keep your favorite theme, even if it isn’t mobile-aware.