4.1 Adding and Displaying Custom Fields

Hello, and welcome back to this Tuts+ course on Custom Content Types in WordPress. In this part of the course, we're going to move on from looking at Custom Post Types and Customs Taxonomies, to looking at Custom Fields. Custom Fields are different from post types and taxonomies. They are metadata that relates to individual posts and you can add custom fields to posts have a custom post type as well as to standard posts. Now you may remember when I registered my post type, I included a supports line in the arguments and one of the things that my post supports, my post type supports is custom fields. So that means I can add custom fields to my cities. So I'm gonna add a custom field to each city with its height above sea level. So let's start doing that. So I'll edit my city and the the first thing I need to do is turn custom fields on in my screen options. Now, since Guttenberg, this is in a slightly different place from what you may be used to, so you click on the ellipses up here at the top right, click on options, and then check custom fields. And if you scroll down, you'll see custom fields that look pretty much exactly like they do in the classic editor. So, there's a little bit of nostalgia for those of you who are harking back to the pre Guttenberg days. So I'm gonna create a new custom field here. And I'm gonna call it Height, with the capital H. And I now need to look up the height above sea level for London. So London is just 11 meters above sea level, which isn't surprising because look at it, it's pretty much on the sea. So I'm going to put 11 meters and I'll click add custom field and then I'm going to update my post. And I'll view it, update my city rather. And at the moment, that isn't displayed anywhere. So I need to edit my template file to enable that. Now, I'm using a child theme of 2019 here. So if you'll using a child theme like me, you'll need to edit the single file for this post type in your theme. Now we've already edited the single file for this post type so we already got that file in our child theme. And if you're working on your own theme not a third party theme, you can just edit the relevant template file and your theme. So let's go to the code. So here is my theme, and my loop is within this content.city.php file. Now, where am I gonna put it? I think I'll put it underneath where I've got country here. So here, where I've got echo get_the_term_list, I'll add it under here. So I'm going to be echoing this out again. Height above sea level and then I want to use the get_post_meta function, which fetches metadata or custom fails for the post. And that has three parameters. Firstly the ID, which is the current post, then the label for the field, which is height. And then true, which tells it to only bring back the first value. Because if I don't do that, I'll get an array of values, which is not what I want. And there should only be one value, and if more values have been added by mistake, it'll just bring back the most recent one. So I'll save that and I've refreshed my screen, and you can see we've got Country: United Kingdom, height above sea level, 11m. Now, I want to add a paragraph in there, so that it's displaying below. So firstly, I might get the term list. I've added paragraph before country and I'll add an additional parameter. Which is what comes after. So when you get the term, list it's got the idea of the post, the taxonomy, the text before or the HTML before, the separator and then the HTML after. And then I will put a p in here and then add a closing p there. So let's save that and then I'll go back to my page and refresh it. And here we are. Country United Kingdom, height above sea level, 11 meters. Though you might choose not to have paragraph break, you could just use a break there so that they're a bit closer to each other. But I'm quite happy with my paragraph break right now and you can use that to display any custom field. So to get the post meta function, we'll fetch custom fields for you and you can then use it to display it along with echo. So that's how you work with your custom fields in WordPress. In the next part of the course, we'll wrap up and I'll give you a recap of what's been covered during the course. See you next time, and thanks for watching.