Display Custom Fields in Elementor & Beaver Builder | ACF Pro POWER! 🔥

everybody welcome back to plug into your home for handcrafted WordPress plug-in tutorials and right out of the gate I do apologize for the AC running in the background for those of you that have been following me for a while my office is in my attic and it gets really hot in the afternoon and you can also tell that I've rearranged some things so that I could put the AC in today's video is what I would probably call like a master class this is a little bit more advanced that also requires a couple of purchased products beaver builder agency beaver themer Elementor pro and advanced custom fields Pro and the goal of today is to show you how to leverage advanced custom fields with Elementor and beaver builders so that you can have your customers log into their WordPress website and modify content in the WordPress dashboard without ever having to touch Elementor or beaver builder now I'm not using these two in conjunction with each other I'm just showing you the difference of Elementor and beaver builder and how to do it in the respective page builder here and this came up when I was helping out a local nonprofit through this whole kovetz stuff and I helped them quickly build a website and then they came to me the other day and they said hey we've got these three documents that we always have our donors and these other nonprofits that work with us they have to fill this out and these documents are changed every quarter and the person who's responsible for that has to then go into the website in upload these documents into the WordPress website so I had quickly built them something in beaver builder with beaver themed er you know got the job done using the Neve theme the problem is is the person who's logging into the site number one I don't want them going into a page and even modifying content like on the site on the blog post or anything like that and they're not super technically savvy so the challenge is of like okay I've logged into WordPress how do I do that there's a special feature in advanced custom fields Pro that allows you to add a snippet of code to your WordPress functions file and load up an options page on the left-hand side of your admin so that that person could could just log in and modify those custom fields directly in the dashboard without even modifying the content let's go ahead and dive right in I'll show you that it this requires advanced custom fields Pro in order to enable these functions or for these functions to be enabled if you're a wordpress developer there are ways to do this without having to use advanced custom fields of course but advanced custom fields does make this simple so I'm gonna copy this as always back up your WordPress site before you're doing any of this stuff certainly be don't don't be doing this on the fly like I am I'm just doing it for sake of example we're going to go into our functions dot PHP file again make your backups use a child theme etc etc and I'm going to paste that little snippet of code at the bottom and basically what this is saying is create an options page when somebody logs in to the site so I'm gonna update that file refresh my page and you'll see all the way down here on the left-hand side we now have this options page when I click it there's absolutely nothing here because now we're going to create the custom fields let's go to custom fields field groups add a new group and in this particular case these were documents so I'm gonna say special documents in the first field I'm going to add is actually a description and we're going to make this a wysiwyg right here WYSIWYG editor and this is going to give the user well a WYSIWYG editor so they that this person can come in and post an update so every quarter they modify these documents and they want to be able to post something above or below the document doesn't matter to say hey we've updated the documents for the summertime or the fall or you know this is for the gala that's approaching make sure you download these documents right give them the option to have a little description there and I'm going to add another field and these are the files so I'm just going to simply call them file I'm gonna say a fieldname file1 you'll see why in a moment add that field I'm gonna add actually I'm going to delete this field remove closed field and then I will just duplicate it automatically makes it - file - and I'll duplicate it again it'll make it to file three okay so let's close this and let's why do I have to die double-click that by accident I did so let me remove that so three files and hit publish now in the location of advanced custom fields if this is the first time you're seeing this you don't have to do it necessarily this way but you can attach advanced custom fields to any post page custom post type many different post items in WordPress but with that advanced custom fields Pro we can say attach this to an options page and will they update so what we'll look for is that code that we added before it will look for that options page that we enabled and say you know dump all of those fields on this page and when we click options there it is we have our description field and we have our file fields and I see I accidentally did something so let's go back into custom fields field groups edit I forgot to make these a file field so these are not text fields we want them to be file fields go down to the next one edit file field and the last one edit and turn that into a file field update that let's take a look back at our options page yes and you can see here are our file fields the files are there this was from some testing before us so I'll remove that you can just see this is how somebody would visually see it's like a customized blog post editor right so instead of going into your typical WordPress page or post you know where they might have to see all of the blog post all of the pages you create this customized options page and this person only has to log into this section right here and let's even take a look at that so I'm gonna hit update there I have a plug-in enabled called user switching user switching and I'm gonna switch to the Jain user and Jane only has access to blog posts and nothing else throughout the site but when she goes to her options page she'll be able to log in to this section and make those specific modifications to the documents and to the description she doesn't have access to pages contact forms plugins the theme and all of that stuff I've put her permissions to just the author role and this is what she has access to so very streamlined when you want to have that kind of functionality let's switch back to Matt and now we'll build the example out so let's select these files these are the files that I'm just placed holding these files here for sake of demonstration so it says the documents for summertime are ready to go here are the three files I'm gonna hit update the first one we'll take a look at is beaver builder remember you will need to have beaver themer purchased and activated for this to work so add new template we'll call this documents actually I already have that typed and of course add templates or add save template at launch beaver builder and now we'll build our template for pulling in those ACF fields so the first thing that we'll do is pull in a text editor drop that in you'll know you have beaver themer activated because this little plus symbol is what is going to let you know that you can pull in these ACF custom fields here so we'll insert this options field field type will be a file in the field name or SUSE mean the first one will be WYSIWYG and that will be description save save and you'll see it will automatically go and query that that custom field and I had typed in that options panel the documents for summer are ready to go now we're going to add this is exactly how I did it with that friend of mine put three columns in because we have she had three major three major documents are always being downloaded I'll use the button module again exactly how I did it look for something that represents a document let's just say this one for right now we'll say text is download document and the link will be that advanced custom field options field file and it was called file underscore one save and save now I simply duplicate these and beaver builder drag that there drag this here and now we have to edit those custom fields to represent each unique file so this one was called file to save this one was called file 3 safe we'll hit done and publish so now we'll head over to our My Documents page and drop that template in we're gonna hover over my documents click on beaver builder that will drop us right into the beaver builder page editor click on templates landing page save templates since this is one that we've already created of course click on it it's gonna drop it right in to our page hit done hit publish and there it is now we have our three documents which is our just images so in the real world example I use PDFs for my friend but now because it's a template it can be placed within different sections of a website so you can imagine this working not just for documents but for a little bits of content about pages what's a really common one which I'm sure if you've developed a site for like any small business or nonprofit organization or Chamber of Commerce they have these sponsorship logos for people who have donated to them this is another great use case for that so instead of documents it's logos for somebody's sponsorship page and then because it's a template it can be used throughout the site in many different contexts so that's how you do it in beaver builder let's hop on over to doing it in Elementor go to the dashboard Elementor templates save templates I don't have any so we're going to hit add new we will call this a section and call this documents create the template and we're just gonna do a blank template short of the three let's start with the buttons first on this one so go here go buttons and I'm showing you both because one people are curious on how to do it for both page builders they're both very popular of course element are very popular but I'm curious to get your look and feel when you see both of these builders side by side the experience of both I I still very much lean to beaver builder maybe because it's the one that I'm most comfortable with but instead of the dot the plus symbols that beaver builder has on their field settings you have this sort of like database icon or what they're calling the dynamic tags in Elementor when you click that you get a very similar drop-down and we'll go to a CF URL field and it drops it in and then you click on it one more time and you pull in the options file here and you do file one and let's remember to change this so we can say download document and we'll do the same thing we'll add an icon um quickly without wasting too much time here well let's just search they say don't waste too much time there's nothing there so let's do paper I don't this one looks good enough for now we'll insert that and just because I can't stand the yellow will change the color I don't know to that okay and then we'll do the same thing we did with beaver builder will duplicate we'll duplicate and then we'll bring it over to our respective sections edit this field and we are going to select the second one and then the same thing over here we are going to select the third one okay now let's go ahead and drop in that message part where the the user is able to put in a little message we'll grab the text-editor and for now actually just put it right here for now and the dynamic tag will be a CF filled click on it again the key will be the options description and then we'll drag it above boom that's it we'll hit publish so our template is saved we'll exit to the dashboard we'll go to our documents page first let's edit it and switch it to the standard editor and we'll get rid of any of this beaver builder stuff that's there remove block remove block certainly you would never have both page builders enabled on any production site or at least I hope not we will go into our templates folder grab the documents insert it yes and there it is it'll drop in our ACF powered section there and again you'll be able to use this on any you know any place that you can edit within whoops I wanted to view the page any place that you can edit with Elementor so again just a super fast recap we're using advanced custom fields Pro to have our own custom fields and then to go beyond that our own custom options page so that a user doesn't even have to touch Elementor or beaver builder or blog post pages or pages so that they don't you know futz with the design or anything else critical we can give them an author only access let's say and then all they have to do is log into WordPress go to their options page here and their job is done right so when they only do this four times a year you don't get that support question like what page is it on again how do they click on this how do where do they find the files they come right here and they remove and replace these three files and they make their description change right up at the top very very easy and very very capable for somebody who doesn't spend all of their time in WordPress I hope you enjoyed today's video a little bit longer than most subscribe thumbs up if you want more of this stuff again I apologize for the AC in the background if it is super loud but we're rearranging we're rearranging the YouTube studio yet again alright folks we'll see you in the next video

Channel: PluginTut WordPress tutorials

Views: 1,326

Keywords: WordPress, Elementor, Elementor Pro, Elementor ACF, Beaver Builder, Beaver Themer, Baever Builder ACF, ACF Pro, WordPress custom fields, Custom post types, Display Custom Fields WordPress

Id: 5LdssM1_UMk

Length: 16min 32sec (992 seconds)

Published: Wed Jun 10 2020