-
Notifications
You must be signed in to change notification settings - Fork 0
/
category-templates.html
182 lines (122 loc) · 10.5 KB
/
category-templates.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<h3>Overview</h3>
When a user clicks on a <a href="http://codex.wordpress.org/Glossary#Post" target="_blank">Post's</a> Category hyperlink, WordPress displays a page of Posts in reverse chronological order filtered by that category.
By default, the look and feel of this page is determined by the index.php template file.
The theme developer can create several optional template files that will override and refine this behavior, including archive, category, and tag templates.
This section discusses <a href="http://make.wordpress.org/docs/theme-developer-handbook/theme-basics/template-hierarchy/#category" target="_blank">Category Templates</a> and how to create them.
WordPress display posts by category based on the following <a href="http://make.wordpress.org/docs/theme-developer-handbook/theme-basics/template-hierarchy/" target="_blank">Template Hierarchy</a>:
<ol>
<li>category-{slug}.php</li>
<li>category-{ID}.php</li>
<li>category.php</li>
<li>archive.php</li>
<li>index.php</li>
</ol>
WordPress searchs for a template file in the order listed above. If it fails to find any of the specialized category templates or an archive.php template file, it will revert to the default behavior, basing the page on index.php.
The archive.php template provides the most general form of control, telling WordPress treat all Post pages differently from other WordPress pages.
The category.php template allow Posts filtered by category to be treated differently from unfiltered Posts or Posts filtered by some other taxonomy.
The category-{slug}.php and category-{ID}.php allow Posts filered by a specific post slug or post ID to be treated differently from other Posts. This allows you, for example, to format all Posts in the "news" category into a page that looks diffently from Posts filtered on other categories.
<h3>Creating Category Template Files</h3>
So, now you've decided that your design dictates that you need to control the look and feel of your Posts based on their category. Where do you start?
Rather than starting from a blank file, it is good practice to copy the next file in the hierarchy, if it exists. If you've already created an archive.php, make a copy called category.php and modify that to suit your design needs. If you don't have an archive.php file, use a copy of your theme's index.php as a starting point.
Follow the same procedure if you are creating a category-{slug}.php or category-{ID}.php file. Use a copy of your archive.php, category.php, or index.php as a starting point.
<h4>Examples</h4>
Now that you've determined which template file in your theme's directory you need to modify, in order to make changes to the look of Category pages, let's look at some examples. In these examples, when it says "edit your template file", it means to edit the file you chose in the section above.
<h3>Adding Text to Category Pages</h3>
<h4>Static Text Above Posts</h4>
Suppose you want some static text displayed before the list of Posts on your Category page(s). By "static", we mean text that remains the same, no matter which posts will be displayed below, and no matter which category is being displayed. Here is how to do it: above <a href="http://codex.wordpress.org/The_Loop" target="_blank">The Loop</a> section of your Template file, insert the following code:
[html]
<p>
This is some text that will display at the top of the Category page.
</p>
[/html]
<h4>Different Text on Some Category Pages</h4>
A slightly more complex possibility is that you want different text to display depending on which category page the visitor is viewing. Then you would add the "default" text to the main category.php file, and create special category-#.php files (with their own version of the text, as described in the Introduction) for each category that needs special text at the top.
This does however create a lot of files in your theme directory, and can be avoided using the following code OUTSIDE the loop:
[php]
<?php if (is_category('Category A')) : ?>
<p>This is the text to describe category A</p>
<?php elseif (is_category('Category B')) : ?>
<p>This is the text to describe category B</p>
<?php else : ?>
<p>This is some generic text to describe all other category pages,
I could be left blank</p>
<?php endif; ?>
[/php]
This does the following. Checks to see if we are looking at Category A, if we are then show the first bit of text, but if we're not then check if we are looking at Category B. If we are then show that bit of text, and finally, if it is neither Category A or B, then show this default text.
<h4>Text Displaying Only on First Page of Archive</h4>
Another thing that can happen is that if your Category contains more posts than will fit on one page (according to the Options for Blog Reading you have set in the Administration panels of your blog), the category archive will split into multiple pages. And maybe you only want to display your static text if the viewer is on the first page of results, or you want to display different text for the other pages.
To make this happen, you can use a PHP if statement, which looks at the value of the $paged WordPress variable ($paged is equal to the page number: 1 for the first page of results, 2 for the second page, etc.). It may sound complicated, but it's actually not too bad. Just put the following above <a href="http://codex.wordpress.org/The_Loop" target="_blank">The Loop</a>:
[php]
<?php if ( $paged < 2 ) : ?>
<p>Text for first page of Category archive.</p>
<?php else : ?>
<p>Text for subsequent pages of Category.
Can be left out.</p>
<?php endif; ?>
[/php]
<h4>Category Name</h4>
Another possibility is to put the category name at the top of the page. If this is not already part of your template, you can add it by doing something like this, above <a href="http://codex.wordpress.org/The_Loop" target="_blank">The Loop</a>:
[html]
<p>Category: </p>
[/html]
<h3>Modifying How Posts are Displayed</h3>
<h4>Excerpts vs. Full Posts</h4>
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. To do this, you will just need to find where it says <a href="http://codex.wordpress.org/Template_Tags/the_content" target="_blank">the_content()</a> inside <a href="http://wordpress.org/support/topic/required-tag-functions-in-23-missing?replies=27" target="_blank">The Loop</a> in your Template, and replace it with <a href="http://codex.wordpress.org/Template_Tags/the_excerpt" target="_blank">the_excerpt()</a>. These will most likely be inside PHP tags:
[php]
<?php the_excerpt(); ?>
and
<?php the_content(); ?>
[/php]
Conversely, if your Theme is currently displaying excerpts and you want full posts, replace the_excerpt with the_content.
<h4>Display Images Linking to Full Posts</h4>
Another thing that is interesting to do in a category archive page is to replace the post content with an image that links to your post. To do this, you will first need to put images into the Excerpt sections of your posts. Here's how to do that, for one post:
<ol>
<li>Upload an image on the post editing screen.</li>
<li>Switch to the "Code" editor, rather than the "Visual" editor.</li>
<li>Use the Uploads / Browse tab to insert the image into your post. Make sure to insert the full-sized image, with no link.</li>
<li>Copy the inserted HTML img tag, and paste it into the "Optional Excerpt" section of the post editing screen.</li>
<li>Finish writing the post content (you can remove the image), and publish the post.</li>
</ol>
Now you will need to modify your template. We'll use a trick: the the_excerpt_rss() Template Tag does not put a paragraph tag around the excerpt. So we can use it to insert the img HTML and put it inside a link. Here's what you need to put into your Template, in place of using the_content:
[php]
<a href="<?php the_permalink() ?>">
<?php the_excerpt_rss(); ?>
</a>
[/php]
Caveat: using the excerpt this way may affect your RSS feed, because it places an img tag in the excerpt, instead of text. So if you are going to do this, you probably want to set your options so that the full posts are put in RSS feeds, rather than excerpts.
<h4>What categories do you show to the visitors?</h4>
To select which category you would like to see on any page, for instance an archive page, use this.
[php]
<?php
$args = array ( 'category' => ID, 'posts_per_page' => 5);
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
?>
//Style Posts here
<?php endforeach; ?>
[/php]
This uses the <a href="http://codex.wordpress.org/The_Loop" target="_blank">get_posts</a> template tag in order to call an array of posts that adhere to the criteria that you set. In this instance, make sure you change "ID" to the category ID number you wish to show. The posts_per_page parameter simply states how many posts you would like to display from this category. We have set the number here to 5.
You can also use<a href="http://codex.wordpress.org/Conditional_Tags" target="_blank"> Conditional_Tags </a>in order to create archives that respond to conditions set by the URL or context. For instance, if you would like to ensure that when a user visits http://yourblog.com/2008/02/ it will show posts from February of 2008 first, simply add this code to your archive.php file.
[php]
<?php if (have_posts()) : ?>
<?php if (is_month()){
$year = get_the_time('Y');
$month = get_the_time('m');
$the_query = new WP_Query( 'monthnum=$month&year=$year&$cat=5' );
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
endwhile;
/* Restore original Post Data
* NB: Because we are using new WP_Query we aren't stomping on the
* original $wp_query and it does not need to be reset.
*/
wp_reset_postdata();
?>
[/php]
<h3>Further Reading</h3>
<a href="http://wordpress.org/support/topic/display-by-category-homephp-template?replies=52" target="_blank">Support Forum discussion of Category-based theme</a> - how to make a Theme that organizes posts by category instead of by date on the home page
<a href="http://codex.wordpress.org/Templates" target="_blank">Templates</a> - Comprehensive list of resources related to Themes and Templates
<h3>Related</h3>
Template Hierarchy: Category Templates, Tag Templates, Taxonomy Templates, Page Templates, Post Type Templates, Author Templates, Date Templates, Search Templates, 404 Templates, Attachment Templates, Loop Templates