Category Templates
From 워드프레스(WORDPRESS) 한국어 위키
Contents |
Introduction
With the advent of WordPress' Theme feature, changing the look and feel of your WordPress site has never been easier. This document explains the relationship between your Theme's Template files and how your site is displayed when a viewer looks at one of your site's Categories. If you are new to template files, see Stepping Into Templates.
Using Category Templates
When a viewer clicks on a link to one of your Categories on your site, the patron is taken to a page listing the Posts from that particular Category in chronological order, from newest Posts at the top to oldest at the bottom. In the default, Kubrick Theme included with WordPress 1.5, for example, all Archive pages (monthly archives, Category archives, etc.) list the Posts as excerpts. You may want to have your Category pages formatted differently. To do this you can create Category Templates that tell WordPress how to display the information on those pages for each Category.
What Template Displays a Particular Category
First, you need to know the Template Hierarchy of Category Templates. The Template Hierarchy determines exactly which Template file is used by WordPress when displaying a Category page.
Suppose the Category ID of the Category in question is 6. WordPress uses the first Template file it finds in your current Theme's directory from the following list.
- category-6.php
- category.php
- archive.php
- index.php
If you do not have a category-6.php, WordPress will check for a category.php, and so on.
The simplest modification you can make is to make your Category pages look different from your main page. To do that, create a file called category.php in your current Theme's directory and control your Category's display from that file.
To make a particular category be displayed differently from the others, including the main page, you can create another Template file named category-6.php (where 6 is the Category ID of that Category), and WordPress will use that Template file instead.
This feature of query-based templates expands the possibilities for designing categories, so use your imagination.
Category Page Examples
The following is a list of instructional examples for modifying the pages for your Categories. Feel free to make additions.
Sticky Text on All Category Pages
Suppose you want some text displayed before the list of Posts when a viewer visits any of your Category pages (i.e. you want to display the same text for all Categories).
Create in your theme directory a file called category.php. Actually, you might want to copy archive.php or index.php or page.php over to this new category.php so you do not have to write as much code; you'll only have to alter it instead.
Above The Loop, insert the following code:
<div id="sticky-snip"> This is some text that will always display when any Category link is followed. </div>
Different Sticky Text on Each Category Page
The example above is useful, but suppose you want more flexibility; you want different text to display above the list of Posts from the Category depending on which Category the viewer is viewing. As an example, suppose you want to display:
- "These posts are all about cheese." for the "Cheese" category,
- "I am not wearing pants." for the "Shorts" Category,
- and "The following is a list of posts about some particular topic." for all other Categories.
Create category.php as above. Insert above The Loop
<div id="sticky-snip"> The following is a list of posts about some particular topic. </div>
Determine the Category ID of the "Cheese" Category. It is 6. Create category-6.php as above. Insert above The Loop
<div id="sticky-snip"> These posts are all about cheese. </div>
Determine the Category ID of the "Shorts" Category. It is 19. Create category-19.php as above. Insert above The Loop
<div id="sticky-snip"> I am not wearing any pants. </div>
Sticky Text Only on First Category Page
If your customized category page has enough posts to generate a previous page, a previous page link will appear at the bottom of the page. If you click the link to see more posts within that category, the sticky text will appear on each sequential "previous" page. If you do not want to see the text on the sequential pages, you can use a conditional tag to check to see which page in the series you are on, and if it is greater than page one, no more sticky text.
Around your sticky text, add the following:
<!-- Begin conditional statement -->
<?php if ( $paged < 2 ) { // Do stuff specific to first page?>
<p>This is some text that will be visible on the first page of the category page.</p>
<?php } else { // Do stuff specific to non-first page ?>
<p>If you would like text to show on sequential pages, put it here.</p>
<?php } ?>
<!-- end conditional statement -->
<!-- begin Loop -->
<?php while (have_posts()) : the_post(); ?>.....
Display Only Excerpts Instead of Full Posts
Perhaps you are looking to cut down on the size of your Category pages. You could do this by displaying excerpts rather than the entire content of each Post. If you examine archive.php from the default Theme included with WordPress 1.5, you will see how this can be done. In brief, this can be accomplished by creating a category.php as above, and using the_excerpt()
<?php the_excerpt(); ?>
instead of the_content()
<?php the_content(); ?>
Display Images Linking to Full Posts
As above in WordPress 1.5, you can use the excerpt field to change the display of category pages. Place an img tag within the excerpt field when editing your post. In your template, you can use the_excerpt_rss() which strips the paragraph tag from around the excerpt. You include this in a permalink of the post.
<a href="<?php the_permalink() ?>"><?php the_excerpt_rss(); ?></a>
Caveat: using the excerpt this way may effect your RSS feed, because it places an img tag in the excerpt, instead of text.
Replacing Multiple Category Templates With One
Using WordPress variables and queries, multiple category template files can be replaced with one category.php template file instead of individual category-#.php template files. The following are examples of how you might customize your category pages based on a single category template. You are limited only by your imagination and coding skills. This is not for the timid, and familiarity with PHP syntax and WordPress template tags is recommended.
A single category template file (category.php) can be created which uses the global $cat variable to determine which category is being displayed, and use that variable to find out information about the current category, the parent category, or the children categories.
For this example, the following information is collected:
- Category Description, which is set in the Manage > Categories panel
- Category ID and Name, which is set in the Manage > Categories panel
- Category Parent for Children Categories
- Category ID used within a plugin
Featured on our example custom category template are the following, visible on every category page view:
- Menu of the parent category and children categories
- Category Title
- Category Description
- Coffee2Code's Customizable Post Listings Plugin to create a random list of posts within that category
Custom Category Page Text
Using the category description set in the Manage > Categories panel, whatever information you enter in your category description, with or without HTML tags, will appear for any category page that includes a description. If you do not want custom text to appear on your custom category pages, make sure the category information is blank.
An example of the custom category page text for the "WordPress" category might be:
WordPress Category
In this category we discuss how we use WordPress on our site, offering tips and tricks to help other WordPress users get the most out of their WordPress site. Enjoy!
To create this, a query is made that says:
If this is a category page,
get the category ID and name.
Add some filters to the description for layout purposes,
then display the category title and category description.
The code looks like this:
<?php if ( is_category() ) : ?>
<h2 id="category-name-header">
<?php echo $cache_categories[$cat]->cat_name ?> Category</h2>
<?php add_filter('category_description', 'wpautop'); ?>
<?php add_filter('category_description', 'wptexturize'); ?>
<div id="category-description">
<?php echo category_description(); ?>
</div>
<?php endif; ?>
Remember the code from above to avoid stick text redundancy across the previous page views? Now combine that with the code to generate the category title and description.
<?php if ( $paged < 2 ) { // Do stuff specific to first page?>
<?php if ( is_category() ) : ?>
<h2 id="category-name-header"><?php echo $cache_categories[$cat]->cat_name ?></h2>
<?php add_filter('category_description', 'wpautop'); ?>
<?php add_filter('category_description', 'wptexturize'); ?>
<div id="category-description">
<?php echo category_description(); ?>
</div>
<?php endif; ?>
<?php } else { // Do stuff specific to non-first page ?>
<?php } ?>
Caveat
If you choose to use the Category Description as the text for your custom category pages, you will need to go through ALL of your template files and change all references and uses to the category description in those tags.
Examples
- wp_list_cats
- The usage of <?php wp_list_cats('use_desc_for_title=1'); ?> generates the description as the title in the link for the categories in a list. This template tag is often found in the header, sidebar and footer template files in your theme. Change the 1 to a 0 to set this to no and the link title will be changed to "View all posts filed under CategoryName", where CategoryName is the actual category name.
- list_cats
- Another version of wp_list_cats(), may include the use of the use_desc_for_title. This template tag uses a long query string of arguments to set its parameters. The tenth parameter covers the category description used in the link. It should be set to FALSE:
<?php list_cats(FALSE, '', 'ID',
'asc', '', TRUE, FALSE,
FALSE, FALSE, FALSE); ?>
- category_description()
- If you have used this template tag that explicitly calls the category description from within a template file, you will need to remove or change it, or be aware that it will call the category description you are also using for your category pages.
The Menu
The category menu uses two methods to collect information for the links: A simple link to generate a link to the category parent and use of the wp_list_cats() template tag to generate the children of the parent category.
The generated list will look like this:
- Parent Category
- Child Category One
- Child Category Two
- Sub-Child Category A
- Sub-Child Category B
- Child Category Three
The first link is a static link generated with a query. This query says:
- If there are posts, check to see what category is being viewed and call it $this_category.
- Get the category ID and link.
- If this category is the parent:
- Print the category name and link.
- If it is the child, find the parent and print that category name and link.
A link to a category page without using permalinks looks basically like this:
<a href="index.php?cat=8">Category Eight</a>
The query will replace the call for the cat=8 so the link generates the parent category link of the category shown.
The code is placed after the template call for the header and after the first style references for the layout of the page, before the WordPress Loop. We have styled the list in a style called cattoc for "category table of contents" as the menu name:
<?php if (have_posts()) : ?>
<div id="cattoc"><ul>
<?php $this_category = get_category($cat); ?>
<!-- If category is parent, list it -->
<?php if ($this_category->category_parent == 0) { ?>
<li>
<a href="<?php echo get_category_link($cat); ?>" title="<?php echo $this_category->cat_name; ?>">
<?php echo $this_category->cat_name; ?>
</a>
<ul>
<?php $this_category->category_parent = $cat; ?>
<?php } else { ?>
<!-- If category is not parent, list parent category -->
<?php $parent_category = get_category($this_category->category_parent); ?>
<li>
<a href="<?php echo get_category_link($parent_category->cat_ID); ?>" title="<?php echo $parent_category->cat_name; ?>">
<?php echo $parent_category->cat_name; ?></a>
<?php } ?>
...
...
<?php endif; ?>
In the second part of the menu, we need a list of the children under the parent category, to improve navigation within the category pages. The wp_list_cats() template tag automatically generates a list of the categories and their children, but we need to instruct the template tag to "get the children of the parent category."
<ul>
<?php
wp_list_cats('list=1&use_desc_for_title=0&child_of=' . $this_category->category_parent); ?>
</ul></li>
</ul></div>
Note: the template tag specifically sets the use_desc_for_title to NO (0). This instructs the tag to NOT use the category description as the "title" in the link, since we will be using it for the custom text on the category page. The template tag may also be modified to include sorting by name or ID and including the number of posts. For more information, see: wp_list_cats().
Random List of Posts
Using Coffee2Code's Customizable Post Listings Plugin to create a random list of posts within that category, we need to instruct the plugin to recognize which category the random list needs to be generated from.
The normal usage of the plugin tag is:
<?php c2c_get_random_posts(number of posts, "<li>%post_URL%</li>", category ID); ?>
Or, more specifically, display 5 posts in a list from category 8.
<?php c2c_get_random_posts(5, "<li>%post_URL%</li>", 8); ?>
The variable that needs to be set is the category ID. We replace that with a query that collects the category ID and sets it with the $cat variable again.:
$wp_query->query_vars['cat']
Now put this to work in a section called "Highlights" featuring a list of 5 random links to posts within the category being viewed.
<h4>Highlights</h4> <ul> <?php c2c_get_random_posts( 10, "<li>%post_URL%</li>", $wp_query->query_vars['cat'], $cat); ?> </ul>
Show the Category Posts
The rest of the page includes The Loop to display the posts within that category, and the ending if/else statements to close off the various queries we have made on the page. While your Loop may look different, here is the Loop for our example custom category page.
<?php while (have_posts()) : the_post(); ?>
<div class="excerpt-post">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<div class="catslist"><?php the_category(' and '); ?></div>
<div class="entry">
<?php the_excerpt('Continue Reading...') ?>
</div>
<!--
<?php trackback_rdf(); ?>
-->
</div>
<?php endwhile; ?>
This is then followed by the page navigation and calls for the sidebar and footer template files.
The Custom Category Template
Use what you have learned and put the whole thing together so you can see it in action, one category.php that generates custom information for each category on your site.
[NOTE: This template requires you to have the Coffee2Code Customizable Post Listings plugin already installed and activated.]
<div id="content">
<?php if (have_posts()) : ?>
<div id="cattoc">
<ul>
<?php $this_category = get_category($cat);?>
<?php if ($this_category->category_parent == 0) { ?>
<li>
<a href="<?php echo get_category_link($cat); ?>" title="<?php echo $this_category->cat_name; ?>">
<?php echo $this_category->cat_name; ?></a>
<ul>
<?php $this_category->category_parent = $cat; ?>
<?php } else { ?>
<?php $parent_category = get_category($this_category->category_parent); ?>
<li>
<a href="<?php echo get_category_link($parent_category->cat_ID); ?>" title="<?php echo $parent_category->cat_name; ?>">
<?php echo $parent_category->cat_name; ?></a>
<ul>
<?php } ?>
<?php wp_list_cats('sort_column=name&optioncount=0&list=1&use_desc_for_title=0&child_of=' .$this_category->category_parent); ?>
</ul></li>
</ul></div>
<?php if ( $paged < 2 ) { // Do stuff specific to first page?>
<?php if ( is_category() ) : ?>
<h2 id="category-name-header"><?php echo $cache_categories[$cat]->cat_name ?></h2>
<?php add_filter('category_description', 'wpautop'); ?>
<?php add_filter('category_description', 'wptexturize'); ?>
<div id="category-description">
<?php echo category_description(); ?>
</div>
<?php endif; ?>
<h4>Article Highlights</h4>
<ul>
<?php c2c_get_random_posts( 10, "<li>%post_URL%</li>", $wp_query->query_vars['cat'], $cat); ?>
</ul>
<?php } else { // Do stuff specific to non-first page ?>
<?php } ?>
<?php while (have_posts()) : the_post(); ?>
<div class="excerpt-post">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<div class="catslist"><?php the_category(' and '); ?></div>
<div class="entry">
<?php the_excerpt('Continue Reading...') ?>
</div>
<!--
<?php trackback_rdf(); ?>
-->
</div>
<?php endwhile; ?>
<?php endif; ?>
This is just an example and a good start. Use your imagination, PHP and WordPress query skills to help you create your own customizable category template file.
Resources
- Support Forum discussion of Category based home page
- January 2005 Hackers email list discussion on replacing $cache_categories
This article is marked as in need of editing. You can help Codex by editing it.
