Today I am going to tell you how to showcase your books on your wordpress site with WordPress Custom Post Types. You can replace books with whatever you want. Movies / Products / Anything.

First phase : add Custom post type

We are going to use a plugin called “Pods” for our work. Go to Plugins > Add new and search for “Pods“. Click install and activate once you found it.

install Pods

Step #1. Lets create our custom posts called “Books” to showcase your books on the website. On the WP dashboard go to Pods Admin > Add new. From the next screen click Create New.

Step #2. Select the content type and name the custom post type here. Click “Next Step“. This will add a new menu item to the WP dashboard menu.

create custom post

Step #3. Before adding our books we have to add fields to the post type we just created. For the books we are going to have following fields.

  • Book Title
  • The Author
  • Short Description
  • Description
  • Book cover image
  • Price of the book
  • Where to buy

add field

To add a field just click the button “Add Field“. It will show you the dialog box to add details. Label > Name for the filed, Name > the slug, Description, Field type > Select the data type we need for the field. Then click “Add Field“.

add

Step #4. Lets move forward and add all fields to the custom post type.

  • Book Title – We can use the post title for this. So no need to add a field.
  • The Author – Added on step #3
  • Short Description – We are going to use excerpt for this. No need to add here.
  • Description – We can use the main content area of the post. No need to add this too.
  • Book cover Image – Showing below.
  • Price of the book – Showing below.
  • Where to buy -Showing below.

Book cover imageBook pricebuy now

Step #5.  Now go to the “Advanced Options” tab and scroll down. From there you have to add support for ‘Excerpt‘ and ‘Categories‘ (So we can have our books categorised.) Finally click “Save Pod

advanced option

support

Step #5. Great! we have just added our custom post type successfully. 🙂 Lets start adding some books. Go ahead to Books > Add new to add your books. Put the book’s name on the title section and add the full description to the content area. You can copy the top paragraph to the excerpt area or write a short description. Also you can add Categories here if you want. Finally add image, price, link to buy and Publish it. Go ahead and add few more the same way. Once you done, you can check your books.  “Enable Archive Page” in Advanced option section to show you the list of books you have just added. Similar to blog post archive. So you can visit now to www.yourdomain.com/book. It will show you something similar below.

archive

Ok. Lets move to the second phase !

Step #1. We have added some books to our site. Now we have to show them to the visitors. Lets see how to do that. First of all you have to go to Pods Admin > Components > Templates and Enable it.

enable pods templates

It will add Templates to the Pods Admin menu.

Step #2. Go to Pods Templates and click “Add New“. Here we have to create our templates to show the book posts. Name your template to Books archive as we are going to use this for the list view. Not for the single posts. On the Pod Reference section select the pod we created. It will show you all the tags we can use to build our template.

pods template editor

Step #3. I am going to use two column template here. (You can use responsivegridsystem.com to create a custom column layout). We have to use {@ } to add a tag to the template. Ex. if you want to add the post title, you have to do it as {@post_title}. Can add between HTML tags. don’t worry too much. Just copy  and paste the below code to the template area.

[html]

<div class="section group">

<div class="col span_1_of_3">
<a href="<?php the_permalink(); ?>"><img src="{@cover_image}"/></a>
</div>

<div class="col span_2_of_3">

<h4>Author : {@the_author}</h4>

{@post_excerpt}

<h4>Price : {@book_price}</h4>

<a href="{@buy_now}" target="_blank">Buy Now</a>
</div>

</div>

[/html]

We are adding the_permalink(); to the image to link the image to the single post. Then add this CSS rules to your themes Custom CSS area or to the style.css file.

[css]
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
[/css]

Step #4. Lets create the single post template. Go to templates and add a new one called “single book“. Use the below code for the single post. We are changing few things here. On a single column layout and using full content instead excerpt. Below is the template.

[html]

<img src="{@cover_image}"/>

<h4>Author : {@the_author}</h4>

<h4>Price : {@book_price}</h4>

<a href="{@buy_now}" target="_blank">Buy Now</a>

{@post_content}

[/html]

Step #5. Now we have to to tell Pods to use our template. To do that go to Pods Admin > Edit pods > Books. You can see that there is a new tab added “Auto Template Option“. Do below changes there. Select the templates we did for archive and for single items. Set location to replace and “Save Pod“.

assign template

Now visit to Archive page and see how it looks like. www.yourdomain.com/book

archive page

YES ! We successfully added a custom post type to our WordPress site. you can make this looks better by adding some custom CSS. Also have a look at the single post view. Its simple but doing a nice job.

Phase Three : Showing books on the home page

Its pretty simple. Just go to the page you want to show books. Add click on the “Pods Shortcode” button just above the editor window. On the presented screen do the following. Select “List multiple Pod Items” and select the books archive template we created. and “Insert“.  Update the page.

Thats It. Now you have your books showing on your home page too.

Please ask any questions you got while adding your own custom posts to WordPress.