Building a Custom Post Type in Elementor using ACF and CPT UI

hey this is brian with ken grizzly today we're going to look at how to make a custom post type using elementor and the advanced custom fields plugin as well as a plugin called cpt ui we're going to use the the wendy's site as an example [Music] also what you know with a custom post type like what is it when do you need it i find that basically if you need to create some sort of a click-through piece of content now like the sandwich that has more information than just like a regular featured image an excerpt and then the regular sort of text editor fields then you oftentimes want a custom post type so like in elementor this 320 calorie thing here this metadata tip that's not going to be a default option so that already probably potentially needs a custom post up and then we click on a sandwich and you've got sure you've got your sort of featured image and and maybe this is your excerpt or something but then if you look you know we've got uh ingredients nutrition facts so it starts to become custom right so these aren't typical things found in the posts anyway so let's take a look at how to get this done there's three or four plug-ins that could do it one is pods another is tool set but the most popular is advanced custom fields and that requires a second plugin called cpt ui which is going to let us set up the custom post type so i will jump into my dummy set here and i just need to install two plugins so we can set up a custom post type i'm going to search for them so the first one is this custom post type ui this will actually let us make the custom post type i find that this even though this is the most popular route uh an option like pods or tool set i'm going to activate that tends to be actually cleaner in some sense because it's just one plugin but this is this is the most popular route so i'll go back to the plugins i've installed that i need to add advanced custom fields and you can search just like this there's free versions of these you can get pro versions that do more so here's the one we want so i'm gonna install that okay they're both activated so we're just gonna make we'll sort of try to mimic the wendy's thing first thing i need to do is i need to actually set up the custom post type so you can see i can add and edit post types i can add taxonomies all that basically means is like like categories or tags do we need any special categories or tags so i'm just going to allow the post type and uh we'll call it let's call it menu item right so interesting you see if i put a space it automatically does it won't let me capitalize so i want a menu item so the plural label i guess would be menu items and singular would be menu item and that's just to get started that's fine but you'll see there's more options i could set here um so first i'm just going to add the post type you'll see now over here on the left we have these menu items and there's this generic pin icon and it just says all menu items add new so i can i can actually go in here and say add new menu item and i can go customize all these if i want i can even set the icon so if i want to change the icon that's an option you have to scroll all the way down here to menu icon and i can choose one which i don't have any in my media library or you can use these dash icon class names if you click on that link you can look through here and maybe there's something that works and if there is you can actually get the class name so i don't know if there's something like a menu list let's just pretend that i thought this one was good enough i want to click on that this has a name so if i go back over here i think i can put that class in i can also say if i want to show on the menu or not and where so if i number it like if the top is 0 or 1 where do i want my menu items to show up like maybe i want them to show higher i can decide what i want that custom post type to support like yeah i want a featured image yes i want an excerpt you can ignore custom fields we're going to add those with the advanced custom fields plug-in so you can turn things on and off here and you can get more complicated like do you want this to be searchable or not but we do so for now that's good there's lots of documentation on that i'm gonna add the post type actually that was a mistake i shouldn't have clicked add post type i should have saved it so what i left the post i was working on i need to go back to edit post types menu items i need to go down and redo what i just did turn on my excerpt paste in that icon name and this time i'm actually going to save my post type there we go so now you can see menu items has the new icon and apparently i didn't pick i enough number to outrank comments uh in the order anyway so we've now got our post type now we need to add custom fields so i'm going to click over to advanced custom fields and the first thing i need to do is add a new field group so i'm going to treat nutrition facts as one group and then ingredients as another you could probably keep them as one but we'll see how this shows up so i'm gonna have nutrition facts and then that'll be my group and then i can add fields to it so i'm going to add a field what field do i want i'll just do a couple here so let's say calories right calories what kind of a field so this is where i can choose what kind of a field i want for me it's really um let's see i think these are just numbers right they're just numbers so you could probably get away with the text field um you could potentially do a number um you can say whether not you want to be required i might just say this but before i do where do we want this to apply well we want to be applying to the post type of menu item right so i want this custom field to show or this field group to show if it's a menu item okay so i'm going to go ahead and publish that so there we go we have a calories entry and then maybe i want to add a new field group for the ingredients this one i definitely want to show on the menu item but i'm going to just have this be uh i'll just call it ingredients it's the field what type do we want this to be text text area i want the what you see is what you get editor this is more like your normal you know editor with the bowl the italic it should let us enter all this type of info whatever we want to put for ingredients so i'm going to go ahead and publish that now we can keep adding more while i go to field groups and nutrition facts i'll add one or two more and then we'll i'll show you how to actually get this into a post so calories what came next uh total fat grams total bad and i i think i had picked number we'll find out if that works well um okay i'll add another field but it's next i'll just skip to cholesterol okay you get you get the point i can keep adding these sort of custom bits of info i want to collect i'm going to update this now what we need to do before we can set up uh elementary template to pull this in is we need to make sure that elementor knows about this post type and is supported so if i go to elementor and i can't remember it's either tools or settings let's find out here's elementor tools i was wrong it's elementor and then settings you see here that we need to enable elementor on the menu items that we just made this is the post type right so we just added this new post type so i need to save that okay so now what we should be able to do is we should actually be able to build a template for this so i'm going to go to templates and theme builder and what we want to do is we need to build a template for an individual menu items so okay we need to do a single post right so i go to single post under theme builder add a new single post and let's see i'm going to just call this menu item sometimes i'll put like a single colon space just to help me sort my names of templates you can name it whatever you want and then i'm just gonna ignore all the all of these things okay so we'll see this is just a dummy site so it has like a footer and header that actually looks nothing like a restaurant site um so what we want to do is build out the contents here to pull in our custom information so if i look at this i'm gonna actually start building the second panel here nutrition information so i'm gonna have a little a two column section right let's give it some padding too i'm actually building currently a framework that will make building way faster in elementor so things like adding padding to to sections instead of having to do it over and over again it just out of the box elementor would actually have some padding on things i'm excited to show people that soon first thing i noticed you know what you know actually let's go to a single column i'll show you why so i'm going to drop in the heading for the nutritional information then i'm going to put in an intersection to get my two columns below that right here so then we we need um allergens and ingredients let's put in a heading here for our ingredients i'm going to make this an h3 because there's already an h2 here um i'm going to skip the origins for now i'm just going to put um what was it nutrition facts well style is a little different just see this goes a little faster okay so we want to pull in our ingredients so how do we get the ingredients and also i'm gonna i'm gonna go ahead and publish this well you can click this up arrow first and click display conditions where do we want this to display we want this to display on menu items so this template will now apply to menu items i'm going to save and close that but if you remember we have excuse me we haven't actually made one yet so we need to make a dummy one so i am going to go do that okay so let's add a menu item that we can test out i'm going to put in the title greasy sandwich but look at this you'll notice here's our field group for ingredients which i can close or open and i can type in my ingredients here but i also have nutrition facts calories total fat cholesterol so we'll just make them up 1200 calories total fat grams 358 cholesterol milligrams 900 878 okay uh and then i'm gonna i'm actually gonna borrow from these guys so we could copy and paste okay so i pasted in our ingredients oops my calories accidentally deleted those okay so let's see update now that gives us a little bit of information we can come back to that tab more so i'm going to go over here where we're working on our post let's refresh this now how do we pull in the ingredients so we can just go get a text field text editor widget excuse me from elementor i'm going to drop it under here now here's the trick we click on this we go over here to dynamic tags this sort of stack of circles we're going to click on that and in theory we should be able to go fetch a custom field the acf field so you click on it nothing happens it's a little confusing once you select that you click on it again and then click on the key and now look you can choose from our custom field so i want ingredients i click on that nothing shows right i'm gonna update this what the heck so here's here's a little trick if you go to what is it let me think settings this bottom left gear preview settings you can actually say what you want to preview sometimes it's smart enough to know by default this time it wasn't i want to preview a menu item post type and you can even choose which one so what did i call it greasy sandwich let's start typing there it is click apply and preview cross your fingers now the ingredients will show up bing cool huh now i have some maybe some styling work to do um it looks like the wendy's styling may have come in here yeah look at that so here's a trick i can paste if you click on text in the wysiwyg editor here you can paste there and it will strip out all the code from wendy's and then go back to visual and i could go through here and style these however i want i'll just pull fold these things with the colons on them okay so i'm gonna update that so we'll go back over here now we have our ingredients we need our nutrition facts it would be kind of cool if we could build it to look sort of like a chart like that um i'll see what i can do maybe what we could do is on that column we could maybe click on the column itself and add a border so i'm going to add a solid border width of one we'll choose a color good kind of dark color and just for fun we'll we'll give it a little background color maybe like a a really light bluish color okay so if i click this little arrow here i can preview what i'm getting so far okay so um we need some padding maybe i'll add 30 pixels around the size or something okay but how do we actually get the items in there update that let me show you some really powerful options with elementor so yes we could we could put over and over a text widget right and then tell it to go get the calories etc but we may be able to get away with some sort of a list i'm not sure so look at this price list we aren't actually trying for a price sometimes it's actually hard to drop widgets where you want to go there we go check this out so i can click on these list items here and look we have the ability to pull dynamic text so if we had wanted to let's say let's say we were actually building the menu on a different page we could set this up to say go get um a menu item through here or like to go get the calories info um there there may even be a way so so check this out yeah this will probably work watch this i'm not going to use the description but i am going to use calories but that i'm just going to put in manually right but then the actual number for calories i can go get from a custom field so i click on it click that choose the key calories and we'll see if it works what we may discover is that um elementary won't like that number field um so there's probably a couple workarounds but we may have to change it from a number field to a text field to get elementor to like it we could even have an image associated with it if we wanted to but what's kind of cool here is i could then use the list styling options that come with elementor right so i could set the gap between the rows we don't have rows yet so let me yeah look at this i can have i can play with the separator here so we're going to have to go back this is a bit of a hassle but it's a good learning experience and elementor is not supporting that number so i need to go back to my nutrition facts and i need to change these from number fields so i go to the field i'm just going to change it to text text versus text area the difference is text is just going to be like a single line and then i'm going to edit total fat and i'm going to change that to text and i'm going to do the same thing on cholesterol it's worth it to get this working so text okay so let's make sure we save this update now i think we may have to go back over to that post i'm going to refresh well i'm going to click update because i didn't do that before refresh okay now it's just text fields not number fields so we can put in whatever we want we can even use the comma this will work better so let's go back to our template i'm going to save what i had and i'm going to refresh now we need to click on that list oh look at that our number is there so cool that that's not too bad so i'm going to change the color of the title just use a dark color but here's a cool thing i can go over to my items i'm going to duplicate this and what was next on wendy's i think we did total fattening cholesterol so i'm just gonna change this to total fat click on the field change it and now you're thinking if you're thinking to yourself like well where's the grams well we didn't enter that we just entered number but cool check out this trick if you click on advanced you can put before and after value so i'm just going to after put parentheses g for grams and there we go and if i want a space i could have one really powerful you can even set a fallback value like if there was no number for some reason you could have like not applicable or something like that um okay so we have one last field i'm going to duplicate that and it was cholesterol so cholesterol now i think i spelled that right all right so we need to actually okay we got that but it's not uh grams it was milligrams so i go to the after and i just put in my milligrams okay so as you can see this is pretty powerful for pulling in information and like i said you can go through and we could then style this list however we want um and that's just one widget right like you could decide to do this a different way like you could just grab a text editor widget or even a heading widget so like i could drop a heading in here and i could go get the value for calories this way right um so you could you know possibly use an intersection or you could you could change the positioning on this to be inline or excuse me the width to be inline and then i could add another text field i'll just duplicate it so like this one i wouldn't get dynamically i just x out of that and i just type in galleries so as you can see you can build some really amazing stuff i i think that's probably kind of good to get the gist if you feel like you know enough now cool i'm going to continue building this out a little bit just to kind of show how i do that for people who are interested but do please consider subscribing i'm so on the left i might want some breathing room on the ingredients column okay so we kind of got we kind of ripped off the wendy's panel obviously we could work on this to style it closer to theirs if we wanted to but then how to how about this top sort of featured area okay so what i'm going gonna do is i'll just add another section here this will be like our hero drag that up and what is in the wendy's one um looks like the title then we have uh some sort of a description and then a button and the featured images on the right so let's get our title now there's two ways you can do this one is you can drag in a heading and then you can set it dynamically to match the post title so i'll show you that like this you click the dynamic tags and you say i want the post title greasy sandwich alternatively i'm going to delete that i can i believe if i remember right grab a post title widget which effectively does the exact same thing by default you can style the color if you want to okay and then um we can actually go get the post excerpt so if you if you had entered if we entered an excerpt over in our post like here that we could get that to show like brief description of the sandwich or we could use the regular gutenberg editor to write whatever we want about the sandwich so orders of that okay so what if i just take that text and put it here and just for fun i'll make something bold because why not okay so also update that we'll go back over to our post what i'm going to drag in is the actual post content so the gutenberg area is the post content um so i'll put that in there and look it went ahead and grabbed it now uh the featured image i'm going to go with a simplistic way to do this but first let's give ourselves some padding here maybe even more than that a little breathing room okay maybe we'll do a background color restaurant some sort of a restaurant red or something maybe not they went with gray let's steal their sandwich image inspect element and whoever uh whoever built their image oh i see they did a whole background they cut the bacon off on the right hand side i'm just gonna save that to my desktop so they did it as a background image so we could do that let's do that we'll go over here so instead of my horrible color and get rid of my color i'm just going to put in a picture click on that paintbrush and then i will go get my sandwich insert it i need to set this to cover and position what do we do like right center and so there we go there's a couple ways i can handle this column i'm going to duplicate it actually and just delete the text over here so anyway you get to just i i can adjust my styling but do that we're we're starting to get um what we need now what you could do on a different page is you could build out a list of the posts so this is the template for a single but let's go over to templates again under the theme builder and what we could do is build a archive um and set up you know like all the sandwiches to pull or we could just build a page right so sometimes i'll just build a page so let's say i want to add a new page called menu publish that i'm going to edit with elementor and then there's a post widget here drag that out there and i can tell it hey um i want you to go get under query my menu items so there you go you can see it's already getting the greasy sandwich a brief description so we can work on we didn't set a featured image except that one as the background but if i set a featured image it which it could show here but then i can go through here and adjust like i don't want the comments or the date um i just want the greasy sandwich um and read more could say learn more or maybe i don't even need that so you can start going through here and editing if i set my featured image on the actual post itself i'll go ahead and do that to show this would be a terribly sized featured image but let's do it document featured image we'll just well yeah you'd probably want a square image for this um i'm going to update that we'll go back over here i'm going to update the page i'm working on refresh it and these will be cool because you can click on and it'll go right through to that so here you go so i click on that um and this this probably gets the job done like if you go to i think it's the wendy's site or no arby's check this out name of the sandwich and the image right so you can see how you can build something like that so we can go through here we can style the image in the box a bit there's some limitations with this that's where you may have to get into [Music] there's too a tool called tool set there's also one called pods elementors elementor's elementor extras another one elementary extras kind of cool because it lets you build a template that can be used in a list of of items so like what if i wanted to list the calories here in elementor post widget by default and out of luck uh in in this case like if you wanted to list more like you want to go pull your custom fields into this post list because this is clickable if i publish this and click on it it should take me through to my template for the individual item but if you wanted to make this this have more info i would highly recommend take a look at the elementor extras plug-in what you do is is you build a template and in that template you can put whatever you want the sandwich name and calories and picture and you organize it however you want and then save that template and then what you do is you actually on your page instead of dragging in the post widget for elementor you drag in the post widget for elementor extra and then you can tell that widget hey go get my template that i built and when i say template i'll show you i just mean like you go over to the templates and i'm not talking about the theme builder i'm talking about just um templates so if we go to save templates you click add new so let's say i was building one i'm just going to build like a little section and this would be like my menu item list item so this was if i'm using that elementor extras plugin as an example i believe um croco block or jet plug-in does the same can do the same thing but what i would do then is i come in here and i just build like i normally would um so i could go get the featured image wherever that is featured image and i could i could go over here to my settings like we did before and say hey i want you to use a menu item for my preview and greasy sandwich and what you do then is you just build out whatever you want um so if i want to put in the calories i just go get them same way as before right so build it i just build this up the way i want save it then i drag in that elementor extras post widget and fetch this template and you can get a totally custom grid you know list view and it allows you to by call you know do columns by um size like desktop could be like three columns um you could do two on tablet etc okay anyway now i'm rambling on maybe i'll if people are interested i'll make a a demo on how to do that but hopefully this gives you a an idea of how to get some custom post types together using english custom fields elementor and cpt ui if you're interested i'm happy to show how to do it in tool toolset although that's paid pods is really nice um it's free it's easy the only thing is i think that they had some funding withdrawn so i'm not sure if that's a good call at this point and then um the last one i think i had mentioned was croco block um their plug-ins are bloated but they're really powerful this whole jet jet suite of plug-ins um they can do pretty much anything okay hopefully that was helpful please consider subscribing for more videos like this and like i mentioned i'm rolling out a framework for elementary that i think a lot of people are going to find saves them time and money and makes their site look really great quickly okay thanks for checking this out

Channel: King Grizzly

Views: 3,845

Keywords: elementor cpt, elementor cpt ui, elementor acf, elementor advanced custom fields, custom post type, custom post type in Wordpress, advanced custom fields, elementor pro tutorial, wordpress custom post types, elementor tutorial, elementor page builder tutorial, elementor page builder, acf tutorial, cpt ui, custom post types elementor, advanced custom fields tutorial, how to display custom post type in elementor, elementor custom post type, custom post type elementor pro

Id: WcvVmWh9iPo

Length: 33min 59sec (2039 seconds)

Published: Tue Dec 01 2020