[Tutorial #21] Category Part 2 – Listing Posts

Introduction

In last tutorial we looked at wordpress’ ‘category’ and category.php template. Here we will discuss the two partial templates included in category.php :

1. content.php for displaying a post’s summary (information, feature image and excerpt).
2. content-none.php to indicate there is no posts of this category.

The codes in these files are mainly the template tags described in the Loop tutorial. You can find more template tags to use in the Codex page.

content.php

The file can also be found on my Github page:

Line 7: <article> tag with post information

The HTML5 <article> tag is used for indicating an article in the website, like a post. The template tags the_ID() and post_class() insert appropriate attributes and classes for proper wordpress display.

Line 8-31: post header section

This section prints out the post’s information:

Line 9: Display Post Title

The template tag the_title(...) displays the post’s title. One can wrap the title with HTML tags by specifying the tags before and after the title in the parameter as follows:

the_title('before_tags', 'after_tags');

Here we wrap the title with an <h3> tag and with hyperlink <a> tag. The post’s url is retrieved via template tag get_permalink().

The function esc_url(...) sanitizes an url and remove dangerous/invalid urls. It’s good practice to always wrap an url with this function.

Line 12: Check Post Type

This makes sure the post type is ‘post’ before we try to retrieve post information.

Line 15-18: Post Information

Here we print out the post’s information with the following format:

1. Display a Font Awesome icon.
2. Display information with the corresponding template tag.

For icons we use the <i> tag with fa, fa... font awesome classes. The names of the template tags are self explanatory.

Line 26-27 Post Edit Link

This template tag edit_post_link(...) shows a link for admins to directly go to the edit page in the admin panel. The parameters in sequence are:

1. Display text.
2. Wrapping tags that go before the link.
3. Wrapping tags that go after the link.

Line 33-55: Showing Post Content Summary

The summary shows two post contents:

1. Thumbnail (feature) image (line 36-47).
2. Content text excerpt (line 49-53).

The Bootstrap setup is one row (line 34 ) two columns: one relative width of 4 and another 8 (line 36,49).

Line 38-46: Check and Show Thumbnail Image

The codes first check if the post contains the “Featured Image” by template tag has_post_thumbnail(). If yes it displays the image by the template tag the_post_thumbnail(), and then sets the image link by the <a> tag.

The image’s url is retrieved in these steps:

1. Get thumbnail id by the post’s id: get_post_thumbnail_id($post->ID).
2. Get the url by thumbnail’s id: wp_get_attachment_url(...);

Notice that the codes $post->ID is the same as the template tag the_ID . The template tag just wraps $post->ID in a function. 

The <a> tag spans the entire image section by the CSS setup in this tutorial.

The post’s featured image is set at the Featured Image widget down right in the post edit page:

The blue area is where you set the featured image.

Line 50-52: Display Post’s Excerpt

The excerpt can be displayed easily by template tag the_excerpt(). We will show how to customize excerpt length in later tutorials.

content-none.php

It’s a good idea to customize display when wordpress hasn’t have the posts of a specific category, as the default display doesn’t look good. You can find the file on my Github page:

The code is simple. It prints two lines of messages (line 17, 21) and an image within a Bootstrap row class.