Advanced Custom Fields & Headless WordPress - ACF with WPGraphQL & Next.js

hey team we're gonna learn how we can add custom fields to a headless wordpress site using advanced custom fields and wp graphql i'm colby feyhawk and if this is your first time here make sure you hit subscribe for future updates if you follow along with me before we learned how to take my next.js starter next wordpress starter where we were able to deploy a next.js site that brings wordpress to the static web we were able to do that with wp graphql where it's a plugin for wordpress where it gives us the full capabilities of querying our wordpress data with graphql but out of the box wordpress doesn't really give a ton of different fields that we can use for instance here we have the content which is a pretty capable editor but we only get a certain amount of different things that we can actually modify including a featured image excerpt and really that's it for if we want to customize the different data points for that particular post or page so that's where advanced custom fields comes in where it's a pretty popular plugin for the wordpress community that allows us to customize if you can even see here in the image we can customize the different fields that we add to post our pages so that we can add a little bit more breadth to the different content areas of our different pages now this is pretty well documented for how to do this for a typical wordpress install that might use something like php to get all this different data but how do you do it for a headless wordpress instance where we want to query that data with graphql so to get started i'm going to bootstrap a really basic next js wordpress site where i'm going to use this simpler starter that i have that really doesn't have a lot of bells and whistles but it'll give us a nice base point for where we can learn how to add advanced custom fields to our wordpress headless next.js site so i'm going to go ahead and copy this yarn create command i'm gonna head over to my terminal i'm gonna paste that in and let's call this my acf headless what that's going to do is it's going to go and grab that project from github is going to clone it down and create a new project for us with a new git history even and is going to install all the dependencies so that we're ready to go with a new nexjs site and once it's finished we want to do one more thing we're going to cd into that we're going to even open that up in our code editor where the only thing we need to do is we need to create a new environment file so inside of the root of our project we're going to type env.local and inside there if we go back to the github we see that we need this wordpress graphql endpoint so i'm going to grab that i'm going to paste it in and we need to replace this with our wordpress host and because i already have wp graphql installed on this project we can see that i can take this url and go to slash graphql which is the default endpoint for wp graphql so i can plug that right into my env file where now we can go to our terminal and run yarndev and once it loads in the browser we can see that we have all of our demo content and we have a new basic wordpress nexus site ready to go so a common thing that we might see on a blog post is a video to go along with it that might be something from youtube or vim vimeo but typically it's a video that has similar content or relevant content to help people understand that in a different way but back in wordpress we don't really have a way out of the box to be able to add that kind of content unless we add it in line within our content which if we want to customize the look of this different page we want to try to be able to have a little bit more flexibility so that we can query that data separately so in order to do that we're going to use advanced custom fields like we mentioned before where we can go to the plugins tab and we're going to head over to add new where once we land on the plugins page we're going to search for advanced custom fields and once that shows up we're going to see that we have a couple different options but we particularly want the one that says advanced custom fields we can click install and it should take a just a quick second and then we can activate it and once it's activated we can see that we have a new option on the left hand side of the screen where we have this custom fields where if we click it we can see that we have this concept called field groups now field groups might need something different depending on what you're trying to achieve so for instance if you want to try to add some field groups specifically to a particular post maybe you're going to create a field group called post but if you want to create a field group in particular about a certain set of data such as a video we would want to create a video field group so i'm going to go to add new and for my new field group i'm going to call it video where we can see we get a couple different options here and the first thing we want to do is actually add some fields now the first thing we want to add is we can click the add field here and we ultimately want to be able to plug in a url so let's call this video url and we can see if we click over to field name it's automatically going to populate that so feel free to either use that or if you prefer a different value go ahead and update it but we also get a bunch of different field types where there's a huge list of these different things that we can select and really if we're doing a url it could be text or url but if we use this one called ombed what that's going to allow us to do is paste in different urls that actually take advantage of the o embed format where we can see later that we'll be able to query the data for that particular embed so if we scroll down for the rest of this we can see a couple different things where we probably want to make sure that it's required we don't necessarily need to worry about the embed size right now because we're probably going to make it responsive later but other things we're going to ignore as well but the one thing we want to do is we want to add one more field and for this we're going to add video source and for this one similarly it's going to populate the field name but we're going to leave this as text because what we want this one to be is if we're going to paste in a youtube video let's just call this field youtube if it's vimeo vimeo or whatever that is it's going to be the title or the source that we're going to get this video from we can even see that in the instructions we can put something like source of the video which is pretty descriptive of the label itself but you know the gist and that's really going to help people who are coming in here that aren't familiar with the system as it's set up but again we can make it required if we want to this one probably doesn't need to be required we also get a lot of different options depending on the field type but we're going to leave those all blank for now and finally this is going to be our other field that we're good to go with now keep in mind i find this a little bit confusing you don't need to keep clicking add field because what that's going to do is just going to keep adding more fields rather as soon as you're done here we're going to be able to hit publish but we need to check a few other things first particularly here the location we're going to leave this as is but if you're familiar with the concept of a custom post type or even things like pages we can use this option to select where we want these fields to be located now if we had a custom post type say called products we can select the post type of products or you can see here page but this is going to be able to give us options and flexibility for how we apply these different fields to different types of data so now we can go back up to the top and we can hit publish and we can see that now we have our very first field group now if you're already familiar with the concept of wp graphql and querying for your data we can see here that we're able to query for all of our post data where we have our id our title our uri and really everything else that we want to query that's a part of that particular post but the issue is by default we're seeing that we don't get anything called video we can even look under here nothing called video and we can scroll through here there's nothing like acf or anything we don't get that by default now to fix this we're going to install another plugin and it's wp graphql for advanced custom fields where it's going to be able to take all that data and apply it right to our typical wp graphql queries and make it easily accessible right inside of our applications now the tricky thing is we can't actually find this currently inside of the wordpress dashboard where it's going to be a plugin we're going to have to download and manually install which isn't as bad as it sounds so what we can do is we can click this download the plugin button which is going to take us over to the github page where we can do one of two things we can either select the master or main branch and we can download the code as a zip file or if we scroll down a little bit we can see that we're gonna have this installing from github link where we can click download the latest release zip file and it's going to download right to our computer now back inside of the wordpress dashboard i'm going to click add new but this time i'm going to click upload plugin in the top left where we're going to be able to go to the file system and look for that particular file which is wp graphql acf master double click that and click install now where it's going to do the same process where we can now activate it and we can see that it's now installed inside of our plugins now before we go ahead and query our data we need to do one more thing we need to head back over to custom fields particularly the field groups and select our video field group where if we scroll down to the very bottom we can see this area that says show in graphql which we want to toggle on because we want this available inside of our data we can even see that inside of our different fields we have that same option but that's going to be on by default so we can turn that off if we want to but we want all of our data to show so we're going to leave that as is and we can click update but now if we head back over to our graphical ide we can see that if we have the page refresh here we can scroll back down and this time we now see that video field where we can even select our video source and our video url and we can play that query and we can see that while a lot of those don't have data the one that we did add our video to we can see our video source of youtube and we can also see our video url so we're at a great point here we're able to query our data that we were able to apply for custom fields how do we actually take that data and apply inside of our application so back inside the nexus project we have a pretty simple setup here where if we scroll to the bottom of our post page inside of pages post post slug we can see that the first thing we're doing is we're using get static paths to create a bunch of different paths for our post so that we can navigate to them along with the post slug but if we go back up to get static props we can see that here is where we take that post slug and we actually make that request to grab that individual post along with all of its content so because all we're doing is modifying the query for what data we want to add we can go ahead and simply add video here we are we're going to define this property with the object notation where we're going to say we want the video source and we want the video url and to test this as it works i'm going to take this post and i'm going to console log it out so i can see what that data looks like right inside of my dev tools now one other thing to keep in mind make sure you restart your development server as we do have a new graphql query just to make sure that it's not cached when we're trying to see this locally but if we reload the page we can see that we now have that post data where we can even see the video property along with that video source and the video url so now we can add that right into our page now as i mentioned before when we were creating this field the video url is actually ombed which is a particular type of field that we're going to be able to utilize in order to get data about how to embed it into our page if we go over to ombed.com we can see a couple quick examples of what this looks like where each of the different providers or consumers were able to see that for the provider particularly flickr in this instance they have this endpoint where if we tack on a couple parameters including the url that we want to get this data from it provides a json object with all the different data including how they want us to embed it onto the page and we can see that's exactly what we get if we go to youtube.com ombed where if we add the url parameter along with that url of the video itself we're able to get all the information about that video including this html snippet with an iframe which we can stick right inside of our page so that we can embed it and have our video right inside of our page the cool thing is even if we prefer to make it a link we can even get the thumbnail here that way it could be a little more performant depending on what we want to actually do so to get started we know that inside of this post object inside of our get static props that we have this video property that we're going to be able to use so the first thing i'm going to do is i'm going to add that property inside of our props but this time i'm going to spread out the post.video that way we're going to have a new prop called video that has all that video data next i want to look up the ombed information so that i can add that right to my page so i'm going to define a new let variable called o embed where i'm going to say if our post dot video exists and if our post dot video video source equals youtube with a capital y i'm going to say i want that o embed to be equal to a weight we're going to use fetch and we're going to reach out to https youtube.com o embed where we're going to pass in a url variable dynamically that's equal to the post.video.video url and because we want to consume that as json we're going to also say oh embed equals awaits o embed json which is going to transfer transform that response into json data for us so now i'm going to take that ombd variable and i'm going to simply make it available on our video object where now because we were previously console logging out the post as we remember we added a new prop called video so we want to now console log out that video and when we refresh the page we can see that we have all of our video source information as well as that ombed object which includes everything we need including that html snippet so now above my post content i'm going to say if we have a video and we have the ombed property on it we're going to add a new snippet where i'm going to add in this new div and let's say class name equals styles video where inside of that we want to dangerously set inner html and inside that we're going to add our html as that video.oh embed html and if we head back over to our browser we can now see that we have that video and although it's a little tiny we can see that it was even able to play so while we have this working already i say we can do one last thing and let's make this so the video is definitely bigger and even a little responsive on our page so i'm the type of person that likes to first add my css inside of my dev tools so the first thing i did was find out where that div is that i added and i'm going to first add some styles including making the width 100 and because we have that iframe in there i'm going to say text align center now if we select that iframe we're going to use a new css property called aspect ratio which keep in mind this is only available for really chrome right now i think as in terms of support so if you want to make sure that you're supporting everything cross browser it's still probably wise to use the padding top trick where you set the height to zero and the padding top is the ratio in a percentage form that's able to fill all that space but for now for this proof of concept we can use aspect ratio which i'm going to use the width and height of the iframe as 200 divided by 113. for now i want to say i want the width to be 100 and we can already see that it has done that but we also want a height of auto so that it takes up that room with the aspect ratio but we also probably don't want it to be the entire page width so let's set a max width of 400 pixels and we can see that that looks pretty good could probably be a little bit bigger for but for our purposes this is looking pretty good and it's definitely visible for somebody who wants to watch this video on our post so finally now because i created this styles.video i can take this video and i'm going to open up my home.module.css and let's just go to the very bottom where i'm going to create that new style for video and we can see that on the video itself we added the width of 100 with the text online center we can also add where we set the video iframe where we're going to grab those same styles directly from that iframe so now if we reload the page we can see that those exact styles were added just like we want and it's just as responsive and great as we expected it to be the cool thing though is whether we want to add a video or say we want to do something custom with a bunch of products that we want to sell on our site we can really take advantage of using advanced custom fields and make that easily accessible right inside of our graphql queries using wp graphql's plugin where we can then add that right to our site right inside of nexjs headless wordpress and xjs is already a powerful combo that allows us to do a lot of great things for the web but being able to use tools and plugins that already exist inside the wordpress ecosystem like acf or advanced custom fields allows us to extend that and have full flexibility over what we can do what's your favorite wordpress plugin was it acf or was it yoast seo like you saw in my other video or is it something else let me know in the comments otherwise if you like this video make sure you hit thumbs up and subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 12,823

Keywords: wpgraphql acf, wpgraphql custom fields, wp graphql acf, acf headless wordpress, advanced custom fields, advanced custom fields wordpress plugin tutorial, advanced custom fields wordpress plugin, advanced custom fields wordpress, advanced custom fields wordpress tutorial, advanced custom fields wordpress api, acf graphql, acf graphql tutorial, wp acf plugin, acf wordpress tutorial, acf wp graphql tutorial, acf wordpress headless, wordpress acf graphql, wordpress acf

Id: mMaw1LMClwQ

Length: 17min 57sec (1077 seconds)

Published: Tue Jun 15 2021