Creating Custom Fields
Custom fields and add extra information to WordPress posts, pages and custom post types. This information can not only enhance the post but make it more sortable and searchable. This video will show you how to add fields in just a few minutes without using any code. For full context check out the Creating Custom Post Types tutorial first.
This Tutorial will show you how to do this using a plugin called Advanced Custom Fields – other options are also mentioned in the video.
Learning outcomes
- Understanding what custom fields are.
- Knowing how to create new custom fields.
Comprehension questions
- What are custom fields?
- How can I crate my own custom fields?
Transcript
0:00
Hey folks, welcome to another HeroPress Tip of the Week.
0:03
This week, we’re going to talk about adding custom fields to our custom post types.
0:07
Last week, we talked about custom post types. And you can see what we made then – this is a staff post type. And I’ve entered Steve here. And there’s almost no difference between a custom post type and regular posts unless you make them different.
0:25
And right now, we haven’t made them different yet, we have a title and content is Gutenberg, that’s it.
0:31
One perk that you do get is, if you go to slash staff you get a custom archive of just staff. So your posts aren’t going to be in here, your pages aren’t going to be in here.
0:43
So this automatically makes a nice little staff listing.
0:49
But if we want to get really unique, we need to add some custom fields. So I’m going to show you how to do that.
0:57
There are a variety of ways to do it, you can write the code yourself, which isn’t that hard. There are wizards to help you. There are several libraries, there’s CMB2, there’s Metabox.io and Advanced Custom Fields. I’m going to show you advanced custom fields because it is the simplest.
1:16
So let’s go to “Add New”, and search for Advanced Custom Fields. And it is right here. And you’ll note over here is ACF extended, that’s an add on, and it’s cool, but if you just get this thinking it’s better than this, it’s not gonna work because it requires this.
1:36
So grab Advanced Custom Fields. And we’ll activate…and now on the left here, you’ll see there’s a custom fields thing.
1:47
And fields go in field groups. And we don’t have any right now, so we’re going to add one. And we will call it “staff information”. And before we add fields right here, we want to show this if the post type is equal to “staff”.
2:10
And now it will show up on the staff page. There’s some other options here that you can mess with. I find that again, I like the defaults. So we’ll know we’re not going to go over those.
2:22
So we’re going to add a field…and we’re going to add “first name”. And the field name can be automatically generated from this I just clicked and it just did that our field type is going to be text – here are all the different field types. There are quite a few – you can do a lot of stuff here – we just want them to type in their first name.
2:50
We can make it required if we want. There’s placeholder text all that stuff, we don’t really need any of that we just need these first three things.
3:00
So I’m going to click a number. No, I’m gonna close that. At the bottom, go to close field.
3:10
And we’ll make a new one. We’ll make “last name”. Now you may ask why we’re making first and last name if his name is in the title.
3:19
That’s because you can’t sort by last name on a whole name in the title, where with this, you can sort by last name alphabetically.
3:29
So there’s “last name” and again text. And we will close this field. And we’ll put in a phone number.
3:44
See, is there a phone number in here…there’s not probably because it’d be too hard to do internationally. So we’ll leave that one to text as well.
3:56
So now we have three text fields in a group called staff information. So let’s go back to old Steve here and “edit”. And down at the bottom, you’ll see this box.
4:11
So we’ll put in Steve, there’s Wilson and phone number is 61655-1212 and hit “Update”. So now we have this information associated with Steve.
4:30
It does not automatically render on the front of the site. We’re going to have to do something to make that happen. And that’s going to be in next week’s tip.
4:41
So to review real quick, we used Advanced Custom Fields to quickly create some text fields here and we put the information in and hit “Update”. And I’ll even show you if you go to add a new one, they are empty.
4:57
So be sure to come back next week and I’ll show you how to make these appear on the front of the website.
5:04
I hope you find this useful