Pods UI: The Latest and Greatest Addition to Pods

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:

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.

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