Elementor Post Loop With Dynamic Content From ACF (Advanced Custom Fields)

in this tutorial i'm going to show you how to create a custom loop in elementor that's able to pull in custom fields from advanced custom fields as an example this is a loop i created it only has three listings they have a featured image a title an excerpt a button and some extra data right here this extra data is advanced custom fields all the other stuff you can get in a regular loop using elementor pro but you cannot add advanced custom fields data using just straight up elementor pro we use a plug-in called elementor custom skin to make that happen i'm going to show you how it all works in this tutorial if you have any questions or comments please leave them down below this video i try to answer them the best i can my name is bjorn allpass from wp learning lab where we help you get better wordpress you can earn more for yourself for your customers and for your business if you haven't done so yet make sure you click subscribe ring the bell so you don't miss any future videos and now let's get into this video right now to set up this tutorial i created three posts they are really basic these are the three right here and they are a title some warm ipsum text a featured image and an excerpt which is just taken from the from the lorem ipsum text over here and this is going to be loosely a real estate website all the posts are about houses that are for sale we're going to add list prices to those houses or asking prices to those houses using advanced custom fields which is one of the plugins we have installed we have four plugins installed advanced custom fields early custom skin also called elementor custom skin which is a free plugin that you can find right here this is linked to in the description down below if you want to check it out and then we have elementor and elementor pro the top three all free elementor pro is required because that's what does the post looping and elementor custom skin adds a custom template option to our post loops which allows us to bring the advanced custom fields into those custom loops to show you what i mean let's go to pages this is a basic page i created called top listings this is where we're going to add our custom loop and if we use just the elementor posts just drag and drop that in we have a very familiar looking post so we can then edit and change we can choose the classic skin we can choose cards and we have a lot of customization options for these what we cannot do is add advanced custom fields content to these cards or to this classic layout that's where the custom option comes in this custom option is added by elementor custom skins before we add this to the page let's actually see how to create them so let's back out of here and go back to the dashboard to create a custom skin is pretty straightforward go to elementor templates theme builder this is another reason you have to have the pro version because we have to actually be able to create templates in the theme builder we have a new tab called loop this is the loop that elementor custom skin adds so i'm going to create a new loop i'm going to call it houses create template and we have our blank canvas right here now i'm going to add featured image pulls in one of our houses if nothing's being pulled in for you go down to the gear icon on the bottom left and under preview settings choose a post or page that pulls in the data that you want so you can create the template more easily we're going to add post title and we're going to add post excerpt and we're going to add a button pretty straightforward stuff just going to style this a little bit so it's a little nicer a little nicer looking there we go i'm going to change the text for the button to say view the full listing here that's not the color i wanted there now we have our basic item that's going to go into the loop this is a lot bigger than ones we saw a moment ago what we're creating is the individual item and its layout and features and its appearance and we will then loop through that in what's called the loop and it will show as many items as we want on the page that we put it on and we can adjust those settings using the elementor builder so let's further customize this a little bit i'm going to add a border width of one and make it really light gray and i'm going to make sure the background of this is white just in case we decided to change the color of the main background later that's not all see-through so there we have our listing and it's all done that's great we're not going to add the acf custom field right this second first i want to create this loop and put it on the page and see how it looks and then we'll come back and add the custom fields let's publish this for conditions you don't need to choose any in this case let's just click on save and close and then exit here and let's go back to our pages our top listings page this is where we want our listings to appear let's just close this section or get rid of it so we add the posts widget which is an elementor pro widget add that there we get our classic layout like we've seen before many many times if you built any websites it's going to add some padding at the top bring it down a little bit and this is where we can change our loop this is looping through all the posts that we have on the page or on our website we can set the number of columns we can set the number of posts we can add pagination and it'll loop through all of your posts that's why it's called the loop it just keeps on looping through so we choose from here custom under template we choose houses this pulls in or loops in all the houses using the custom template we just created and that's all there is to it super simple but this is not too different from let's say the cards which you can customize all you want inside of elementor so the real power is not that you can make it look the same the real power is you can add things like advanced custom fields so let's update this and exit out of here and now let's add some advanced custom fields i'm not going to create a new listing type for this for the sake of time you could use custom post types to create the listings custom field on the left hand side here and then create all your listings inside the listing field that's what you should do if you're building out a big website in this tutorial i just want to show you how to add custom fields to your loop in a future tutorial i'm going to build a complete real estate website and we'll use custom post types for that in this case we're not going to let's go to custom fields let's click on add new and let's call the group listing info and let's add a field let's call this list price or asking price make this a number you can enter instructions here if you want i will enter the asking price is it required yes or no i'm going to choose no because maybe some people don't want to have the listing price on there maybe they want you to call them to find out that's usually how you do for really expensive houses and let's add another field let's call this square footage because even though i'm in canada and we use the metric system we do a lot with square feet don't ask me why this is how it is so square footage enter the square footage of the house this one i will make required and with those two fields and the data we use you'll get the idea of how this works so that's all we're going to put in here for rules we're going to add this to the post type if it's equal to post that's totally fine and all the rest i'm going to keep the same except for position i'll put it on the side and then click publish let's go back to our posts let's edit this one so now the custom post type field is going to be on the side over here and here they are listing info asking price and square footage so for asking price for this property let's say 700 000 square footage let's say 2500 update let's do that again for the garfield avenue house let's make this one eight hundred thousand and the square footage is gonna be three thousand and the calvin hobbs crescent house this one's gonna be nine hundred thousand square footage gonna be five thousand update so now we have our data in the posts now we can put that data into our custom loop template let's go back to our templates theme builder houses loop edit with elementor and i'm going to put this information right below the title so let's pick a text editor drag that in let's choose dynamic let's scroll down to acf field let's pull in asking price there's the asking price let's put something before that let's call it asking price and then a dollar sign there we go and i'm going to just duplicate this let's change this from asking price to square footage and before we're going to put a square feet there we go that's all done now this is going to be in our loop let's click on update save and close exit to dashboard go to where are we going pages and hello mentor and we now see hopefully yeah there they are we have our asking prices in our square feet right in our loop and right here is the future home of the real estate website tutorial that i'm going to build using advanced custom fields if that's not ready yet this is going to be a custom login form tutorial so check out one of those two whatever one happens to appear here my name is bjorn i'll pass in the wp learning lab and if you haven't done so yet make sure you subscribe ring the bell so you don't miss any future videos my name is bjorn allpass in wp learning lab until next time keep crushing it and i will see you in the next video

Channel: WordPress Tutorials - WPLearningLab

Views: 11,637

Keywords: elementor post loop, elementor post grid, design post loop, elementor, elementor custom loop, elementor custom skin, elementor custom skin grid, elementor custom skin loop, elementor custom skin plugin, elementor page builder tutorial, elementor tutorial, elementor tutorial for beginners, elementor wordpress, advanced custom fields elementor, archive template elementor, advanced custom fields, advanced custom fields pro, bjorn, ele custom skin, wp learning lab acf

Id: SB-zz7ClleU

Length: 10min 33sec (633 seconds)

Published: Fri Jul 17 2020