Custom Fields with Pods

This post assumes you know what post-types, custom fields, and taxonomies are. Google them for more knowledge, and read the first article in this series.

I tried to make this post as friendly as possible with front end developers in mind. So forgive the fact that I explain a bit too much and perhaps a bit too slowly.

Custom Fields

Custom fields can be fun. As mentioned in the first article, we use these for arbitrary data that we would like to attach to our post. Thus we can grab this data either in our editor or more usefully for me,  in our php templates. So without Pods, we would be left having to manually add custom fields to each post under the post editor. We would have to add them each time we make a new post. And the only type of input it takes is a basic text field. 🙁

What if I wanted a checkbox? A date? A currency field that only accepts numbers! Pods Custom Fields is here to save us!

Custom fields using pods

You can edit a Pod at any time by going to ‘Pods Admin’>Edit Pods’. In the new Pod we created, under “manage fields” we can add custom fields to show up on every new post we create under portfolio! We can choose what kind of input it takes and we can even give it a default value, should we need to. Let’s Do it! I’ll start with basic fields and work our way up. You can change the field type in the dropdown you see after pressing “add Field”.

I will be changing this field over and over to show you how it works. You will also have to go the post you created and update it after changing the field type to see it change properly.

Text Fields

In the ‘Field Type’ dropdown, ‘Text’ is the more basic type of field. The first one being the most simple, ‘Plain Text’ is literally the same as if you used WordPress without Pods. Except the field name would always show up nicely when creating the new post, and you can give it a default value among other things, like forcing it to be required before the post can be published. Let’s create one called “my awesome field“. Press tab, and the ‘Name’ field will be filled with ‘my_awesome_field’. That is the handle for us to use in our theme files. Again I would prefix this. So mine would be ‘snp_my_awesome_field’, snp standing for saltnpixels.

Now if we save the pod and go back out and make a new post under portfolio, here is what we would see!

Pay no attention to the fact that when I took the screenshot, the highlight seems to be ‘Horizontal Line’. I guess no one gives it enough attention so it tried stealing the show. The real highlight is the custom fields on ‘More Fields’ at the bottom. Notice the field under the editor already there and ready for us to fill out. Awesome!

Now the other fields under ‘Text’ are the same except they will force the value to conform on save. For instance ‘Website’ will force ‘example.com’  into ‘https://example.com’. Email will force an email…. You get the picture right?

Outputting  Fields

Now that we have made a custom field, how can we show this data in our theme? Assuming you are in the WP loop, you can easily use:

<?php
//inside loop
the_content(); 

//and we add this:
echo get_post_meta(get_the_ID(), 'snp_my_awesome_field', true);

//actually if using the website field you would write
echo esc_url( get_post_meta(get_the_ID(), 'snp_my_awesome_field', true) );

//always escape your outputs. Learn more here:
//httpss://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data

Lets go through some other fields.

Paragraph Fields

Very similar to text fields. Here I would choose ‘additional options’ and make some choices on some stuff. It is quite self-explanatory, and the question marks can help.

Date/ Time Fields

These are quite simple and straight forward. They also work the same way as the ones above. On your edit-post page, they will have a dropdown using jQuery ui for a datepicker or time, and on output it will show the format you chose under ‘additional fields’.

The Other Fields

Ok, I’m jumping down to the last set of fields called ‘Other’.
Because these are the next easiest. They work the same way.
Color Picker seems to only allow Hex values and no transparency. Don’t know why… And the ‘Yes/No’ field creates a checkbox option. Here is how you can output these:

//Color Picker use:
//returns a hex value
echo get_post_meta(get_the_ID(), 'snp_my_awesome_field', true); 
	
//typical use
<a style="color: <?php echo get_post_meta(get_the_ID(), 'snp_my_awesome_field', true); ?>
">Link

//Checkbox use:
//checkbox is usually used in a conditional
if(get_post_meta(get_the_ID(), 'snp_my_awesome_field', true)
{
  //its been checked
}
else
{
//its not checked
}

Numbers / Relationships / Media

Now things are gonna change a bit.
It’s quite easy to see what number, currency and media do. And you can output a number or currency using get_post_meta() and it will show you the number you put in it. But it wont be formatted in any way. It will just be a text of numbers. If you chose number and want a comma to show up on the front end like ‘1,234’ you won’t get that automatically. And if you chose currency and are wondering where the dollar sign is, or where some decimal points are, it ain’t happening.

With Media it will output ‘Array’, and Relationship will do that too.
We will get to relationships soon… Hopefully.

But all this brings us deeper into using more of Pods. To get these fields showing properly we will need to learn about display() and field().
While the other fields can use display() or field(), I am so used to using get_post_meta(). However for Numbers/ Relationships/ Media it is easier to use some of pods methods.

Getting A Pod and its methods

display() and field() are not functions. They are methods and, as such, they must be attached to an object. We must create a Pod object that points to our post and then pull out the custom fields for that post. It’s easy, don’t worry. To do that we use pods() which needs a post type and an id.

Pods():

This gets a pod object. It can get a whole pod, which means all the posts in a post type. Or it can get just one. It depends on what you give it. Once you get it, you can go through all the pod items (posts), or if you only get one you can work on that one post.

Display():

Once you have the pod item saved in a variable we can use display() on it and get some custom fields to show. This shows the field as you would usually want the user to see it. All nice and formatted.

//get our post pods object in the loop, store it in $portfolio_item 
$portfolio_item = pods('name_of_pod', 'get_the_ID() );  
echo $portfolio_item->display('snp_my_awesome_field');

This will get your custom field properly.
If it’s a number, it will output with a comma or any formatting you chose in pods admin. Currency will show up properly, and Media will output the url to the file. You can use that inside an img tag and it will show up. display() is usually found with some echo.

Field():

field(), I find, is more for getting raw information to manipulate before echoing it. It is, in a way very similar to get_post_meta() and in a way not. For instance,  its not similar when using a date/time field, which will show up the same using display() and get_post_meta(), but not field().

On the other hand, like get_post_meta(), field() will also echo an array if you try it on media or relationship fields, and on numbers it would also be unformatted. Here is the same scenario as above with display(), except this time we will try to use field(). Assuming our field is now a media field.

//get our post pods object in the loop, store it in $portfolio_item 
$portfolio_item = pods('name_of_pod', 'get_the_ID() );  
echo $portfolio_item->field('snp_my_awesome_field');

//if snp_my_awesome_field was a media file or a relationship it would
//return an Array. And as for numbers there would be no decimals.

Troubleshooting that Array

Now it would seem field() is not useful here, but if you would var_dump() the custom field you would see what it was made of, which can help us understand how it works. (consequently you can do the same with get_post_meta() )

var_dump( $portfolio_item->field('snp_my_awesome_field') );

//the same would be output on
var_dump( get_post_meta(get_the_ID, 'snp_my_awesome_field', true) ); 

Echoing A Piece Of The Array

You will notice a long array, but towards the bottom you will see it has the actual file path, which is what we want and it’s inside the key called [‘guid’].
We can grab this and output it easily in a few interesting ways.

//my favorite
echo $portfolio_item->field('snp_my_awesome_field.guid');

//interesting… didn't know this worked until just now!
echo get_post_meta(get_the_ID(), 'snp_my_awesome_field.guid', true);

//and of course, I figured
echo get_post_meta(get_the_ID(), 'snp_my_awesome_field', true)['guid'];

so that is how display(), field() and, get_post_meta() interact with custom fields of pods. If one doesn’t work, try the other! Remember display() and field() need you to get the pod item first using pods().

field() really comes in handy when dealing with relationship fields. I have not really discussed relationship fields and I will have to make a separate post for that because, well, it’s a subject on its own really. Hopefully that will be next.

You Can Learn More About Pods At Their Website Here

You Can Download The Plugin Here