Pods – Pages and Templates and more Pages OH MY!

If you haven’t noticed, the Pods Framework is one of my favorite WordPress plugins of all time. I love it because, as a developer, I am able to really manipulate and store data any way I see fit. As a designer, I can easily pull data in to my theme and get to work designing it instead of focusing on how to pull it in.

The Pods Framework gives us a number of ways to pull in and display data on you’re site so you can get down to the themeing (fun) part of WordPress dev.

What’s the difference between all of these?

Pods Page – This is a page that is created in the pods settings area. These are separate from WordPress pages and gives you fields far beyond what WordPress pages give you. For a full list of these, check out this page here.

WordPress Page – These are your typical, run of the mill pages that you have been creating within WordPress for years. You have the basic UI for adding in data and the ability to select a page template.

Pods Templates – This is one place where you would start to add in the HTML structure for the stuff you want to display on your site. Pods Templates uses “magic tags” instead of traditional php. So for instance, if you wanted to display the contents of the field called “name” you would simply type {@name}. This is the super fast, super easy way to get pods data up and running. Here is a great tutorial for making pods templates and displaying them.

There are a few other ways that you can display the contents of a pod as well. You could use the pods shortcode which is added using a handy dandy button on the posts/pages write panel. You still need to build a template with the actual content structure, however.

Using Pods Pages with WordPress Page Templates

If you are comfortable using page templates, then you will be comfortable with this method of displaying pods content within a page template.

  1. Create your pods page
  2. Title it whatever you would like
  3. Click Save (we will come back to this in a minute)

Build your WordPress page template as you would any WordPress page template. Below is some demo code for you to take a look at.

A quick explanation of the above code:
We are first setting the global $pods by telling it which pod to query and then sorting it in alphabetical order based on the name field. After that we loop through each pod item in our ‘mypods’ pod and define a variable for each field. Finally we simply echo the contents of those variables in to our HTML structure inside of our loop.

Hooking it all together now
Now you are going to go back to your pods page that you created previously and you will now see “Pod Page Template” in the drop down list. Choose that and save your pods page again.

Now you should be able to go to yourdomain.com/your-pod-page and see a listing of all of the items you added in to that pod!

What about ‘single’ pages for each pod item?

Pods has you covered there as well. For this we will be making a second pods page and a second page template.

  1. Create a new pods page and name it your-pod-page/* (replace ‘your-pod-page’ with the name of the page you created previously. The * is a wildcard and tells it to use this page for any page that is a child of ‘your-pod-page’. Save it (we will come back in a moment)
  2. Add {@url.2} in the ‘wildcard slug’ domain
  3. Create another new page template with code like this

A quick explanation of the above code:
This code is almost exactly the same as the code in the first page template that we created except that we are starting out with the magical little pods_v() function. This function is a great utility that you can learn all about here. For our purposes, it is getting the last item in our url/path which (because of our previous settings) is going to be the permalink name of our pod item.  Once it has got that, it will query our pod for records with that specific name.

Hooking it all together again
Now you are going to go back to your pods page that you created previously and you will now see your new page template. Choose that page template and save your pod.

You should now be able to go to domain.com/your-pod-page/name-of-a-pod-item

If you get a 404 not found:

Make sure to go to your wordpress permalinks setting and that it is set to anything other than ‘default’. The pods permalinks will not work without a permalink setting set.

Also make sure that you have a detail page set in your pods setting to /{@permalink}

 

The_Idiot

About Lindsay

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.

31 thoughts on “Pods – Pages and Templates and more Pages OH MY!

  1. Hi

    Thanks for perfect tutorial, but i thing there is an error.

    In the “single” template you have

    $mypod = array(

    witch rewrite the object created by $mypod = pods(‘mypods’); so the  $mypod->find(‘name ASC’);  fail.

    At least in my case it happened. Am I wrong?

    However thanks

    Martin

  2. igloobob

    Hi,

     

    thanks for this it’s really useful. The top level page works great, the detail page though I just keep getting a fatal error on this line:

    $mypod->find(‘name ASC’);

    I just can’t get it to work?

  3. Lindsay

    Do you have a field called “name”? If not, you just need to replace “name” with whichever field you want to sort by. Or you can leave that short out entirely since it’s a single page result, simply do $mypod->find(); and you should be ok.

  4. igloobob

    Hi LIndsay,

     

    yes I do have a filed called name but still gives the error. I will try again with just $mypod->find(); when I get back in work tomorrow.

     

    Thanks!

  5. igloobob

    Hi Lindsay,

    just quickly tried that before signing off for the night and I still get the fatal error.

    Fatal error: Call to a member function find() on a non-object in /data02/c2626348/public_html/dev/wp-content/themes/themename/pods_single_template.php on line 42

    I know it must be something simple I’ve done wrong but just can’t see it, maybe it’s just too late! I’m off to bed, will pick this up tomorrow and hopefully my fresh eyes tomorrow will help.

     

  6. igloobob

    Hi Lindsay,

    I have just had another crack at this and just to make sure I hadn’t messed anything up by editing the code to show my specific pods data, I just copied and pasted your entire code (changing only the name of my pod) and I still get that fatal error on the single page.

    Fatal error: Call to a member function find() on a non-object in /data02/c2626348/public_html/dev/wp-content/themes/themename/pods_single_template.php on line 18

    which is this line:

    $mypod->find(‘name ASC’);

    My pod does have name field, otherwise the main pods list page would also show an error I think right? But that page works fine.

    Any ideas?

    Thanks!

     

    (I shall be making a donation to thank you for your advice)

     

  7. Lindsay

    Can you paste your entire code into a paste bin. (http://pastebin.com) While you do that I will set up a test scenario to make sure there is nothing wrong with my code.

  8. igloobob

    Here’s the link to the single page that I’m having the trouble with:

    http://pastebin.com/eB8Awsxe

    And here’s the main list page that is working fine:

    http://pastebin.com/6tWL60re

    Thanks very much  for taking a look 🙂

    • Lindsay

      Just to be clear – you are working with an Advanced Content Type and “Pods Pages” components, correct?

    • Lindsay

      OK I GOT IT!!!!  Pods has changed a bit since I have written this tutorial. I am going to update it right now, but the basis of the issue is the “where” clause which is no longer needed (it was more of a hardcoded way of getting the value of the permalink to get the proper record). Pods now has this amazing little miracle called pods_v() so we can now use that to collect the proper data from the url/path.

      To make it work, you will take out this chunk of code:

       

      And replace it with this:

      If you have your paths/ pods pages set up properly, it will work – I have it working on my test install.

  9. igloobob

    Yes, well as far as I’m aware anyway. I’ve set up the pods pages as per your instructions in the tutorial. I have ACT enabled but haven’t done anything else with that..?

  10. igloobob

    It works thank you!!

    Beer money coming your way 🙂

  11. Lindsay

    Hahah well I am happy to help! And comments like these help me keep these tutorials up to date!

  12. igloobob

    Well yours have definitely been the easiest to follow as I try and get going with pods!

    Now I just need you to do a tutorial on how to specify a specific image size from the uploaded resized images because I just can’t get that to work from the various pages I’ve found on the subject

    😉

     

    • Lindsay

      Ok wow. I have exactly that tutorial sitting in the drafts. Let me fix it up and I will post it for you. Are you subscribed to the blog so you get updates of new posts?

  13. igloobob

    Lindsay you rock. I am not subscribed but I shall do so right now 🙂

  14. igloobob

    I think there’s an issue with the subscribe section it just shows this:

    [navayan_subscribe_optin]

  15. Lindsay

    Aw poop that’s right. I started reformatting how I wanted to manage email subscriptions. At the top on the sidebar there is an RSS feed icon. When you click that it will bring you to the RSS feed. Copy the link and paste it into any RSS feed reader. I will get on the email subscriptions tomorrow.

  16. Alex

    Hi Lyndsay

    Came across this tutorial when searching for the solution to another problem. Tried it and it works great except for images.

    When I use $avatar= $mypod->field('avatar');  it returns the word “Array” when I echo to the page rather than the image.

    Do you have a to get the image on the page using your method?

    Thanks

    Alex

    • Lindsay

      This post is a smidge older than the current Pods codebase. Pods now has a bunch of super nifty functions to let you get an image field.

      function pods_image ( $image, $size = 'thumbnail', $default = 0, $attributes = '', $force = false )
      source

      So instead of using the field() function you want to use pods_image() and it will output all of the HTML code for your image. SUPER useful.

      Another good tip. If you ever get “array” as a result of a field, if you do something like
      var_dump($myvar)
      It will show you all of the stuff that the array contains. There’s a longer way to get the pods image if you look inside the array, but the pods_image() function is way easier. ($myvar) would be the variable you assigned to your image field.

  17. Alex

    Hey Lyndsay

    Thanks, just needed a nudge in that right direction. I tried pods_image() from another example but my syntax was wonky (also a technical term) so this helped a lot.

    Also, the var_dump($myvar) is a very helpful tip.

    Thanks again

    Alex

  18. Matt

    I would love if someone would simplify these tutorials even further and start with the basics… for example – a tutorial on displaying the content of field added to Page.

    For example the Pod is Page… custom field is content_b

    I have my existing MOBILE template created and want to insert all content within the content_b field onto that mobile template.  I have tried dozens of different tutorials and none seem to work.

    I am going grey and frustrated 🙂

    • Lindsay

      So you want to know basically how to display the content you get from Pods? We have that covered here. The problem is that it depends on the content type. Is it a Custom Post Type or an Advanced Content Type?

  19. Max

    Hello and thank your for this really good tutorial.

    I already made a custom taxonomy and displayed fields of it in some pages. Now I need to create something like an archive page for my taxonomy and a page for every single child. I tried to do this with your code, but there is no content displayed in my pages.

    Could you tell how i need to do this or give me some tips?

    Thanks for your help!

    • Lindsay

      When you say an “archive” Page do you mean a page that lists all of the terms in your taxonomy? If so you need to make a Pods Page (to keep your WP Pages clean) and put code to pull all of the terms from a taxonomy in. This is normal WP code that you can good. (http://codex.wordpress.org/Template_Tags/wp_list_categories). For the pages for each term that list all posts in that term, wordpress does that for you! Depending on your settings you created when you set up the taxonomy, of course. You want to make sure “has archive” is set to true under the advanced settings in pods. Then check to see if you have any custom settings for the url path. If you do not, then you can just go to yourdomain.com/tax_name/term_name

  20. Hi!

    I am so grateful for people like yourself who make tutorials for people like me who want to learn!

    I don’t quite understand something in order to get started with testing it:

    how do you view the pods page you have made? I don’t see a View page button or link anywhere…

    You said: “Now you should be able to go to yourdomain.com/your-pod-page and see a listing of all of the items you added in to that pod!”

    But where does the “your-pod-page” come from?  I tried using the name of my pod page with dashes instead of the spaces, but no good.

    Also, I think it would be a great idea, instead of putting bits and pieces of changes to code for the newer version of pods in the comments, to just update the code in the tutorial, or make a new post with the current code and link to it in this post. I don’t know about others, but with my ADD I find it difficult enough to follow a tutorial without making mistakes, but then to have to find the comments with changes, find where the changes go and update them correctly is gasoline on the fire… and after all, this is the post that comes from the link from the documentation page on the Pods website, so it really should be updated to the latest version IMHO.

    I greatly appreciate all the help!!!!

     

     

     

     

    • Lindsay

      Oh wow. I am so sorry I just noticed this. Somehow my comment notifications aren’t making it into my email.

      When you create a new PODS PAGE at the very top there is a field called URL. This is actually meant to the ‘slug’ field which is similar to the slug you see on the post edit screen or the page edit screen in default WP. So in that field you would put something like ‘about-us’. When you save it, you will be able to go to ‘mydomain.com/about-us’ and see your new Pods Page.

      You will also notice if you scroll down it has a ‘wildcard slug’ field. This is where you tell it how to deal with ‘single’ pages. The use case for this would be if your PODS PAGE is meant to be something like an archive page which is a list of all items in your pod. This means you have to setup an individual url structure for each item in that pod for their single pages (similar to the post’s permalinks). So in the ‘About Us’ scenario, we would create the ‘About Us’ PODS PAGE that lists all the people on the team. Then we want each person on the team to have their own page. We want the path to look like this: mydomain.com/about-us/doris . Since we want ‘about-us’ to prepend the actual pod’s slug, we need to put that in the wildcard field. So in your wildcard field you would put about-us/* (if i remember correctly)

      And yes, you are right. I need to update this article. I’ve been very busy and have let this lapse a little. I am going to get my stuff together and fix up these tutorials, starting with this one.

      Let me know if there are any additional ways I can help make this tutorial better for beginners. Thanks!

    • Lindsay

      Ok I just looked and all of the code updates that were in the comments HAVE been updated in the post itself. The code is all current code as far as I know.

  21. Ellen

    This tutorial is a life saver! I’m fairly conversant in php and wordpress but brand new to custom post types and/or Pods — this brings them together for me enough to really get rolling 🙂 Thanks so much!

  22. Hello,

    I tried to run your script, but I want to target one particular post.

    I tried this script, Example 2, but still nothing to do. Here is the test page.
    Could you tell me what’s wrong, please:

    Thanx for your return.

    • Lindsay

      is this particular post you are trying to target a custom post type or advanced content type?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">