Search

Pods UI: The Latest and Greatest Addition to Pods

Posted: January 04, 2010 Comments(50)

NOTE: This tutorial series is extremely out of date, please see http://pods.io/tutorials/

Pods makes it super easy to give your clients the upmost control when managing their content. You can custom tailor WordPress not only to power their blog and standard content-heavy Pages, you can give them a Pods installation that helps to manage that one-off group of data that will really help their website completely reflect their business or organization.

If you haven’t followed the first three articles in the Pods CMS Series, I would recommend starting at the beginning with An Overview of and Introduction to Pods CMS for WordPress so you’re familiar with the setup we’re working with up to this point.

Incorporating Pods UI

Pods UI is the latest feature to become available for Pods. It’s the first add-on, and I’m already in love. If you’ve been keeping up with the Pods CMS Series, we discussed the ability to mark a certain Pod as a Top Level Menu in Pods Basics: Installation and Setup. It was a great way to give a particular Pod a bit more attention by including it as its own entry in the WordPress admin navigation.

If you really take Pods under your wing and end up creating numerous Pods to power various sections of a website, and they all carry a certain bit of importance, the main WordPress admin navigation can get quite busy really quick. Pods UI helps tackle that issue directly.

Before adding Pods UI, we can go ahead and remove Team as a Top Level Menu. Just uncheck the box and click Save settings:

Remove Team as a Top Level Menu

Now we’ll go ahead and install the Pods UI plugin, and create our own plugin file that will interact with Pods UI:

<?php
/*
Plugin Name: Team Pods UI
Plugin URI: http://example.com/
Description: Customized Pods UI
Version: 0.1
Author: Jonathan Christopher
Author URI: http://jchristopher.me/
*/

function pods_ui_team()
{
  $icon = '';
  add_object_page('Team', 'Team', 'read', 'team', '', $icon);
  add_submenu_page('team', 'Team', 'Team', 'read', 'team', 'team_page');
}

function team_page()
{
  $object = new Pod('team');
  $add_fields = $edit_fields = array(
                    'name',
                    'position',
                    'photo',
                    'bio',
                    'permalink',
                    'eom');
  $object->ui = array(
                    'title'   => 'Team Member',
                    'columns' => array(
                              'name'      => 'Name',
                              'position'  => 'Job Title',
                              'created'   => 'Date Created',
                              'modified'  => 'Last Modified'
                              ),
                    'add_fields'  => $add_fields,
                    'edit_fields' => $edit_fields
					);
  pods_ui_manage($object);
}

add_action('admin_menu','pods_ui_team');

?>

Note: I’d suggest creating an additional plugin file outside the pods-ui folder you just uploaded when installing Pods UI, else WordPress will think your plugin file is out of date based on the version number.

There is a lot of custom setup going on, all of which is covered in extreme detail in the Pods UI download, but I’ll cover the basics explaining what we’ve set up.

At first glance, this is just a simple WordPress plugin, and it is, we’re simply interacting with the Pods UI plugin as well. The first function that fires here is:

add_action('admin_menu','pods_ui_team');

We’re hooking admin_menu and firing pods_ui_team as a callback. pods_ui_team is defined as follows:

function pods_ui_team()
{
  $icon = '';
  add_object_page('Team', 'Team', 'read', 'team', '', $icon);
  add_submenu_page('team', 'Team', 'Team', 'read', 'team', 'team_page');
}

Pods UI allows you to define an icon file to use in the sidebar, a nice bit of customization available! From there, we fire add_object_page, a Pods UI function that sets up the menu structure and includes the icon we just defined. This creates a ‘section’ in the WordPress admin navigation sidebar. add_submenu_page then adds a submenu entry to the sidebar section we just created. The last parameter we pass when firing add_submenu_page defines the callback we’d like to fire when that menu is clicked. That’s the other function we need to define in our plugin file:

function team_page()
{
  $object = new Pod('team');
  $add_fields = $edit_fields = array(
                    'name',
                    'position',
                    'photo',
                    'bio',
                    'permalink',
                    'eom');
  $object->ui = array(
                    'title'   => 'Team Member',
                    'columns' => array(
                              'name'      => 'Name',
                              'position'  => 'Job Title',
                              'created'   => 'Date Created',
                              'modified'  => 'Last Modified'
                              ),
                    'add_fields'  => $add_fields,
                    'edit_fields' => $edit_fields
					);
  pods_ui_manage($object);
}

In this function, we define a series of variables. We first define our $object as the Pod with which we’d like to link this UI element. We then define $add_fields as an array of columns we’d like to include on the ‘add’ screen. We can include or omit any existing columns we’d like. In this case, we’ve added all available columns. Next, we define object->ui which actually builds the ‘browse’ table view listing out any existing Pods data. We can define which columns are visible (and therefore sortable) which is very useful! Finally, we fire pods_ui_manage($object); which makes all the magic happen, and we have even more useful sidebar entries for our Pods.

Pods UI in action with our Team Pod

While not completely obvious with just a Team Pod, the real beauty of Pods UI comes when you group a selection of Pods under a generic heading. These cases are usually very client-specific, but can really make the usability of Pods that much better.

This article is meant to be the most basic introduction to Pods UI, I would absolutely suggest checking out the User Guide for further information.

The Pods CMS Series on MBN

This article is the fourth in a series for Monday By Noon dedicated to Pods CMS.

  1. An Overview of and Introduction to Pods CMS for WordPress
  2. Pods Basics: Installation and Setup
  3. Pods Basics: Pulling Pods Data to your Theme
  4. Pods UI: The Latest and Greatest Addition to Pods
  5. How to use Pick Columns (Relationships) in Pods
  6. The Last of the Pods Basics: Pagination and Sorting

Related Content

  1. Pods Basics: Installation and Setup
  2. An Overview of and Introduction to Pods CMS for WordPress
  3. The Last of the Pods Basics: Pagination and Sorting

Categories

Categories Development, WordPress

Tags

Tags , , , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  2. Johnathan, your intro to Pods UI couldn’t have come at a better time. I was looking to create a way for a client to access and update records in a database via WordPress and Pods looked like a good way to make that happen.

    Your Pods UI walkthrough was an invaluable way to get up to speed quickly and whip this out.

    Thanks!

  3. This is fantastic!!! PODS is a great tool. I’ve used it in several of our installations but, ended up straying away from it because of the lack of UI options. This seems to bridge the gap between developer and client!!

  10. Can you explain a bit further how to set up a pods ui plugin, or point me to a documentation resource? I can’t seem to understand how pods would pick up a plugin file in the wp-content/plugins folder.

  11. No problem! You simply create a new plugin file entirely in the plugins folder, just a plain text document and name it something unique. I usually choose something like client-ui.php or something similar. You can even paste the code from above in the file, save it, and WordPress will see it as a plugin inthe admin. Does that help a bit? I can elaborate further if you’d like.

  12. Jonathan,
    In your example the *manage team* page has a button labled “Add New Team”, I don’t suppose you know how you could change this to read something more meaningful like “Add New Team Member”?

  13. Ignore my previous comment,
    If I had only spent 5 minutes to RTFM I would have discovered that the pods_ui_manage() takes a whole host of options including one to change the name of an individuam pod item.

    In case anyone else is looking to do the same thing you can pass a value to the ‘item’ parameter like so:

    pods_ui_manage('pod=team&item=Team Member');

  15. Great tutorial! Quick question, I have a file column in my POD that contains the URL of an image. How would I display that image in the list of results on the admin page? Currently it just displays the URL path, but I can’t figure out how to wrap it in an IMG tag.

  16. Thanks for these tutorials, since especially Pods UI supports very little information about how to use their plug-in.

    I have a problem though – maybe you can help me!

    I have a pod which makes contact persons… when you add a new contact person you need to define a group … I have made this field a wp page sellection when post_parent id is equal to the contact page.. that means if they want more groups they simply add a new child page to contact and it will pop up in the group sellection when adding – very smart!

    Now the thing is Pod UI… I would like to make it possible to do the drag and drop reorder feature but for each group.. Can you find a way to tackle more tables under same Edit page? or at least a sub page for each group…?

    I hope it is possible to understand my English..

    Once again thanks for the tutorials/guides!

  20. Fairly good article on a technical level but it misses on one important thing. I had to read it a few times before I could figure out on a practical level what Pods UI is and does. When looking for content, most readers are trying to solve a specific issue. When they find something that seems to solve the issue, they read further. So it is helpful to preface the technical stuff with a description of what all the hard work will produce.

  22. Thanks for the tutorial. I am not well versed in WP by any means, however I did want to clarify that these functions:

    add_object_page();
    add_submenu_page();

    are not Pods UI functions, they are WordPress functions. So for newbies like myself looking all over the Pods UI site for some documentation on those functions and not finding anything, you’ll find out about them in the WordPress Documentation.

    http://wpseek.com/add_submenu_page/
    http://wpseek.com/add_object_page/

    Thanks!

  23. Wow, great information. I have not any clue about wordpress future like that. Make me , think about wordpress more.

    I will try to expand my wordpress blog as soon as possible.

    Thank , Jonathon

  25. Does Pods UI have any way to FILTER the displayed results based on a certain field (or fields), maybe with dropdowns the way wp-core has for Categories?

  27. Sorry not sure I understand yet. Is findRecords() for displaying pods content on the front-end of the site to the public? I’m looking at the screenshot above, of the Admin > Manage Team page. If that page listed dozens of results (team members), I’d want a dropdown above the list to filter by Job Title (for example), so I could find just the team members who have Job Title = Web Developer. But I don’t see a UI for that. Are you saying that findRecords() must be called before this page is displayed? If so, how/where is that done? I hope I’m being clear enough. Thanks!

  28. can this line:

    $object = new Pod(‘team’);

    be altered to call more than one pod?

  30. OK, I’m really sorry to ask such a basic question, but I honestly couldn’t get the custom icon feature to work.

    Could you please explain where should I place the icon file? and also how should I reference it ?

    This is how I referenced it in the plug-in:

    function pods_ui_team()
    {
    $icon = ‘customicon.png’;
    add_object_page(‘Team’, ‘Team’, ‘read’, ‘team’, ”, $icon);
    add_submenu_page(‘team’, ‘Team’, ‘Team’, ‘read’, ‘team’, ‘team_page’);
    }

    I placed the file in:

    \wp-admin\images
    \wp-content\plugins\pods\images
    \wp-content\plugins\pods-ui
    \wp-content\plugins\pods-customized

    but nothing seems to work
    I’d really appreciate your help, Thanks!

  31. Armando:

    I get the icon work when I type in an absolue URL, might that be the prob. in your case? Then it really wouldnt matter where you place the file.

  32. Jonathan,

    refining my UI-plugins (began based on this tutorial !), I wanted to know if you know how to hide the button “Add New Item”.

    I’m checking who has logged in (clients), and then give them access to edit (a portion of) their pod-data with the $edit_fields-array, I figured by leaving the $add_fields-array empty that the Add-button also would disappear..
    ($add_fields is only used when admin logs in)

    Have you already come across this ?

    greetz,
    ToM.

  34. David,
    I have a question about this and the end result in the WP admin. I have added this to my pods (ex: pods_ui_manage(‘pod=team&item=Team Member’);, but in the WP admin I loose the ability to reorder and it displays all the columns associated with the pod, columns which I do not show via the pods UI, have you experienced this?

  35. I’ve been reading this excellent series and following along. All is good but I don’t see the purpose of adding the “Team Pods UI” plugin. I seem to get all functionality with the default install of Pods CMS and Pods UI. What am I missing?

  36. I finally figured out why the plugin-per-pod pattern would be useful so I’ve created a plugin for my pod. What I’m trying to do is have an “add” form that only contains some of the fields in my pod and the remaining fields will be populated in a before save helper. I’m adding location information where I have the user enter name, address, city and state. In the before save helper I’m geocoding the address and populating the remaining fields, i.e. county, formatted address, lat, lng, etc. Everything works as expected if I have all fields in the add form even if there are no values in them, but if I omit the fields that the helper populates the values don’t get saved to the DB. If I click save in the edit form without editing any form fields, the values get populated. I understood that I could omit any fields in the add form and the empty values would get passed to the before save helper. Am I misunderstanding?

  37. The biggest purpose behind Pods UI for me is to customize the menu structure by grouping Pods under a single umbrella (instead of having separate Top Level Pods) as well as customize the columns displayed when browsing Pods entries. That’s just scratching the surface of what Pods UI can do compared to a Top Level Pod. More info soon!

  38. I’m doing a very similar geocoding thing to Stuart above. I have my geocoding script in a post-save helper. works fine. However, I have several hundred locations that I am importing directly to a pods table in the database, and the problem is that after I get all the info into the db, the pods admin page does not show any of this info. it’s only if I add the info through the pods admin page that it displays. in case I’m not being clear, what I want is for my client to be able to manage info through a pods admin interface, but, the initial info does not need to be populated through pods, rather, it will be imported directly to the pods table in the database. this lets them start w/ all their existing info, but be able to manage it as time goes on. any help?

  39. Hi,

    Do you know if is possible to customise the layout of the add/edit form? E.g., add an horizontal line between each fields.

    Your article is great. Look forward to see more.

  40. my comment above has been waiting moderation for days. I’ve resolved the issue via the pods api import methods – next issue… I did this tutorial and got a warning upon activating the plugin that sending new headers might break things, and it certainly has. i had to delete the plugin in order to login to WP admin this morning. Has anyone else gotten these errors?

  41. here’s the actual warning I get after activating the plugin:

    The plugin generated 3 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.

  45. $object->ui = array(
    ‘title’=>’your title’,
    ‘item’=>’your item’,
    ‘where’=>’t.test=”adam”‘,
    ‘add_fields’=>$add_fields,’edit_fields’=>$edit_fields);
    pods_ui_manage($object);

    This will create a filter, so only results that have a value of “adam” in a column named “test” will be displayed.

  47. Cool tutorial –

    Having a small issue tho – none of my results are coming back with a link to the ‘edit’ screen

    I am getting a list of all my content, but none of the fields are clickable –

    In the example above, the ‘Name’ column has selectable entries, but I cannot seem to get this effect using the code as it is here –

    Is there something missing?

    I do not see any options to declare which of the columns you want to have clickable links to the ‘Edit’ screen –

    Any help would be appreciated –

    Thanks!

    Mark

  48. lol figured it out –

    seems to be a requisite that you use the ‘Name’ field (which kind of makes sense)

    Thanks again –

    Peace!

  49. I am just learning wordpress I have never set up a website before but had to because our ministry didn’t have the money to pay someone to do it. Well I just wanted to tell you your information was a God send. Between the helps that I found on WordPress.org and your site I really feel we will be able to have a wonderful site to reflect our ministry. Thank you so much for taking the time to add this information. I am so not a webmaster but thanks to you and wordpress I’m starting to feel like one.

Leave a Reply

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