How to create 'Book Review' using a custom post type in WordPress

In WordPress, custom post types are content types like posts and pages. Users can create other post types than the default post types such as posts and page. Here I will show you how to create a "Book Review" section.

The final result will be the following:

Book Review using Custom Post Type in WordPress

Process

Let's think about the items which will be included in the Book Review. I would like to display the following information:

  • Book title
  • Author
  • Rating
  • Amazon URL
  • Book cover image

We need to determine whether to include an archive page for the newly created post type or not. I will create a new archive page for the post type. The process to create Book Review, a custom post type.

  1. Create and setup a custom post type (e.g. "book").
  2. Add custom fields.
  3. Create a post template for the post type.
  4. Create an archive template for the post type.

Create and setup a custom post type

A custom post type can be created manually by referring to WordPress Codex. However, I will create on using a plugin.

Please install a WordPress plugin for creating and managing custom post types: Custom Post Type UI. If you enable it, a new menu named "CPT UI" will be added to your Dashboard. Click "Add/Edit Post Types" to create a new post type.

Create a new post tyle - book

Please fill each field. For the section "Has Archive", please add "book" as shown below:
Has Archive in CPT

When you "Save Post Type", a new post type "book" will be created and the "Book Review" menu will be added to your Dashboard.
Book Review menu added

 

Create custom fields

Now I want to create custom fields which will be associated with the newly created post type. Of course, you can create them manually. However, I will create the custom fields with the plugin named Advanced Custom Fields. When you install and enable this plugin, a new menu "Custom Fields" will appear in Dashboard. In "Custom Fields", please create a field group and then add the following field.
Custom Fields for Book Review
Please set the location of the custom fields to "book":
Location Custom Fields will be assigned to

Be sure to set "Return Value" to  "Image URL" not to "Image Object" for  the field "cover", an image field type.
Add image custom field in WordPress Custom Fields

Now, the fields added above will appear in the post editor screen for the post type "book."
Custom Fields are added to Book Review

 

Create a post template for the custom post type

The template name for custom post types should be single-{post_type}.php (see here.) In this example, I will create a file "single-book.php", which will be used to display single post content of the newly created custom post type. Please copy and past the content of "single-book.php" into "single-book.php".

Now, you need to modify the "single-book.php" as needed. For your reference, I tested it in the Twenty Thirteen theme. I replaced the line "php get_template_part( 'content', get_post_format() ); ?>" with the content of "content.php", and then made changes. Otherwise, you can correct "content.php" to reflect the custom post type "book." (This varies depending on the theme you use.)

I added the following code to "single-book.php" to display the custom fields.

<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><strong>Title:</strong></td>
<td width="75%"><?php the_field('title'); ?></td>
</tr>
<tr>
<td><strong>Author:</strong></td>
<td><?php the_field('author'); ?></td>
</tr>
<tr>
<td><strong>URL:</strong></td>
<td><a href="<?php the_field('amazon'); ?>" target="_blank">Click</a></td>
</tr>
<tr>
<td><strong>Rating:</strong></td>
<td><?php if( get_field('rating') ) {
$starNumber = get_field('rating');

for($x=1;$x<=$starNumber;$x++) {
echo '<img src="http://www.example.com/star.png" />';
}
if (strpos($starNumber,'.')) {
echo '<img src="http://www.example.com/half.png" />';
$x++;
}
while ($x<=5) {
echo '<img src="http://www.example.com/blank.png" />';
$x++;
}
echo '(';
the_field('rating');
echo ')';
}
?></td>
</tr>

<tr>
<td><strong>Cover:</strong></td>
<td><img src="<?php the_field('cover'); ?>" alt="" /></td>
</tr>

</table>

Please refer to this field for how to display custom fields.

NOTE:

If you added a text field where a YouTube URL will be input,  you can use the following code to display the YouTube video (for example, for "Movie Review"):

<?php if( get_field('youtubeurl') ){
$embed_code = wp_oembed_get( get_field('youtubeurl') );
echo $embed_code;
} ?>

After modifying the custom post template, each post will be displayed like the following:
Book Review using Custom Post Type in WordPress

 

Create an archive template for the custom post type

The name of an archive template file for custom post types should be "archive-{post_type}.php" (in this case,  "archive-book.php"). And then, please copy and paste the content of the file "archive.php" into "archive-book.php." You can modify it as you with. In the theme Twenty Thirteen, the full text is shown instead of the excerpt in the archive. I modified it to display the excerpt of each post. I used the following conditional code for this.

if ( 'book' == get_post_type() )

The URL of the archive page should be http://BLOG_ADDRESS/book/. In the example, the archive page looks the following:
Archive for Custom Post Type

 

Create and add a custom taxonomy

Add a custom taxonomy

You can use "Category" as the category of the custom post type. However, in this case, the category page will not be displayed properly. To resolve this issue, you need to modify the category template. Using a custom taxonomy can be an alternative.

For this, let's create a new taxonomy with the "Custom Post Type UI" plugin. Under "Add/Edit Taxonomies", please add a new taxonomy.
Custom Taxonomy-Genre

Fill out the fields above. Please be sure to check the custom post type under the section "Attach to Post Type".

In addition, under "Add/Edit Post Types", please check only the newly created taxonomy for "Built-in Taxonomies."
Built-in Taxonomies

Add the link to the custom taxonomy to template files

Now, the custom taxonomy will appear under "Book Review" in Dashboard.
Genre Taxonomy added

If you want to display the link to the taxonomy in the template files, please add the following code:

<?php echo get_the_term_list( $wp_query->post->ID, 'bookreview', '', ', ', '' ); ?>

For example:
Custom Taxonomy displayed in a post

Create an archive template for the custom taxonomy

To use the taxonomy associated to the custom post type, we need to create an archive template for the taxonomy. The name of the archive file should be "taxonomy-{taxonomy_name}.php." In this example, I made an archive template file named "taxonomy-bookreview.php". And then I copied and pasted the content of  "archive-book.php" into "taxonomy-bookreview.php." And then, I replaced the string  'book' == get_post_type() with "is_tax('bookreview')". You can modify it as you wish.

Now, "Book Review" is complete. You can use the same process to create other custom post types such as "Movie Review", "Portfolio", etc.


Leave a Comment

3s