ACF options page in Oxygen Builder - ACF Options Page fields Integration

in this video we're going to have a look at the integration of advanced custom fields inserting data from the options page and to see how that's done you'll see that i have a website here we have a header we have the main body and a footer and in that i have some contact information company information a summary contact information the address information and then right at the bottom here once again company information and some contact information if i was to update this information instead of updating it through oxygen where i have to open the main template and then also edit the page i'm able to go into my website i can go to my options page and here i can change the details and update as i need so [Music] let's update these details let's just add a zero on the end there and here we'll just put in two exclamation marks update the information head over to the website refresh the page and now the information is updated everywhere where those fields appear on the website and to see how that's set up in oxygen here we are in oxygen and you'll see that i have the main template loaded so there we have the telephone number the email address and if i scroll to the bottom you'll see again the company name and some additional information so to update the information is really easy we will just select the text insert the data head over to advanced custom fields and you'll see that all the advanced custom fields that come from the product will come from the options page now are in the blue so i would head over here to company name insert the company name if i wanted to update this information this information is taken from the options page so i'm just going to add a new text element there right we have only a text element insert data over to advanced custom fields and i will just look for company overview and then the information will get pulled through and then just to change the color of the text so there we have the text and the same would apply here for the contact number select the text insert data advanced custom fields and then just look for the contact number and insert so at the moment the reason you're seeing all of that is just because i've already allocated that information and i'm just selecting it a second time so the same would apply for the email address the difference here though is that with the email address i do have a link attached to it so for that to work let's add a piece of text and then what i'm going to do select the text insert data head over to my custom information and look for email address there's the email address i'm going to insert that and then to make that a link i'll simply head over here to the link settings and i'm just going to close that and then i'm going to come back out to where we have url i'm going to put in data i'm going to go to advanced custom fields and i'm going to put in email address and i'm going to save so there you've seen how we were able to update the information from the fields that were on the options page and now if i head over to the website and i refresh all that information will of course be updated but what's also nice is that the link for the mail is also now automatically updated with a mail to link as well so that's how easy it is in oxygen to link the options details to areas of text within the website now the second step to this would be now that we know how to link in oxygen would be to set up the options page in advance custom fields so if i head back out to the website in my installation of plugins i have advanced custom fields but i also have a plugin called advanced custom fields extended and what that does is add a whole additional suite of options to your advanced custom field plugin and to best see how they work we're just going to get the plugins page to load so i can show you what that plugin looks like while that's loading if we hover here over custom fields you'll see that a whole lot of it additional options are added so advanced custom fields extended this is what it would look like this is advanced custom fields extended we don't need the pro version we can stick to the free version and that'll look something like this inside the wordpress repository so there we have the acf extended logo and that's what we're looking for and that will essentially then give us a whole host of other products that are available so now we can add for example the options pages is very easy simply head over to options pages add new and i'll call this second options pages and i'll just put in this information all we need to add i'll just make it the same as the title and then we publish that and that's the options page set up scroll down there is the second options pages and now you'll see that when i select that link there's nothing here except we have a link here that says create a custom field group simply head over across second options field group and now i'm just going to add one field in here testing and then what i'm going to do is scroll down and here just make sure that this location of custom fields is linked to the options pages and the options page we want is second options pages and we'll publish that and now when i head back to my options pages here you'll see that that field is available name i can update and that's how we can then update those fields and then you saw in oxygen how when we selected a text field the advanced custom fields options page fields are in the light blue color and that by updating in one place we can then update all the fields on the website so i hope you found that interesting and thank you for watching

Channel: Bruce Young

Views: 294

Keywords: oxygen builder, ACF Extended, advanced custom fields

Id: 8TSAQgzYZ7c

Length: 7min 44sec (464 seconds)

Published: Tue Nov 30 2021