The body of your page will generally contain your post or page content, any comments or trackbacks visitors have left, and any sidebars you have defined. I'll go through each of those three areas in turn. First, though, I'll show you the template tags that add styles to your body tag and posts, giving you finegrained control over the styling of each.

Body and Post Classes

The body_class() function prints a series of class names based on the content of the page being viewed. Listings 6-4 through 6-7 show a few examples of the function's output in various contexts.

Listing 6-4. The classes on a single post

<body class="single postid-63">

This tells you that you're looking at a single post, specifically post ID 63.

Listing 6-5. The classes on a page

<body class="page page-id-1952 page-parent page-child parent-pageid-1086 page-template page-template-default logged-in">

This tells you that:

• You're looking at a page, specifically page 1952.

• It's a child of another page, specifically page 1086.

• It's using a page template, specifically the default template.

Listing 6-6. The classes on page 2 of a category archive

<body class="archive paged category category-news paged-2 category-paged-2">

This tells you that:

• You're looking at an archive page.

• It's a category archive, specifically the news category.

• The archive has more than one page, and you're looking at page 2.

Listing 6-7. Adding classes to the body_class() function

<body <?php body_class('main extra-class'); ?>> // output:

<body class="single postid-63 main extra-class">

To add your own classes to the list, provide them as an argument of the body_class() function, as shown in Listing 6-7. They will be appended to the list of automatically generated classes.

The post_class() function, shown attached to the <h2> tag in Listing 6-8, works exactly the same way. It prints attributes about the individual post, including a microformat-specific class (hentry) that lets search engines know that this bit of content on the page is a blog entry. (See for more on microformats.)

Listing 6-8 shows the post classes printed for a sticky post with an ID of 188, several tags (tag1, tag2, tag3) and categories (cat-a, cat-b, cat-c, uncategorized, aciform).

Listing 6-8. Sample output of the post_class() function

<h2 class="post-l88 post type-post hentry category-cat-a category-cat-b category-cat-c category-uncategorized category-aciform tag-tagl tag-tag2 tag-tag3">

As you can see, these styles offer many opportunities to style posts differently based on their categories, tags, and sticky status. I encourage you to set apart your sticky posts somehow; you could give them a slightly different background color, for example. The rest of the classes are there if you need them.

Content: The Loop

The Loop (Listing 6-9) makes up the main part of a WordPress template. It is essentially a PHP loop wrapped in an if/else statement: if I have posts, then while there are posts, print some information about each one; otherwise print an error message. Figure 6-9 illustrates a typical Loop. What's confusing is that you never see where the posts come from. WordPress performs a database query based on the context— that is, which page you're looking at—and the choices you made in Settings Reading (regarding the number of posts to display). This query is stored in the $query global variable, and the resulting posts are stored in $posts.

Inside the Loop, the global $post holds the information about each post. All the functions that call a particular piece of information—the_title(), the_content(), and so on—refer to this post, unless otherwise specified (as you'll see in the next chapter). These functions are meant to be used inside the Loop, and generally do not work correctly outside the Loop unless you do a bit of extra work to set up the post data (also in the next chapter).

In most templates, you'll never need to interact directly with $query, $post, or any of the other global variables that define the page; you just need to work with the results. Just as the body classes did, the contents of the Loop will change depending on which page is being viewed. On the home page, either your most recent posts or a single page will be displayed, depending on your choices in the Settings. On a category archive page, the most recent posts in that category appear. Even the search page depends on an invisible database query.

Listing 6-9. The Loop

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h2 id="post-<?php the_ID(); ?>" class="<?php post_class(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a> </h2>

<?php the_content(); ?> <?php wp_link_pages(); ?> <div class="commentblock">

<?php comments_template(); ?> </div><!--commentblock--> <?php endwhile; ?> <div class="navigation">

<div class="alignleft"><?php posts_nav_link(); ?></div> <div class="clear"><!-- --></div> </div><!-- .navigation --> <?php endif; ?>

Let's break down the Loop a little.

The first line is a bit complicated; it contains both the conditional (if I have posts) and the beginning of the Loop itself (while I have posts, do something with them). From there to the endwhile() statement, you're inside the Loop, and you can use all the post-specific template tags (or functions). Here you use the_title(), the_content(), wp_link_pages() (which prints page numbers when a post contains multiple pages), and comments_template. This prints a very minimal amount of information about each post. For a complete list of template tags, visit

After the Loop has ended, but before you're completely done with your posts, you need to print some navigation tags. The posts_nav_link() function provides links to older posts (and newer ones if you're viewing an archive page). Note that this tag works only for posts.

Post One

Post Two

Post Three

Post Four

Post Five

Post Six

Figure 6-9. The Loop

There are a couple of arguments you can use to modify the way the_content displays your content. The most commonly used is the "more" text string—that is, the text that will be displayed if you have used the <!--more--> tag to break up your post (see Chapter 4). Listing 6-10 shows how to modify the text.

Listing 6-10. Changing the "more" link text <?php the_content("Continue reading..."); ?>


The comments_template() junction works like an include() statement, but it's specific to one file: comments.php. (Some older themes might instead use comments-popup.php, which opened comments in a pop-up window.) On the home page or an archive list, it doesn't print anything. On a single post or page, it will display the list of comments and trackbacks (if there are any) and the comment form (if comments are allowed).

Comments can be displayed using the wp_list_comments() tag. Listing 6-11 shows a simple list of comments. (This is just a small part of the comments.php file.) While this tag offers less fine-grained control over your comment display, it does allow you to take advantage of the options under Settings ^ Discussion.

Listing 6-11. The comment list

<h3 id="comments"><?php comments_number('No Comments', 'One Comment', '% Comments' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

<div class="navigation">

<div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div>

<ol class="commentlist"> <?php wp_list_comments(); ?> </ol>

<div class="navigation">

<div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div>

Listing 6-12 shows how comments can instead be displayed using a Loop. This is how comments were displayed prior to version 2.7, and some themes still contain this deprecated code. The Loop code offers more control over the individual elements of the comment list, but it also requires more work on your part if you want to modify things. For example, this code displays comments and trackbacks mixed together; if you want to separate them, you have to duplicate the loop and add conditional statements checking the comment type (comment or trackback). You also have to modify this code if you want to enable Gravatars, style the post author's comments differently, or use alternating background colors for every comment. If you use wp_list_comments(), all these features are built in, and you just need to style them in your CSS file.

If you display comments using a Loop, you will not be able to take advantage of the settings involving comment threading, paging, or ordering—the last three options under Settings ^ Discussion.

Listing 6-12. Displaying comments with a loop

<h3 id="comments">Comments</h3> <ol>

<li id="comment-<?php comment_ID() ?>">

<div class="comments-body"><?php comment_text() ?></div>

<p class="comments-post">Posted by <?php comment_author_link() ?> on <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F j, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('e','',''); ?></p> </li> <?php endif; ?> <?php endforeach; ?> </ol>

The code above constitutes just a small part of the comments.php template. See "Listing Comments" later in this chapter for a complete comments template.


The name of the sidebar must match the name of the widget defined in functions.php. See the "Theme Functions" section of this chapter for more information on setting up widget areas.

The code in Listing 6-13 provides a basic sidebar with one widget area. If you wish, you can check whether any widgets are registered and provide some default sidebar content if they are not. Here, if there are no widgets defined, the viewer will see a search form and a list of archives.

Listing 6-13. The widget area in sidebar.php

<div id="sidebar" class="widget-area"> <ul>

<?php if ( !dynamic_sidebar('first-widget-area') ) : // the ID of the sidebar ?> <li id="search" class="widget-container widget_search"> <?php get_search_form(); ?>

<li id="archives" class="widget-container">

<h3 class="widget-title"><?php _e( 'Archives'); ?></h3> <ul>

<?php endif; // end primary widget area ?> </ul>

Note that widgets do not have to be placed in a sidebar. While that's their traditional location, widgets can be placed anywhere on the page. The new Twenty Ten default theme has four widget areas in the footer in addition to the two in the sidebar.

You can define multiple sidebar files in your theme by giving them unique names. In addition to sidebar.php, you might have sidebar-page.php and sidebar-author.php. You can call these sidebars in your theme files using the get_sidebar() function, as shown in Listing 6-14. This feature might be most useful when you're customizing the appearance of various archive types, as I'll discuss later in this chapter.

Listing 6-14. Including multiple sidebar files

<?php get_sidebar('page'); ?> // sidebar-page.php <?php get_sidebar('author'); ?> // sidebar-author.php

Was this article helpful?

0 0

Post a comment