Create a list of Pods items using Pods Templates

How to make a Pods List Page using Pods Pages and Pods Templates:

For this example - BUNNIES!

We have already created the Bunnies Pod as seen in Part 1. (link). If you have not done this step, please make sure to have all of your pods data set up and ready.

This pod “Bunnies” contains one of every field type for example purposes.

For the list page, we first need to go to the “pages” tab and click “add new page”. This page will be called “bunnies” because it will be a list of all of the bunnies in our pod.

Inside of that page we will enter the page title and leave the page template at default. If you would like to learn how to use Wordpress Page Templates with your pods, click here (link).

Here we have the code that will go in our page.

<h1>Bunnies</h1>
<?php
$pods = new Pod('bunnies');
$pods->findRecords('t.name' , -1);
echo $pods->showTemplate('bunnies_list');
?>

Breaking down the code we have the heading of the page first. This is optional, and any other HTML tags and content can be added here as well. We then register the pod that we want to call using new Pod (‘bunnies’); The next line of code is to get all records inside of the bunnies pod using findRecords() and sorting by the name field. Descriptions of why we use t.name over name is found in the findRecords page. Finally, we are going to display the pods, but instead of adding in all of the layout information here, we will use a pods template called ‘bunnies_list’.

Now we will go over to the “templates” tab and click “Add new template” and name it exactly the same thing you referenced in the previous pods page, in this case it is ‘bunnies_list’.
Inside of our template we will build the structure to display out pod items on the front end of the website. In our bunny list, we want a grid with the photo and name of the bunny and a link to the bunny’s detail page.

<div>
<img src="{@photo.guid}" width="200"/>
<a href="{@detail_url}">{@name}</a>
</div>

Breaking down the code, we see a very basic, easy to understand HTML structure - nothing new there. The new stuff is in the magictags! Pods Framework comes with a number of built in magic tags such as the detail_url and creates magictags for each of your fields such as the name and photo field. There is an added bonus to file upload fields where you can use yourfieldname.guid to just get the file’s location url.

Save this template, and view your page, and bask in it’s glory... Until you click the name and see that you have one more step if you want a detail page for each pod item.