changing the look of your wordpress blog

Changing the Look of
Your Blog
This chapter is about the reader’s view of your blog. It is about what your visitors see and how
they interact with your blog. That interaction, or experience, is important in ensuring your visitors
get the most from your site. If the experience is positive—they find what they want, and
they can interact easily and successfully—then they will want to come back. A good design will
drive that experience.
It is also about the aesthetic experience, too. The look of your blog, especially the first page,
must either fit the users’ expectations or surprise them in a positive, pleasing way. If you and
your community are discussing fan fiction for a Gothic TV horror show, they want a dark, slightly
sinister, experience. If you are all about craft fun for preschool children, you’ll want to present
a bright, airy, fun face to your readers (but not childish, since the parents are your audience).
The face of your blog—its outward appearance—is provided by the theme in use on your
blog. In this chapter, you’ll learn how to activate themes in WordPress, find and install new
themes, and modify themes. But first, let’s start with the purpose of your theme.
Using Themes to Communicate with
Your Audience
How do we communicate? Let me answer that question with another question. Have you ever
had a phone conversation with a person speaking in a monotone voice? If so, you’ll understand
that it’s not very engaging. You might have even found yourself overemphasizing your own
parts of the dialogue just to compensate!
Compare this situation to a face-to-face discussion with multiple participants. You may
have witnessed first hand the complex body language taking place throughout the conversation
as people start to use their hands to convey emphasis, or move their body between passive
and aggressive stances depending on their activity in the group. Now consider a lecture given
by a speaker at a conference. A good presentation is enhanced by visuals, moving parts, and
engaging with the audience. It’s as if the speaker understands the audience.
433
C H A P T E R 16
■ ■ ■
■Note Andrew Chak, in his book Submit Now: Designing Persuasive Websites (New Riders Press, 2002)
defined visitors to web sites in three different ways of moving around the site.Wanderers encounter the site
with no real purpose in mind, looking for something to catch their attention. Finders are looking for something
specific or help to find it, even though they don’t know exactly what they want. Learners are looking
for some information to learn something new.
When visitors come to your site, it needs to communicate in more than text alone. Word-
Press doesn’t hinder you in your quest to communicate with visitors. It enables you to configure
your blog to add images, define an organization, and use a style for each page consistently if the
whole site maintains a single theme or idea, or individually if each page has a theme of its own.
A simple example is to define each category to have unique colors and images while maintaining
a consistent arrangement on each page. In this chapter, I’ll show you how to use WordPress
themes to have your blog’s appearance achieve this communication with your audience.
A WordPress theme is like a template. WordPress inserts the posts you write, the comments
your readers leave, the links you create, and other information into the page dynamically. Themes
consist of a number of PHP files and a style sheet.
Before going any further, let me assure you that you do not need to understand the internals
of how a theme works or how it’s managed by WordPress to use it. Adopting a theme can
be as simple as uploading it to your blog and enabling it in the Themes tab of the Presentation
page. On the other hand, if you want to start investigating a theme with the intention of learning
from it or modifying it, you can do that, too. I will show you how to do that later in this
chapter, in the “Modifying an Existing Theme” section.
Selecting an Installed Theme
WordPress comes with two built-in themes. The Default theme, based on Michael Heilemann’s
Kubrick theme, is shown in Figure 16-1. It is a fixed-width layout centered in the browser window.
The other built-in theme is the WordPress Classic theme produced by Dave Shea for
WordPress 1.2, shown in Figure 16-2. This is a flexible theme that stretches to fill the width of
the browser.
434 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 435
Figure 16-1.WordPress Default theme
Figure 16-2.WordPress Classic theme
To select one of your installed themes, log in to the administration pages and click Presentation.
You will be presented with the theme selection page, as shown in Figure 16-3. This
page shows you all the installed themes and highlights the currently active theme. Click the
Select button of the theme that you wish to use, and then click View site at the top of the page.
Try that now to switch to the Classic theme, and you will see your blog content’s presentation
change (see Figure 16-2).
You can see how easy it is to completely change the style of your blog. Both of the built-in
themes include a variety of information in their sidebars, such as lists of categories, links to
archives, meta-information, and so on.
Adding New WordPress Themes
Adding themes to your WordPress installation is easy. You just download a theme and install it.
After the theme is installed, it will be listed on the Themes tab of the Presentation page, where
you can activate it, as described in the previous section.
Finding Themes
You can find lists of WordPress themes many places, including the following sites:
• The most comprehensive list at the time of writing is on WordPress’ Codex at
http://codex.wordpress.org/Using_Themes/Theme_List.
436 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-3. Selecting a theme
• A small selection of themes is highlighted at http://wordpress.org/extend/themes/.
• A large collection of themes is available at Alex King’s WordPress Themes Competition
site (http://www.alexking.org/index.php?content=software/wordpress/themes.php).
That competition is over now, but all of the entries are still available for viewing and
downloading.
In all, currently more than 300 themes are available for download from these sites. Most
of them are free to use with no restrictions. Some might require a link back to the designer of
the theme. Also, a number of designers will sell you a WordPress theme or design one to your
exact specifications—for a fee, of course.
Quite a variety of different styles are available: common two-column layouts with a wide
main column for posts and a second narrower column for lists, links, and so on; several threecolumn
themes; some four-columns ones; and a small number of themes with more unusual
shapes. The appearance of all these themes covers a wide range—from business-like to just
plain weird!
I mentioned earlier that you should style your site to suit the main subject of your blog.
Consider the theme shown in Figure 16-4, which is a Franz Ferdinand theme from Francey
(http://francey.org/linkware/15/), a talented young college student who produces web
designs for fun. This is a dark theme in a style suited to a music fan site.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 437
Figure 16-4. Dark of the Matinee theme by Francey
As another example, take a look at the Juicy theme by Joni Mueller of Web Jones Designs
(http://webjones.org/), shown in Figure 16-5, which I spotted on Alex King’s site (http://
managedtasks.com/wpthemes/blog/index.php?wptheme=Juicy). This theme would perhaps be
suited to a blog about healthy eating. Its clean, fresh look and pertinent imagery would help
keep your readers focused on the subject.
■Tip Some designs for older versions of WordPress are available around the Web, particularly
WordPress styles for version 1.2, many of which are listed at Alex King’s old competition site http://
www.alexking.org/index.php?content=software/wordpress/styles.php. These are not compatible
with the current version 1.5 and need to be converted. A straightforward conversion is fairly painless, and
you can find details of that process on the WordPress Codex at http://codex.wordpress.org/
Upgrade_1.2_to_1.5#Upgrading_Old_Templates_-_Easy.
438 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-5. Juicy theme from Web Jones Designs
Installing Themes
Once you have chosen a theme, you need to install it. Here are the steps:
1. Find the download site and download the zip file.
2. Unzip the theme zip file to your local machine.
3. Upload the files to your server, placing them in the wp-contents/themes folder.
4. Go to the Presentation administration page of your blog and activate the theme (see
Figure 16-3, shown earlier in this chapter).
If a theme requires a particular plug-in that you don’t have installed and the theme author
hasn’t coded it well, you may get an error message (see Figure 16-18 later in this chapter). If
this happens, activate another theme that you know does work and check the readme.txt file
or the theme’s documentation page (there should be a link to it on the Presentation admin
page). The readme file may mention any requirements for the theme or any restrictions on usage.
If you still want to use the theme, download and install any required plug-ins before activating
the theme again. (Refer to Chapter 15 for instructions on installing plug-ins.)
Modifying an Existing Theme
If you cannot find a theme that matches your requirements, you could create your own, but
that’s not a trivial task. Rather than create a new theme from scratch, it is often quicker to take
an existing theme similar to what you want and modify it, assuming the license allows that. This
is the approach I describe here. First, let’s look at the components of a theme.
Examining a Theme’s Components
A theme consists of two or more files. At the very least, it requires a CSS style sheet named
style.css and a PHP template named index.php. The style sheet must contain a specially
formatted comment at the beginning of the file. This comment identifies meta-information
about the theme, such as a name and description for the theme, version number, URL for the
theme, and so on. Figure 16-6 shows this comment for the WordPress Default theme.
The PHP file contains the HTML and WordPress tags to display your content. This file
contains what WordPress calls The Loop, which is a fairly short but important piece of PHP
code that is the heart of your blog page. This code displays the title and contents of your blog
posts, as well as information related to it. It also displays a count of the comments a post has
and a link to the comments themselves.
All the rest of the information displayed on a typical blog page—the blog title, links in a
sidebar, archive links, and so on—is peripheral to The Loop. Most of this other information is
displayed by calls to template tags.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 439
Template tags are small pieces of PHP code (typically one line of code) placed in your
template. These tags do a variety of work. Here are just a few examples of what template tags
can do:
• List the categories in your blog. This list includes links to make your blog display all the
posts in each particular category.
• List your archives by month, by week, or individually.
• Create a calendar on your page, complete with links to stories for each day and links to
move the visitor backwards and forwards through the history of your blog postings.
• Change the title of your web page based on the current story or current category.
All these template tags produce XHTML, not colors, borders, or columns. In other words,
the tags make the real content of your blog, marked up semantically, with meaning. The CSS
applies the look to this page, adding the colors, positioning different elements into columns,
and so on. This allows you to deliver the content in a number of ways without changing the
content itself.
■Tip As an example of the variety of ways you can deliver the same content in very, very different ways,
pay a visit to the CSS Zen Garden (http://csszengarden.com). This is a site put together to demonstrate
the design capabilities of CSS. The site has hundreds of different themes in a vast range of styles from simple,
business-like designs, to eastern-flavored works of art, through punk-styled graffiti-like pieces. But
every single version of the site uses exactly the same HTML content!
WordPress goes further than many theming and skinning systems. It can automatically
use special template files in appropriate circumstances if it finds them. For example, if you are
440 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-6. Stylesheet meta-information
displaying a single post and the file single.php exists in your current theme directory, Word-
Press will use that template. This allows you to present single posts with a different layout.
Similarly, a file called page.php will be used to display pages. For example, you might decide
to use the full width of the browser for your in-depth pages with more content and not display
the sidebar.
In this section, I will take you through some adjustments to a theme. You will see how to
remove elements you don’t want and add extra information you do want. You will also learn
how to adjust the CSS to make things appear differently, without needing to change the HTML
generated from the template.
Installing and Copying the Theme
First, you need to obtain the theme that you want to modify. For the original theme to use in
this chapter’s example, I have chosen the c3ro mask theme by C3ro, created by Chris Carlevato
(http://c3ro.com/themes/), shown in Figure 16-7. This is a beautiful, three-column theme
with a graphical masthead and a fading background. It is a little unusual in that it has its two
narrow informational columns, both on the right.
I made a couple of changes to the original theme to make it valid XHTML, as standards
compliance is an important part of WordPress. The validated theme is available from the
Source Code area of the Apress web site (http://www.apress.com), as c3romask-xhtml.zip.
Use this as your starting point.
After you download c3romask-xhtml.zip, unzip it into a folder call c3romask. Then upload
the folder and its contents to your wp-content/themes folder. Go to the Presentation administration
page and select the c3ro mask theme to activate it. If you view your blog now, it should
look like Figure 16-7.
So that you can compare the before and after versions of the theme, you will make
changes to a copy of the theme. On your local machine, in the place you unzipped the original
theme, rename the c3romask directory to c3romask2. (You could instead copy the directory and
not rename it in order to retain the original code on your local machine for later comparison
should things go drastically wrong.)
You will also need to edit the style.css file to change the name defined in the file. If two
installed themes have the same name, even if they are in different folders, WordPress gets confused.
See Listing 16-1 for the new header comment.
Listing 16-1. New Theme Meta-Information in style.css
/*
Theme Name: c3ro mask 2
Theme URI: http://c3ro.com/themes/
Description: A modified version of c3ro's mask theme
Version: 1.0
Author: Mike Little (after c3ro http://c3ro.com/)
Author URI: http://building-online-communities.com/wordpress/
*/
Upload this new folder with the modified style.css into wp-contents/themes and check
the Presentation page. You should now have the c3ro mask and c3ro mask2 themes listed.
Activate the c3ro mask 2 theme.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 441
Modifying Theme Images
To change the tone of the theme, choose a different header graphic. You can use any image or
images you find to convey the appropriate impression about your blog. You could take a photo
yourself or buy an image from one of the many photo agencies on the Web. For this example, I
thought the group of horses shown in Figure 16-8 seemed to convey the idea of a community.
442 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-7. The original c3ro mask theme
To replace the header graphic in the theme, I cropped the image to match the dimensions
of the original header graphic. I also overlaid the blog name onto the image. The original theme
header deliberately left that area blank for the same purpose. My header image is shown in
Figure 16-9.
After you are happy with your main header image, copy it to the same name as the theme
header image, overwriting the original. The theme now automatically uses your new version of
the header image.
You can continue to modify the other background images that accompany the theme,
again copying over the originals. I re-created them using colors from the new masthead image
to blend with it. Finally, I tweaked the CSS style sheet to use the same colors from the header
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 443
Figure 16-8. A new base image for a theme
Figure 16-9. Cropped and modified image ready for the theme
image for highlights and so on. See Figure 16-10 for the progress so far. You can download this
version of the theme, c3romask2-step1.zip, from the Source Code area of the Apress web site
(http://www.apress.com).
Changing the Template
If you want to make modifications to your theme files, you can edit them in WordPress’s Theme
Editor, as long as the theme files are writable by the web server process (see the “Setting File
Upload Options” section in Chapter 14). To activate the Theme Editor, go to the Presentation
administration page and click the Theme Editor tab. Make sure that the theme you want to edit
(c3ro mask 2 in this example) is selected in the drop-down list.
Alternatively, you can edit the theme files on your machine with your favorite editor and
upload them when you are ready. In both cases, you will want to make a backup copy, in case
something goes wrong.
444 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-10. The new theme with all images and colors in place
In this example, you will remove the list of buttons underneath the calendar and add a list
of news stories using the RSS Link List plug-in introduced in Chapter 15. To remove the buttons
from the rightmost column, choose the Main Template index.php from the drop-down list of
theme files on the right side of the page. When that file loads, find the section of index.php that
begins

. Remove the code shown in Listing 16-2.
Listing 16-2. HTML Code to be Removed from index.php

• 
  

If you check the blog now after saving and/or uploading your changed file, you will find
the buttons have gone!
Adding the RSS Feed
Now you will add in a call to display an RSS feed using the WordPress RSS Link List plug-in you
installed in the previous chapter. In that chapter, you saw how to add a special tag to a blog post
or page and have the plug-in convert that tag to a list of links driven from an external RSS feed.
This time, you want the list of links to appear in the sidebar. To do this, use the template PHP
function provided by the plug-in, rather than the special tag, which works only in posts or pages.
The template function provided by the plug-in is _rssLinkList(). This function can take
a number of parameters, any of which can be provided in the call to the function. If you don’t
provide any parameters, the function uses a complete set of defaults, including the default
RSS feed of http://del.icio.us/rss. For this example, you will use a different del.icio.us RSS
feed, which will provide a list of WordPress tools. Also, by default, the plug-in outputs the links
in list item markup (

). You will need to add unordered list tags (

), so that
you can address this list in the CSS to improve its appearance. Add the code marked in bold
in Listing 16-4 to the template.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 445
Listing 16-4. Template Function _rssLinksList Added to index.php

"http://del.icio.us/rss/tag/wordpress+tools")); ?>

View your blog page now, and you should see something like Figure 16-11.
446 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-11. The RSS feed appears as a list of links in the sidebar.
Adjusting the Links
The links appear in the sidebar, but they are not quite as pretty as you might like. Let’s add
some style rules for the header and the list to the end of the style.css style sheet, as shown in
Listing 16-5.
Listing 16-5. CSS Rules for the List of Links Added to style.css
#right h2 {
margin-top: 1.2em;
}
ul.rsslinks {
list-style-type: none;
margin:0;
padding-left: 10px;
}
ul.rsslinks li {
margin-top: 4px;
margin-left: 1em;
text-indent: -1em;
}
Also notice that some of the links have a description after them. If the RSS feed includes
a description, the plug-in will display it by default. You can turn that off quite easily. Another
default the plug-in provides is the number of links, which is 15. I think 10 is a more suitable
number. The resultant code in the index.php template file looks like Listing 16-6.
Listing 16-6. Additional Parameters to Restrict the Link List Output in index.php

"http://del.icio.us/rss/tag/wordpress+tools", "show_description"=>FALSE, "num_items"=>10)); ?>

If you check your blog page now, it should look like Figure 16-12. You will see the list looks
much neater and blends in with the rest of the content.
You have now added an external resource as part of the blog. Here, I chose one that is pertinent
to the readers. You could also have added a feed of related news items from another web
site or a list of the latest topics from a companion forum. The possibilities are quite extensive.
As long as there is a resource available in RSS format, you can add it this way.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 447
Adding Registration and Login Links
Something missing from this template are the links to register and log in to the blog. Most
WordPress blogs, being one-person blogs, don’t need these links. Many themes don’t even
bother to include them. For a community blog, you will want to add them to your theme.
To the index.php template file, add the code highlighted in bold in Listing 16-7.
Listing 16-7.WordPress Template Tags for Registration and Login Links Added to index.php
"show_description"=>FALSE,
"num_items"=>10)); ?>

The additions in Listing 16-7 are standard WordPress template tags. The call to
wp_register() produces a link to the registration page, but it does so only if registration
is enabled. If you are logged in, however, it produces a link to the administration pages.
448 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Figure 16-12. The improved list of links
The call to wp_loginout produces a link to the login page if the current visitor is not already
logged in, and a logout link if the visitor is logged in.
Next, add the CSS rules from Listing 16-8 to the end of the style sheet. This will ensure the
display of the links matches that of the other parts of the sidebar.
Listing 16-8. CSS Rules for Login and Register Links Added to style.css
ul#contribute {
list-style-type: none;
margin:0;
padding-left: 10px;
}
ul#contribute li {
margin-top: 4px;
margin-left: 1em;
text-indent: -1em;
}
Figure 16-13 shows how your register and login links should appear, and Figure 16-14
shows the site admin and logout links.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 449
Figure 16-13. The register and login links Figure 16-14. The site admin and logout links
Adding a Recent Comments Plug-In
Now you will install another plug-in, which will list a number of the most recent comments to the
blog in the sidebar. This is great mechanism to keep your readers interested. It allows them to see
which topics are still being discussed, and thus is an added incentive to keep reading those topics
and to continue to get involved. Real conversation about a shared interest between your readers
is the lifeblood of an active online community.
The plug-in is the Customizable Comment Listings plug-in by Scott Reilly. You can download
this plug-in via Scott’s site at http://www.coffee2code.com/archives/2005/03/30/
plugin-customizable-comment-listings/.
Download, install, and activate the plug-in using the procedure covered in Chapter 15.
Read through the comprehensive documentation on Scott’s site.
Next, add the code shown in Listing 16-9 (from one of the examples in the plug-in’s
documentation) to the index.php template file, just before the contribute section. The single
parameter 5 tells the plug-in to list only the five most recent comments.
Listing 16-9. Code to Insert into index.php Immediately Before the Contribute Links

Now add some more CSS rules to style the list of comments the same as the other lists on that page, as shown in Listing 16-10. Listing 16-10. Additional CSS Rules for the End of style.css ul.recentcomments { list-style-type: none; margin:0; padding-left: 10px; } ul.recentcomments li { margin-top: 4px; margin-left: 1em; text-indent: -1em; } Figure 16-15 shows what the default output of this plug-in looks like. Below the del.icio.us links, you have a list of the five most recent comments with the name of the comment author and the first few words of the comment. Those few words are a link to the individual comment itself. If a reader clicks the link, she will be taken to the blog post commented on with the page scrolled to the individual comment. 450 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG This is a useful addition to the blog, but it could be better. It doesn’t show to which story or post the comments belong. A reader might be particularly interested in what other people have to say about a story he commented on recently. A contributor might be looking for comments on her own stories. As its name implies, the Customizable Comment Listings plug-in is flexible enough to accommodate such additions. Let’s replace the simple call to the plug-in function with the code shown in Listing 16-11. This is another example provided in the plug-in’s documentation. Listing 16-11. New Version of the get_recent_comments Template Function in index.php
%comment_author% said \"%comment_excerpt%\" in
%post_URL%"); ?>
This function looks complicated, but it has only one more parameter. It uses a very powerful format template Scott has defined. Each of the terms enclosed in percent signs (%) is substituted by some data from the list of recent comments. The substitution names are fairly CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 451 Figure 16-15. Recent comments listed self-explanatory. For example, %comment_author% will be replaced with the comment author’s name, and %comment_excerpt% will be replaced with the first few words from the comment. You could also have the plug-in output a link to the comment author’s web site, if the comment writer provided one. The rest of the format parameter (taken from the plug-in author’s example) puts the comment details in a list item with the link to the post on a separate line. Figure 16-16 shows the output. This version gives more information, but it seems rather cluttered and the most important information—the name of the post and its link—isn’t easy to discern. So, let’s make one more change to this code. You will remove the comment excerpt and just link to the comment, but with the post title. Surprisingly, although this plug-in has more than 40 replaceable tags, none of them match the desired format exactly. You could have the post title as a link to the post, or the post title as a link to the top of the comment section, but none have the post title as a link to the specific comment. However, you can create this format by using two separate replaceable tags, as shown in Listing 16-12. 452 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG Figure 16-16. A different version of the recent comments list Listing 16-12. Final Version of the Recent Comments Code in index.php
%comment_author% on %post_title%"); ?>
As you can see in Figure 16-17, the list is much less cluttered now. As a bonus, hovering over the link to the comment gives the comment excerpt as a tool tip. That’s the title part of the code in the format parameter used in Listing 16-12. Cleaning Up the Code You have modified an existing theme, expanding it to do what you want. However, a couple areas could use some cleaning up. These involve making the PHP code safer and eliminating duplication in the CSS rules. CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 453 Figure 16-17. The finished recent comment list Safer PHP Code I mentioned earlier that if a theme requires a plug-in and that plug-in is not present, you will get errors on your blog. Sometimes, depending on the place the error occurs, your blog page may not work at all. Take a look at Figure 16-18. Here, I have disabled the RSS Link List plug-in. The error on the page is at exactly the place the plug-in template function is called. No more of the template code is executed, even though the rest of the page would have displayed correctly. Imagine if you had a call to a template function at the beginning of your theme template. The resultant page might contain a cryptic error message and nothing else! There is a simple solution to this problem. PHP has a special ability to test whether a function exists. This means you can test to see if the plug-in function exists before trying to call it. If it doesn’t exist, you don’t call it. There will be no error, and if you write your template code carefully, there won’t even be a header with nothing below it. Listing 16-13 shows the new version of the code. 454 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG Figure 16-18. Theme template code can cause errors on your blog. Listing 16-13. Additional PHP Function in index.php to Protect Against Errors with the rssLinkList Function

"http://del.icio.us/rss/tag/wordpress+tools", "show_description"=>FALSE, "num_items"=>10)); ?>

The test code (highlighted in bold) uses the PHP function function_exists to check whether the _rssLinkList function exists. If it does, the code in between that line and the matching endif line is executed to output the HTML code and call the plug-in function. If the function does not exist, because the plug-in is either disabled or not installed, the code between the two highlighted lines is not executed, so you won’t even get the redundant header. Figure 16-19 shows the resultant page with the plug-in still disabled. CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 455 Figure 16-19. No plug-in and no errors Go ahead and make a similar change to the call to the recent comments plug-in, as shown in Listing 16-14. Listing 16-14. Additional PHP Function in index.php to Protect Against Errors with the c2c_get_recent_comments Function

%comment_author% on %post_title%"); ?>

You will be pleased to hear that there is no need to take the same kind of precautions with the special rssLinkList tag embedded in your posts or pages. The technology WordPress uses to process special tags is more sophisticated than simply executing PHP code. In fact, you can’t execute PHP code in a post (although there are plug-ins that allow you to do this). Instead, the tags are simply ignored if the plug-in is disabled or not installed. Also, you don’t need to add this kind of testing around WordPress’s built-in template functions. As these are core to WordPress, they will always be there. If they are not there, you have a broken installation, and a lot more things will break! Cleaner CSS In making the RSS feed links, the contribute links, and the latest comments links look the same, you have duplicated the same CSS style rules. CSS allows you to be somewhat cleverer than that. Rather than have three separate rules, you can give all three sections the same HTML class, and then have a single set of style rules applied to all three. Listing 16-15 shows the duplicated CSS that needs to be removed. Listing 16-15. The Duplicated CSS Rules to Be Removed from style.css ul.rsslinks { list-style-type: none; margin:0; padding-left: 10px; } ul.rsslinks li { margin-top: 4px; margin-left: 1em; text-indent: -1em; } 456 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG ul#contribute { list-style-type: none; margin:0; padding-left: 10px; } ul#contribute li { margin-top: 4px; margin-left: 1em; text-indent: -1em; } ul.recentcomments { list-style-type: none; margin:0; padding-left: 10px; } ul.recentcomments li { margin-top: 4px; margin-left: 1em; text-indent: -1em; } Listing 16-16 shows an improved version with a new class name, rightsidelists, which is a little more semantic and can be applied to all three sections. Listing 16-16. The Reduced Multiple Class CSS Rules Added to style.css ul.rightsidelists { list-style-type: none; margin:0; padding-left: 10px; } ul.rightsidelists li { margin-top: 4px; margin-left: 1em; text-indent: -1em; } Using the reduced CSS rules in Listing 16-16 means applying a class attribute matching the class name to each unordered list in the right column, as in
. This is fine for a couple of lists, but gets a little repetitive and is tedious to remember. A better solution is to use the combination of a unique identifier and an element selector, instead of a class selector, to apply rules to all unordered lists in the right column. This eliminates the need to remember to use the class for each one. Listing 16-17 shows the CSS rules that will apply to all unordered lists in the right column. CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 457 Listing 16-17. The Reduced Element Selector CSS Rules in style.css #right ul { list-style-type: none; margin:0; padding-left: 10px; } #right ul li { margin-top: 4px; margin-left: 1em; text-indent: -1em; } You need to change the HTML in the template to remove the eliminated class names, as they’re now not needed or even defined. You can see in Listing 16-18 that the class attributes have been removed from the
tags. You can download this version of the theme from the Source Code area of the Apress web site (http://www.apress.com), as c3romask2-step2.zip. Listing 16-18. Leaner HTML Without Class Attributes in index.php

"http://del.icio.us/rss/tag/wordpress+tools", "show_description"=>FALSE, "num_items"=>10)); ?>

%comment_author% on %post_title%"); ?>
You have now completed the process of customizing a theme to use different images, add
new content, and display the links in a different format. You can apply this approach to modify
other themes to suit your needs.
458 CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG
Summary
This chapter demonstrated how to change the face of your blog to make your site more appealing
to your visitors. I’ve shown you how to add pertinent information to enhance the readers’
experience of your site. All of this has been about the front page of your blog. This is important,
as it is the first impression your first-time visitor gets. But you can go much further.
WordPress can do a lot more to enhance your visitors’ time on your site. It can help you
keep your readers engaged by presenting the right information at the right time. In the next
chapter, I will show you how to change the appearance of the blog depending on the page being
viewed and include different content on different pages. I will also introduce more plug-ins to
enhance the readers’ experience.
CHAPTER 16 ■ CHANGING THE LOOK OF YOUR BLOG 459

Customizing Your Blog’s Layout
In this chapter, I will show you how to improve your users’ experience by tailoring your blog’s
layout to your audience. As with the previous chapters, the focus is on building your community
and making it enjoyable and rewarding for people, so they will return again and again. To
achieve this goal, you need to think about the users’ experience as they use your site. What are
your readers doing on the site? What are they trying to achieve? When you have the answers to
these questions, you can help your readers by customizing your site to accommodate their
interests.
Considering What Your Reader Is Doing
When users click the comments link of a story, they are taken to a new page where they are
presented with the story in full and the related conversation. Almost everything else they see
looks the same as the layout on the front page. That’s the beauty of a template-driven system.
You don’t need to do anything to get the same look and feel, as well as common content across
all your pages.
But sometimes presenting the same layout is not the right thing to do. You should think
about what the users are doing. What are their intentions? What benefit will they get from this
action? What will they want to do next? The answers to these questions depend somewhat on
the nature of your site.
Having a Conversation
People love to chat. They love to have their say. In pubs and clubs, in their homes, in bus queues,
and in supermarket aisles, people love to talk.
For many people, it is just as rewarding to have those conversations without the face-toface
contact, such as on the phone or on a shortwave radio. People still have conversations with
pen and paper, sending letters to each other. Similarly, people love to have conversations online.
The nature of some online conversations is analogous to other types of conversations.
Real-time chat in a chat room is most like a face-to-face meeting with several people. Instant
messaging is like a phone conversation between two people. E-mail is like a paper-and-pen
correspondence. Yet the online world gives us other ways to converse that don’t have true parallels
in the real world. That e-mail conversation can take place on a mailing list, where many
people join in. Bulletin boards are like conversations with a lot of people, but the conversation
can be in near real-time, like a chat, or time-delayed over many hours, days, or weeks, more
like a mailing list.