Easily implement ACF fields in your website. Copy and paste pre-made code, create forms and more.

in this video we're going to have a look at some great tools to use with advanced custom fields to make it a lot easier and quicker to develop websites to get the code and then to insert the code into your template and we'll be using oxygen builder for the template so i've installed oxygen and the default page structure and theme and then i've also installed advanced custom fields pro so let's first create a a field group with custom fields and in that field group we're just going to create as many different kinds of fields as possible so we'll get rid of the oxygen interface right and then we'll just publish to get started right with that in place now we can have a look at adding some fields so let's do a text field we'll do some radio buttons right let's add a repeater and inside that repeater let's add a repeated text field and let's add an image field and lastly let's add a repeater select field and in that we have the select and in the choices we'll go select one so there we have a basic repeater setup let's add another field this time let's go and add a a date picker and we'll just leave that at the default and the return format will set it the same right and then lastly what we'll do is we'll add one more field and let's add a group so this is really just for demonstration purposes so we have some group text and let's add a group image right so we have a basic group set up and then let's just add something that looks for a a urls or a file so for that we'll go to let's have a look at a that's a link or let's look at a post object so we'll say all post types and all taxonomies apply and right so there we have our basic setup so what often happens is that you have your your custom fields and now you want to insert your custom fields into your php code block but you don't have the code in order to do that and to get it you need to spend some time in acf looking it up but there is an easier way so what we do is we head over to google chrome and in google chrome we're going to do a search for chrome extensions advanced custom fields we go to acf tools google chrome and you're looking for this icon and you want to install this extension and once it's installed you'll see that you'll get a little a here for your advanced custom field tools and the way that this works is once you've installed the extension and you head over into your field group and you want to get the code from any of these fields what you can do is you can simply click on that acf icon you'll be asked to reload the page so the page will reload and now when you hover over each of these items you'll see that you have an option to copy the code so let's just look at the text field so we copy the code and then we can check that in a text editor so here i just have the basic text editor and if i paste that now you'll see that we have the if statement if the field exists then [Music] get the value from that field and if we have a look at all the fields available here so we can look at the radio button so here we can look at the radio button and once again if the value is equal to the first option then we have uh if if it's true or false so if it value if it is equal to a one or a zero then do something with that information let's have a look at the repeater so we can copy the code and copy the code with the subfield so we'll just copy the code first and if you have rows the row right so none of the fields included in the repeater are in that row if we copy with the subfields you'll now see that it includes the subfields that we had in that field group so there's the image there's the text there's the repeater image and then the select value so as you can see you don't have to worry about any of the code that's going to be needed to set up the value same thing happens when we go and look at the date field let's have a look at that there we have the simple echoing of the date field we can look at the group field once again copy the code for the group once again just the basic without the subfield and then we can select the other option and now we get the values included inside that group field and then if we look at a post object which would reference to categories then once again here we have the post data and in this case the permalink and the title so very nicely laid out and you can literally just copy and paste this code into your php code block inside your installer inside your template so that's how easy it is to get the code from the various themes the code from the various blocks and then or field items and then to insert them into your post right let's now go and have a look at a plug-in that you can install that will also make your life with advanced custom fields a lot easier let's go back to plugins and now what we're going to do is we're going to look for a new plugin and this plugin is the extended acf extended plugin so we'll just search for acf extended the extended plugin looks like this one so let's install that right we'll activate that plugin right so we have the extender plugin installed and now when we hover over advanced custom fields you'll see that we have a a substantial addition of additional tabs to our system so if we have the field groups add new now we can categorize our field groups we've got block types forms option pages some settings and then tools and updates so let's go and have a look at some of those so now what's nice is when it comes to creating front-end forms it's it's a much easier process simply click on forms add new there we have new form i can then give that a name new form and i can select the field group in this case just the demo group so now those fields automatically pulled into the form and of course i can select more than one field group if i want to include more than one field group in my form and then under action is where the real power lies so here we can do a custom action or we can do an email a post a term or a user action so in this case we said we're going to create a new form so when the form is created it's basically is this going to be to update a post is this to create an email update some terms is it a maybe to register a user so what is this form going to be used for in this case we can do perhaps a post action and now you can see you have the option then to create a post or update the post let's have a look at an email action and here the email action would be to send an email so we could combine the two and say that when this form is created we'll create a post and we're going to send an email we could look at a custom action so this would be an action that i would like to to have run and i would here be able to insert the code that i would like to use and as you can see there are several options that are presented in the plugin to make my life easier in constructing that custom action let's have a look at the next one we can also do a term action so once again here target this action using these hooks and once again i can create a term or i can update a term and here is code that is available to me to set that up if i want to extend this further and here are the action hooks that i can use um to find my own custom options and the kind of code that i'm going to need to be able to do that as you can see it's broken down really nicely as you can see there we've got change the value source change the term arguments and also add a custom action on term save so anything that you need then to change a term and then of course we have a user action so what's nice here is that i can create a user update to user or log the user also with a code section if i want to extend that further and how all of these generally work is that you generally have the um for example with a post is you have a load option and then you have the save option so what this is saying is when you're working with a form what field should load when the the field when that form loads so generally if you're updating a post you would want certain um fields to load with a value and when you save you would want to save certain values when you're creating a new post you don't want to load any action or any fields here because it's they're all blank and then of course you have the option then to save and you can then select so if i wanted to assign a custom field from my field group i could for example come in here and scroll down to my custom fields and then be able to insert the values from my custom field so let's you'll see that there are no custom fields available at the moment and that's because we haven't published our form let's just update these they do require at least the name of the action be filled in to work so that should do it right let's publish right so now what you'll see is that when i go to load um okay we don't create post right so now if i head over to the save option here and i want to assign a custom field you'll see that my custom fields are not included and i can quite easily head over head down to there's my demo group and i can choose which field then to assign as the title for this post so that can automatically done the user would fill in the form to whatever that submission is either to create post or to insert some information that you'll be using and you can then determine which of those fields is used as the post title you can also assign the content the post order the parent the post terms so quite easy to do that and the same would apply then for for example the email works a little bit differently but yeah you could then have the user insert an email address and that would be used then for the to reply to ccbcc or subject so these can be code fields or they can be hard coded so just to manually insert the code field for that particular email and then a custom action we have the code but you need to insert your own in that and custom field code in that case in terms of a term action once again you can select from these fields and also then we have a user action but also to remember that only the selected fields will be saved with the user so even though i've pulled in that whole field group with any of these actions i can select which of these fields are saved so if they're not needed you don't need to select them and what's nice about that for example is if you're doing the post and let's say you're going to update a post and you want to load certain fields is you only need to load the fields that you want to load on that form you don't have to learn all the custom fields so you have control over which fields are loaded into that form and of course then once you're done and you want to include on your page you can either use these shortcodes or you can make use of the php code here and this is just one of the [Music] items and options available if we look at the options pages so maybe we'll just update that options pages now are really easy to do so you want to create an options page on your website using advanced custom fields you you can come in create your so now you can create your post options so we'll call it and these could be any anything that you really want and then you even have an option to put in your menu title so i'll do an options test and the capability the position the parents like you can even insert an icon url redirect the post id we're going to just go with test options so you have um what the button should be on the update whether it should autoload so so you can set up these options as you want once you're done you would hit the publish button and you have your options test available now we haven't assigned a custom field group yet to that particular item so if we head back to options pages here we have the options then you'll see there's no place here to apply the field group it works in the default way where you head over to your field group you go into your demo group and what you do is you scroll down post type and here you can say options page is equal to options test update the value head over to options test and now you can see that we have the values from our demo field demo field group included so that's how easy it is to set up the options page so let's head back to the um [Music] custom fields and you'll see that we have this menu across the top here which has the option so nice quick and easy to get to if we wanted to assign a category here we could add a new category test and we can assign a parent category and then just add a new category for block types so these are block types that you could use inside your website so if you really wanted to use this for block type [Music] block test so you can insert the name you can insert a description here you can assign a category this would be related back to the wordpress categories and here is a short list here of what those are where you can insert your particular block some keywords what kind of post it applies to a post or a page the mode and the align and then you can also insert an icon just to make it stand out a little bit more you also have a render template the template file used to render the block in oxygen this though wouldn't really apply because in oxygen you would be able to create your own block types when to enqueue the script and then the support options so not really relevant in an oxygen builder we've looked at the forms and we've seen just how powerful those can be then we head over to the settings so these are the settings for acf and then we have the acf extended settings if you want to just get an overview of what those are then we also have some tools so you'll see that you have a lot more tools now and you're able to you've seen the import field groups and export field groups which are standard but now you also have for block type post type taxonomies options pages and the forms so whatever you do in one install you can then export into another as long as you have the acf extended so those are just additional nice to have features what you can also do from the the field group is when you hover over the field group night you can see that you're also able to access php and json straight from the field group what's also nice about the interface is you'll see that here we have an indication of the location so this at the moment is set for options if i go into the demo group and i change that to let's say just a standard post type all post types update and i head back to the field group now you'll see that i have a different icon indicating what the purpose of this field group is and maybe i'm going to do something around a user role and once again if i head back it'll show all users so let's have a look and see how we would use this inside an oxygen template so what we'll do is we'll head back to our custom fields we'll go over to that field group and we're just going to assign it then to to any post type to all post types and update and then what we'll do is we'll head over to oxygen and we'll go to our blog post and we'll edit with oxygen so here we are on our post and we're just using the standard atomic theme from woocommerce from oxygen so if we head over into into the structure we have the heading then we have the article and then here we have a code block and there's nothing in that code block and then we have the comment section so let's go to that code block which is there by default and we can now insert the code from our custom field so let's head over to the admin section of the website and then we'll go to custom fields and we'll head over to our field group and now you'll see i want to get the code but i don't see the little code block head over here to the icon reload the page and now you'll see that i can simply copy the code and insert that code on the page and i can save that so now if i go over to my hello world post so we'll open up our posts we'll go to hello world let's get back to the normal view here close oxygen and i enter some texture i'm going to update that and then let's go and view the post and let's head back to oxygen and i'm going to just wrap that with a div you can give it a background color and we'll just give that a text color black and then we'll make the width of that 100 percent and under the size and spacing we'll just give that a 15 pixel all round then we'll save that now when we head over to our website we should easily see that block you'll see that the value isn't displaying in the block but if we do go and inspect the block and we look at the code inside the block you'll actually see that the text is there so to do that head back to oxygen and you'll see here that under the um settings that the advan that the default setting was sent to display none we simply allow that to display and of course the text will show and then on the website the text comes through so that was just due to a default setting inside the oxygen template that set the layout to display none so that that's how easy it is we can literally go into our field group and head over to the particular field to there we go now we can copy the code so let's have a look at a repeater so we're going to copy that code as it is head over to oxygen we'll stick with the same code block and inside that code block now we'll just paste that immediately below what is already in that block and then we're going to head over to the post we'll edit the post and we'll go to that repeater test and we're going to add a row and we'll say one we don't have any select fields we have select one select two select three so let's add two we'll go to the select one and then add another row call that three and we'll make that select three so two one three will update head back to the website and there you can see the selection one two three not formatted in the way that we would like but then nonetheless if we'd like to show the other values because you'll remember that we did change the selection for each of those and that select value isn't showing what we do is we'll head back to oxygen we'll go and have a look at the code and you'll see here that when it comes to displaying the repeater select field it has a preset if condition if now what we'll do is we'll remove those details there which means that we now default to just is there a value in that subfield and we're going to insert the following code and what we're doing is we're saying select equals and now the selectable variable will be equal to and we'll get the value from that field and then we're going to echo out that value so if i apply that code you'll see that the selection comes through so if we save head over to the website and refresh the page you'll see that those items now display your display the images would take a little bit of an adjustment at the moment if we head over to edit the post we would simply go back to our repeater and we can add three images we have this demo image that we'll be using so there we have the image selected update and we'll view the post and you'll see that the image does display but it's not the size that we want so in order to do that we need to just make a change to our custom field group in order to get the right code to display the image and to be able to adjust the size so to do that we will head back to our custom field and we go back to our group and we go back to the repeater field and what we're going to do is head down to the image and we're going to change the return format from the image array to the image id and we're going to update that but that will also change the code that we use in our template so as you can see i need to get the code head over to my icon in the top right hand corner reload the page head back to my repeater copy the code with the subfield and then i'll head back to my template and i'm just going to paste in that code below and you'll see now that the repeater image code changes and now actually includes a variable called size and inside that variable there i can actually set the image size so what i'm going to do is take out the copy the code for the image and i'm going to replace the code here for the image and then i'm going to delete this code right so now what i've done and i'll just apply that and i'm going to save and now i'm going to change the size there to medium i'll apply the code and now you'll see that the images all appear in the medium size we can save that we can head back to our post view that and now you'll see that the post that the image size in the repeater is much smaller

Channel: Bruce Young

Views: 2,915

Keywords: acf, oxygen builder acf, advanced custom fields, advanced custom fields oxygen builder, acf oxygen builder

Id: soUV560zNDQ

Length: 35min 3sec (2103 seconds)

Published: Tue Sep 08 2020