 Thanks for all for turning up and stuff, so my name's Sean, and we're going to do a quick talk on practical ways for extending your website with custom fields. So we'll start off with essentially what is a custom field. And custom fields are built in to WordPress core. They're probably something that you may or may not have seen. They can be pretty powerful, but the way they're presented by default in WordPress isn't fantastic. So you can essentially define them as a feature that allows users to add additional information when writing a post or a page, and then you can easily display that information in your WordPress theme. What would you want to use a custom field? So when you want to extend the capabilities of WordPress more than just your title and your kind of post editor field. So you may have a set of data like an ISBN number or something if you're doing book reviews that you can post across every single piece, every post, and then that can flow through. And when tags and categories kind of aren't really the right fit, if you want a consistent look and feel across that, you can also add this data to essentially anything, and you can add custom fields to taxonomies, to custom post types, to user roles, and the editor can be quite restrictive sometimes as well. So this is what they look like by default. So if you're using this example, the name of the custom field is listening to, and if you're listening to this American Life podcast, that's what you would kind of put in there. You pull out the name and pull out the default. So it's not a fantastic user interface, but that's kind of how it works. It can be obviously extended, and that's what we'll be going through today. By default, it may or may not be, it's usually not shown. So if you go to the top right hand corner and go into custom fields and screen options there, I don't know if my mouse will show or not, but under screen options you can then click custom fields and it will show down the bottom. As I said, they don't look fantastic, so we'll look on improving that. So how can we get started? There's a few different options out there on the market. Generally there's free ones that extend it that will have a premium tier as well. I've done some talks on the past on the solution that I use, but there's quite a lot of solutions out there. So today we'll be going across advanced custom fields, which is a free plug-in which has a premium tier as well. So I did a talk probably a year and a half ago about building a custom home page with advanced custom fields. So if you look on the engineers.sg website, my talk will be on there. This also comes with the slides and there's a download to see how the back end works in terms of building that page. So that should be up there as well. And there's lots of other options that can be made. Just if you're looking at that example there, the typical WordPress editor, and look, this is pretty Gutenberg, but this is if you're using the classic editor, what you can essentially do is all those are custom fields that you can set. So for your hero area, for example, you might want a background color of green or might want the client or yourself to be able to change that background color, set a background image and then set a title field and things like that as well. So by allowing those additional fields, you can then customize them through a little bit of code. You can also get a little bit more advanced in terms of displaying lots of different types of fields there. Image fields, text fields, number fields, file uploads, the normal WYSIWYG editors, galleries, select boxes, dates, Google maps, email fields, all sorts of stuff. The premium version of the plugin has a few additional tiers, which I'll go through as well. So if you're looking at how it would appear when you're building the fields versus kind of how it appears when you're editing the fields, you would essentially set them up in the back end, like the field group one, which is the dark gray one in the background. And then so you'd set a thumbnail or an image field, title, date fields, and then description fields. So you'd set all those up. Once those are built, you can then bring them into your theme. So there's both front-end and back-end, setting up the fields first and then entering the data, which then gets stored in the databases post-matter. I won't go through too many technicalities around it, but so advancedcustomfields.com is where you can find the free or the premium version of the plugin. You can also find it in the repository. As I said, the Pro has additional fields, repeatable fields, gallery fields, flexible content, which allows you to kind of build your own page builder. It has clone fields and options pages as well. So you may want to set an options page across your whole theme or across your whole website and then pull in data from that options page. That can be done with that as well. So the plugin price is $25 for a lifetime license for one site or $100, so Aussie dollars, which is about the same as Singh. So $25 Singh for a lifetime license, all upgrades and things. And then $100 for an unlimited license. So it's pretty reasonable. Has over a million websites on it. It's always being extended. There's a new version coming out 5.8, which will allow you to create Gutenberg blocks with ACF data. So it's going to be quite good once that comes and bring down the technical ability in terms of creating Gutenberg blocks without having to know a lot of react in JavaScript. There's also this website, awesomeacef.com, which has over 200 third party extensions. So some of them are free. Some of them are paid extensions, but it will just do things like accordions that will already be built in and a whole bunch of the things like collapsible areas and things. So have a look at that as well. Depending on your page builder that you're using, if you're using something like beaver builder, it will connect with beaver thema. So if you create a header area, you can then pull through the ACF field directly into your editor that way. So I think it has integrations with Elementor and the other ones as well. I'm not 100% sure. So we're going to some real world examples and kind of see how this works for. Generally, most of the examples are just client sites that I've put that I thought would be useful to kind of show how you can extend WordPress further and really build on it and use it more like a CMS rather than a traditional blog system, which it's obviously been built out of. So if we're talking about building your own directory listing. Actually, is this right? Directory listing. Yeah, I'm not sure. Yeah, so if you're building your own, no, that's right. Anyway, so adding custom user fields. So if you're building any type of directory on membership site, generally, you'd be wanting to add some type of user information to the user role. So that may be things like social media profiles, custom avatars. If you don't want to use Gravatar, you can just upload your own custom images. Profile information. So if you have multi-user or multi-author blogs, you may want to to bring out things like occupation, age, phone number, the location of of where they are, you may have a custom calendar link for booking and things like that. So all this data can be attributed to the specific user themselves. And also you make this example here is is for a lab. So for it's a doctor profile that we're we're building out at the moment for a medical laboratory. So each lab will have their own login and then all these fields will be will be associated specifically with that user. So all that information, that's all ACF information. And you can just pull that out at any time. So just custom fields to set up and then bring it out. If we are looking on how to bring that code out, it's a little bit of code here and all this is available on the advancedcustomfields.com website. But essentially you're pulling through the variable. So that's, you know, your variable equals and then you use get field. So get field and then you'll call your field name, which could be phone number, for example. And then if you're pulling it from the user, then you use user underscore underscore and then the ID. So that could be user one, user underscore one, user underscore two and so on and so forth. More of an example here is if you're getting that author's badge and that author badge could be it's obviously an image. So you're that's going to be on your sorry, on a blog post at the bottom of your blog post, you may be, you know, just wanting to display a little image of that of that author. So that PHP code essentially says the author ID and then find the author badge, you know, user, author ID, and then you can echo it out in an image so you pull through from the array. You pull through the URL and the tag for that image. And as an example, you can kind of get something that looks similar to that. Right. So you have an image that's pulled out. You have their name that's pulled out and then their bio bio information. So WordPress has most of this functionality built in. This just allows you to customize it. So I don't think it comes with Instagram logins, but you can use the Twitter one and rename it. But so you can create those quite easily. Also for creating or extending user profiles. So this is one we built for, for like a job application site. So people could go in and adjust their own profiles. So it allows for back end editing for the admin as well as front end editing, as well as forms sending data to it as well. So if we're looking at this example here, so this is built for a profile information. So we have broken it down into four different tabs there just for organizing the data a little bit better. So this is for a helper or a made website so they could bring in their own information and seek jobs and things like that. So this is all their data, uploading your photo, upload your CV, upload your video. Or if there's a YouTube video, there's a link to that as well. And then a description so they can go through and edit any of that data at any time. Both on the essentially on the front end for the user or the admin can go through and check that data and make changes to it. And that's just tied to their login. So on the front end, we just created a default look essentially like that. So it's the photo that I've uploaded and their phone number and things like that. So all that display is essentially just using ACF and we've just plugged in an ACF form code and it brings through that into the front end. So there's a couple of dependencies on that. But that can be really easy as well to give your users access to edit their own data where you don't want to give them access to the WordPress admin. You can just redirect them to their own profile page and then they can edit that data on the front end so you never have to worry about it. There's some other things that we did there so you can delete the account and things and you can enter message between users and things. So that's kind of extending the user role but where we find the most flexibility is integrating with custom post types. So this may be for something as simple like testimonials. So you may want the user's name as the title of the post, the testimonial data in the post content and then you may want their name, their description or sort of their job title, their company name, something like that down the bottom which you could create in custom fields. You can also extend with commerce products if you have specific fields that are unique to each product. You could do that as well. As I said before, around books you may have ISBN, you may have ratings and reviews. For those, if you're pulling through videos, you can pull through... Got a couple more examples about videos later. You can pull through different content around video and big codes, durations of videos, things like that, ratings, directory listings like map listings and things like that as well you can bring through. So as a couple of examples here around a travel blog site, so this is a travel blog site that we're building at the moment. A lot of data will be stored in custom fields and it's also connected via a gravity form. So what we do is we've built all these form fields. I see a form fields in the background so essentially that field at the top says it's a true or false so is there an travel itinerary attached to it when did you travel? Look, most of these are just text fields and there's a couple of number fields and things like that for ratings. So it's essentially structured data that I expect on every post and then we have a bit of conditional code that says, does this field exist? If it exists, then output the data in PHP. This can be done in end page builders and things as well. So this is kind of what it looks like in the end. So traditionally the WordPress editor that would be really hard to do with you'd have to do a whole bunch of div tags and it'd be a real pain to maintain. So with this, the ratings and the intensity and things that's just a number field so it's either one, two, three, four or five so zero to four for those ratings and the same for the price. And then on that we just have a little bit of code. All those six boxes up the top there, if there's data then they'll display. If there's not data, they won't display. That gallery is essentially just a gallery where they dump data into. It takes the first image and displays it at the top. The where in the world, that's just some code as well. So all that is just information that the user will put into the form. So it all comes from a gravity form, sits in those custom fields and then we output it, depending on how they want to. So if we're looking at how it looks in gravity forms, which is what we use as our form builder. So we have a whole bunch of fields there, mostly text fields that they would do. And then how we've set it up is that it'll create a draft post. So this is for people that are getting submissions from the general audience. It'll essentially take all the data from all those fields and we've connected them in gravity forms. You can see there. So the title will essentially just be an ID number. We'll grab the body post content. All the images that they upload will be thrown into the media library as well. So they're all connected. And then all those custom fields are all just connected that way as well. So whenever they get a new form submission, it goes directly into the right field. They just need to check it and go forward rather than having to take data and move it around. So it all gets mapped correctly. You can go and publish directly if you want to, but drafts are generally easier when you have user submission. You need some type of moderation. So this is one for 99.co, just another example of their sort of recent blog, which is related posts or recommended posts. So on each of their blog posts, they have this custom fields at the bottom. They have a couple of different settings for them, but one of them is this related posts. So on the left-hand side there, there's a selection of all their blog posts or they can select the taxonomy so they can say all blog posts in property news, for example, select. We've limited it to four, but you could have more than that. Now select from the left and drag it to the right. And then those will be their related articles and related posts. As part of that as well, so you see that there's three tabs up there. First one is image, second one is MailChimp, and the third one is recommended articles. So the image selector, we built this to allow them to choose whether or not they want a post to have no image. And therefore it's displayed a little bit differently. If they want a left-aligned image, it'll display like the one with the house there. If they want a right-aligned image, it's pretty much the same, just opposite. And then if they want a full-width image, it's the second most expensive housing market article down there, so that's what it looks like as well. So they can set that per article and that's just a yes-no field. So we do a little code checking in the back end to say, is this field that? Then output that code that way. And then MailChimp, that just allows for a little bit of tracking. So if it's entered on the... We have MailChimp embed code on each of the pages, so they just know where the person has entered MailChimp. So if it's District 10, for example, and it's an article about that, then they know that the people have been coming in that way. So it's just a bit of hidden code, but they want to control that at their post level. Another powerful area is around videos. So WordPress will traditionally hold videos okay now with our OM bed. So they generally do that okay, but what we've used it for is for movie and film festivals and also we have a couple of clients that pull in all their information from Vimeo and we display that out as well. So this is an example of the Sunset Cinema website, which we built over the last few years. And essentially they're WooCommerce products, each of the films, they have tickets assigned to them, but this is the extra data that doesn't really belong in a WooCommerce product. The date, which we use for obviously putting out on the ticket as well as the timing data. There's a small thumbnail of image. It has the ratings and qualifications and classification. So as well as the trailer ID, so if you can see there, it's a bit blurry, but it pulls through the YouTube embed code there. We were using the trailer in built functionality, but it was a little slow when we have 15, 20 videos on a page, so we're just pulling through the direct YouTube embed code. We found that a little bit faster than their one and also there's a description as well. So what it looks like on the live website is essentially that. So Green Book is sold out. There's tickets in the next week or so to some of the movies, but essentially it just pulls through into that. So, and it also pulls through into PDF ticket that you'll get if you buy a ticket or this information gets stored with the product. You get a QR code which is generated and you can take that along to the event and they can edit all of that through the CMS so they don't have to worry about coming back to us to add new movies and things like that so they can manage it all themselves. This other example here is for a custom Vimeo sync. So what happens that, so they're a TV listing or a TV producer, I guess. So they have shows from around the world that are looking to sell to other networks and things. So they have a repository on Vimeo. The Vimeo sync essentially happens every day and instead of just going into random WordPress data it goes into custom fields, which they can then manipulate. So by default it pulls through all the information from Vimeo but if they want to overwrite in the ad information they can do in these custom fields here. So if there's a show video description, if that's checked it shows the default one. If not, they can customize that and they can add things like awards if any of the shows have that. Now a lot of that data doesn't deserve to belong in Vimeo and it shouldn't so we've extended it through WordPress. It pulls through the running time and video durations and things like that all from Vimeo but the additional data can be amended here as well and look pretty basic in terms of how it's presented by default but then that can be extended as well. Directory listings are probably the most important, I guess, way that we use it because essentially there's a lot of information around events and also around listings of businesses and things that are generally unique when we do them. So if we're looking at one that we've set up for, it's actually a website called the minute list and our clients have gone around and they've shot one minute videos around restaurants in Singapore, restaurants, bars and cafes. So one minute video and also a lot of information about the restaurant itself. So I've organized it into tabs just so it's nice and neat and tidy and my OCD keeps me in check there. We're using some repeatable fields as well for different things like the different social media links, the different awards that they may have as well. There's integrations in there with Google Maps and I'll show you how that works as well as gallery and chef information. So the video is kind of one small part of it but it gets built out into a pretty big listing around a one minute video. So this is what it looks like when you're editing it. So build out into tabs, the video just contains the video, those booking links there. So those are just the information. So if you are booking, you can do phone, email. There's the location data and if there are booking links through Chope or Deliveroo or anything like that, they can use those extendable. So can use those repeatable fields there. So you see that little button that says add row. They can just keep adding as many rows as they want there. So it's all neatly organized. And then on the front end is an example of kind of how that will display. So the tab that we saw will be up in the top right with some map information. Any award data will be there as well. The photo gallery is just organized into a grid. So that's how that is done. One thing that we do use and this site uses a lot is the map listings for the restaurant guide and essentially every video is essentially related to a restaurant. So what we've done is using the Google Maps API, we just put in the address. It pulls through the XY coordinates. So the latitude and longitude for those coordinates and then you can plot them directly on a Google map. So we have used essentially some different colors to categorize if it's gonna be blue. It's a bar. If it's brown, it's a cafe. And if it's green, then it's a restaurant. So all those will show on there. It can be a bit tough when you're working with data in a really small concentration like Tantrongpagar and around the CBD area. Cause you see there's a lot of, yeah, a lot of those pins around that data. Generally, if you zoom out on this and you look in the map of Singapore, it's pretty empty besides a couple of outliers and the big concentrations in here. But again, if they wanted to add a new video, they just upload their YouTube link and fill in the rest of the data and it builds it all for them. And I think finally we'll just go here in terms of extending WooCommerce. So what we've done for a client here is built a custom endpoint to store some policy data. So they have some insurance policies that they want people to upload as part of their platform. So we've built these custom fields and it pulls through an insurance provider policy type and they can just choose that. And then as you see down the bottom there, you can select what different post types that you want this to apply to. So it says here, post type is equal to policy. So those fields will only show on a policy post type so they won't show on a post or won't show on a page. But essentially those fields are all built in the back end and then on the front end, we also get two different views here. So one of them on the left-hand side is kind of how it looks to the admin and then the one with the black background is essentially how it looks in the ACF form. So it's a little pop-up that comes up and they can edit that data and then just kind of add new ones, update their policies. So it's similar to the helper site that I mentioned before with a custom profile just with a really small subset of data. And for them, it just outputs really simply. So a little custom section into the would call this my account section called policy custodian. And then users can go up and upload their own policy data. So if we're looking back here and it says insurance provider is AIA, what we've done is just a little bit of code to pull through the logo if it matches. So that just pulls through and the rest of the data pulls through there as well if they wanna add a new policy. And this is unique to the specific user when they upload it. It creates a new policy that's assigned to their author and that's how it's tied together. But they go add new policy, they can add that policy, they can also delete download and edit any of those as well. So if they click on edit, then you'll get the version on the right-hand side. If you click add, then you'll get the version on the left-hand side. And that's all tied that way. So that's kind of it for me in terms of using them in a practical point of view. I really don't build a website that doesn't have some type of custom fields in it. I just, it's so easy and simple to kind of really extend WordPress and make it a really usable content management system. So have a think about how you guys can use them and open for any questions if anyone has any. Henry. You shared many examples, right? Let's say you come across a client and they tell you I run a business like this or I have a website like this or I want to build a website like this. How do you know if you should be applying custom fields for this person? And also on your last example, you talk about extending to others, right? How does the custom field actually work before this? Because it shows just the user profile right here. Yeah, so the first example, we sit down with most of our clients and go through a two-week strategy session before we really start anything. So we'll know at the start of the project if they need more than pages and posts. So generally if they need more than pages and posts, they'll need custom fields. Or sometimes if they're doing, if they're producing content like the example that we had around the author profile, generally they'll need a couple of custom fields as well. So it's by default, it's installed. It may not always be used, but it's part of our plugin suite that we've used for years. So I think it's a good tool to have, at least the free version. It's not always gonna work for every site. Page builders can do a lot of it, but I think where it extends itself really well is instead of building out a visual representation of every field across every, duplicating a row and doing it visually, by adding it in the back end, you can just put a call that comes through and it brings through that data into a template. As for the WooCommerce example, so the WooCommerce example is a little bit strange because that data is tied to the user. And what we've done is we've created a new post type that the user creates a new post around. So if they add a new policy, it creates a new policy post type and assigns them as the user, whereas the author of that post type. So it's like creating a new blog entry, but the WooCommerce admin or the WooCommerce user owns that data. Do you actually use the WooCommerce feature as an eCommerce feature or just a... So this is just a nice value add for their eCommerce store so they can offer this service to their clients. Essentially, none of that data is really WooCommerce. If we look, so I don't know what happened to that. If we... This app doesn't have to be... Where do you sell everything? Yeah, they are selling products. This is... They're not selling policies. No, this is I'm uploading my own insurance policies so I can keep a repository of them. That's what they've built, yeah, and to extend that. And also, just another question, right? For this plugin that you're using, when you enter policy and what's the insurance that you're using? Yep. And then it grabs the global of the insurance. Yep. This plugin actually does that for... No, that's all custom code. So what it will do is we'll just grab the word AIA and in the FTP, we just have a folder with all the logos in it and it's just called image or logo dash AIA and we just got to be a PHP code to send that out. But yeah, nothing really to do with WooCommerce. The only bit, I guess, would be, you know, that we're leveraging a custom endpoint that pulls out a custom post type assigned to that user. The WooCommerce integration would really be around this example where those are tied to a product itself. But if you do have specific sale prices and things like that, you can bring through. Also, if you're asking for additional WooCommerce data, a birthday, for example, for a user, you can bring that through as well. It can be done with some WooCommerce plugins, sure, but it all saves in the same database. So whether or not you do it with, you know, WooCommerce checkout fields or with something like this, can be done that way as well. Anyone else? Cool.