How To Display Custom Post Type In Elementor | CPT UI & Ele Custom Skin

today I'm going to be taking you beyond the basics that we covered in the previous advanced custom fields an elemental Pro video and we're gonna take a look at how we can start creating our own custom post types and creating a custom WordPress loop to output additional custom data well if this is something that interests you then join me as I take you through doing all of that right now my name is Paul see this is wptouch the channel where I help you get more from WordPress this is your first time on the channel please consider subscribing and smashing that Bell icon below to become part that it would be crew we notified every time new content is added okay so let's just jump over now into the dashboard of WordPress and take a look at what we're gonna create today this is where we left off in the first video in this series we've got the archive page that shows us the vehicles and if we click to go and take a look we can see all the dedicated information the custom feels that we've added to those vehicle posts now this is pretty basic the way we did this in the first video and it's a good introduction to what meta fields are and how we can use those with the default WordPress setup so in other words we're using this inside the post type now what we want to do in this video is take it to the next level where we start to introduce our own custom post types now you might be thinking well why would I want to create a custom post type we're gonna easily just go through and add in custom fields to the normal post type in WordPress and if you have a very basic website with just a single topic for example you could be doing recipes then that would probably work quite well however when you want to move beyond that and you may have multiple different kinds of categories you may have cars you may have lorries you may have all the right manner of different kinds of post types it starts to get just a little bit unwieldy when you try to shoehorn all of those into a typical post this is much better to use custom post types and that's what we're gonna do so now that we've talked about what custom post types are how would we go about actually creating our own custom post types with the web side we're working on well one of the nice things about WordPress is with the repository of all these plugins there are tons of options available and today we're going to be using a free plugin called custom post type UI or CPT UI so we're going to do is I've come into the plug-in section come in to add new and we're gonna simply going to search for custom post type UI and there we go there's our plug-in so we're going to click on install now let that download and install once that's finished installing will activate it and we'll have a new entry then inside our WordPress dashboard so let's activate that once that's activated if we take a look on the left hand side in our dashboard we'll see we now have a CPT UI so this is going to give you an overview of what's available in the latest version and as I've recording this video you can see version 1.7 one is the latest version so what do we actually start doing to use these custom post types when we take a look on the left hand side underneath the CPT UI section you can see we have a range of different options we can choose from we've got add edit post type add edit taxonomy register types and taxes tools help us support and about CPT UI which is what we're currently looking at now for this video we're only going to concentrate on the first two options the first half of this video we're going to take a look at custom post types and then later on we're going to take a look at acts on amis I'll explain what they are and how we can use those to better organize the custom post type content we're going to create let's start off with the add edit post types once we choose add edit post types it brings us over into this dialog box into this section and as you can see in much the same way as we had with advanced custom fields in the previous video we've got things broken down into various different component parts well we're going to take a look at today are the key things that you need to do I'm not gonna cover everything inside here because they are as you can see a heck of a lot of options so let's start off at the top with a very first section the basic section so what we have in here is the post type slug the plural label the singular label and auto populate labels so we're gonna do first of all is give this a slug now we're gonna be dealing with vehicles so we're gonna just type in vehicles once you've done that most important thing to remember here is whenever you're dealing with a slug you need to make sure that you don't use spaces capitals are ignored and if you want to put a space in to separate something you need to use either an underscore or the minus sign to create that separation next up we have the plural label so we're gonna just type in vehicles inside there and then the singular label is going to be the vehicle now these are primarily reused for the dashboard they don't really get used on the front end of the site too much so don't worry too much about what you use on there this is what you're going to see on this left hand section when we actually have our new custom post type added in so we could if we wanted to leave it there and we could add this post type and we'd have the very basic setup however there are still a couple of things that I want to go through and show you and a couple of settings that I want to change to make sure this works the way that we needed to so to scroll down to the additional labels section now the additional labels are completely optional these are the kinds of things that are used inside the dashboard when you're going through and creating or adding in your custom posts so in this example the vehicles and so on so you can see we've got post type description so if you want to if you have a more complex dashboard or you need to explain to the end user what this particular custom post type is for you can drop in a description name then we have things like the menu name all items add new and so on these are ways of going through we're not using the default values that WordPress will assign to your custom post type so if you want to fine tune and tweak these you can do they're all pretty self-explanatory and you can't do any harm by adding in any values in there you can simply come back in edit your post type and delete any of the values you don't want what we do want to look at though are the settings section you can see we've got quite a lot of options available to us inside you and this might look really daunting if you've never seen this before but the nice thing with this is there's a lot of these options you don't need to make any changes to whatsoever so if you're unsure you can test it out you can see if it does what you want it to or expect it to if it does then you can leave it if you want to set the back you can simply come in and edit your post type nothing you do inside here when you set up your custom post types is irreversible you can see me come in and change anything you want so we want to do things like we want this to be public we wanted to be queryable so in other words if we apply a search filter later on we want this to be something that can be searched against and also things like show you I show now names and so on so you can see we could delete this with the user we don't want to do something like that but the options day if you wanted to what we want to change there were a couple of different values so we say has archived now at the moment this is set to false and the problem with that is if we leave that set as false we won't have an archive available to us to display the vehicles we don't have control over that especially working with the theme builder inside Elementor pro so we need to make sure that in this example if you want to create your custom archives that you set that to be true next up you can see we've got exclude from search we're gonna leave that as is the capability type now as you know or you should know whenever you're working with wordpress straight out of the box you've got a couple of different sort of types of post types you've got posts you've got pages you've got media and so on so what you can do is you can set the capability and it'll take those basic capabilities from that post type inside WordPress and assign that to your default values inside your new custom post type might sound a little complicated but for most examples you're going to leave that set as post because we are creating a custom post type not a custom page or a custom media or anything like that so we're gonna leave that value set to post then we've got hierarchical now hierarchical basically means can we structure this in hierarchy so for example can we have parent and child values so we may say we wanted to put vehicles in and that would be the parent and Ernie that we could then break it down into child components which could be things like motorbikes cars lorries vans and so on so there's a hierarchy in the depending upon the kind of information you're putting in and your custom post type you're creating this may be something you want to set to false or to true entirely up to you we're gonna say we want to set this to true so we could expand it if we wanted to in the future we're going to use most of the default values for everything else gonna come down there you can see it says show in menu we want to make sure this shows up in our menu on the left-hand side I wouldn't say what position do we want this to be placed in so we said that to position one what will happen is that'll put that right at the top of our options on the left hand side so you can position that where you want you can see we've got a range from five to a hundred or whatever you kind of want to do showing many that means will it show it in this new section at the top where you've got inside the dashboard where you can go in and say new post new media new page and so on and also if you have this value this bar available to the user on the front end it will also be available inside there I will leave that set to true even though I don't really use it myself personally then we've got the menu icon and what we can do is we can use dash icons to create a custom I and use that inside the dashboard to separate our different custom post types by default you'll have this little pin but you can if you want to use the dash icons and use those completely free of charge to give yourself a little bit more of a unique kind of look if you click on dash icons you can see that'll take us over and you can see we can now go through and search on here for anything we want so if we were looking for cars or vehicles raining we could find an icon we think it's relevant to us and then we can utilize that inside our dashboard so let's just say we liked the look at this one this little speedometer what we need to do is take this value - icon performance we'll copy that from the Compaq of it into our custom post type we're simply gonna paste that value inside there that now allows us to use that if we wanted to we could choose an image icon so we could click and anything we've uploaded previously we could use that as well if we wanted to next that we've got the supports option now what we covered in the advanced custom fields portion of this the first video I took you through and showed you we can use default tools or default functions inside our post type editor as part of WordPress and those included things like the title the editor the featured image and so on the same works with our custom post types so we're gonna leave title editor and featured image selective because we want to use those as part of our new post type and then we want to add on extra fields on top of it so we're gonna leave those values as they are I'm gonna come down you can see we've got custom supports which we're going to leave those completely empty and then taxonomy so if we wanted to we could associate any of the built in taxonomy is this part of WordPress with this new custom post type for this example we don't want to utilize those we're simply going to keep it to all the things that we've set up just making sure that everything is in place and then we're gonna click on add post type and then we're gonna find this if we take a look on the left hand side we now have a new entry called vehicles and if you click into all vehicles that will show us what we'd normally expect to see which is a list of the vehicles in our custom post type so we've created our custom post type already to start a sign in or changing over the custom field values that we want to assign to this particular post type so we take a look now at our new a custom post type we'll see that it basically is a very very simple post type we've got three things we can do we've got the vehicle name the description or the details and the featured image so the key things you'd normally expect to see inside any kind of post type with WordPress so the next thing we need to do is create or assign our custom fields so we're going to code the custom field section we're going to take a look at what field groups now instead of going through and recreate in all these again we already cover that in the first video so I'm not gonna go over the old ground but I am going to do is come into these details and we're gonna reassign these to a different location so where we've previously set those have to be part of just a normal post type you can see there's our location post type is equal to post we're gonna change that this is one of the nice things about working with tools like advanced custom fields you can test things out make sure they work the way you want and then you can add other things in and then you can reassign where you want to use those particular field groups so what we're gonna do says post type is equal to post we just need to change that now to be used with our new custom post type this is super easy post type is equal to and we just change from post and we come down and we choose vehicle because that's I would do custom post type so now everything else could be left intact all the settings are exactly the same so all we're gonna do is update this and when that's updated we're simply going to come back over into our vehicle section come down we'll choose add new and from there you can now see that all those details that we created in the previous video inside advanced custom fields are all now available to us inside our new custom post type let's go ahead and just create our first vehicle just so we can see how the whole process works so we're just gonna call this TT Roadster so it's a different name to the first one so you drop in some text inside there she was a featured image we'll just choose the TT image set there's our featured image vehicle manufacturer we're gonna say it's a OD favorite color is red petrol type is perfectly fine and we're gonna say that's the specifications for it so let's just add that in a second time there so you got a little bit more text so we put everything we need now into our new custom post type we can hit publish on there and then we now got our first post type all set underneath our vehicles so really straightforward thing to do so while it didn't now it's going to create a couple more vehicles and then I'm gonna take you on to the next stage there we go I've now added an extra vehicle in this we've got a couple of vehicles to work with as we go through and fly this particular video so we've seen how to create our custom post type and how to assign custom fields to it this is perfectly fine if you want to create a fairly simplistic setup however when you want to get a little bit more sort of structured it makes a lot more sense to start adding in some way of grouping your content together whether that's based upon something like the fuel type or cookies and like the manufacturer it could be any number of different things in any number of different scenarios but we need to have a way with a group things together just a structure our information a lot more logically for both ourselves and for the end user this visiting our site well a custom post at UI gives us another option we can use to do just that if you used to work in with post types inside WordPress you've probably used to dealing with things like categories and tags now these are called taxonomy z' the taxonomy czar just ways of grouping your posts whether that's a custom post type or a normal post type inside WordPress itself how we can group those together into logical groupings so what we're gonna do is gonna come to the custom post type UI again this time we're going to choose add edit taxonomy so once we do that that will open up the taxonomy zoo option and you can see there are some things that are the same as when we create a post type there's also some things that are going to be different so we're gonna create a first taxonomy now you can create as many of these as you want to logically group an order your information I just want to show you one but the routine procedure is exactly the same if you want to do it again and again and again so let's kick this off by putting the taxonomy slug in and this again works in exactly the same way as when you created a custom post type no spaces no capital letters so this one is going to be grouping our cars or vehicles by manufacturer next step the plural label so we're gonna drop in manufacturer and add the S on there and then manufacturer for the singular so we created our taxonomy we've given it a Perl and the singular labels next thing we've got then it's attached to post type and if you remember back when I said we will create in our custom post type we could if we wanted to associate that custom post type with some of the built in taxonomy that we have as part of WordPress this unless you do the same kind of thing or we can now attach it to the post type that we want to associate it with which in our example the vehicles so you can see we've got things like posts pages media and so on and they've got WP core in parentheses and that basically means that's WordPress core functionality not something we've created or not something that's part of a third-party plug-in like elemental Pro which gives us my templates so we want the use of vehicles so we're going to add that in there so we now say we've associated that with our custom post type of vehicles it knows where we're going to use that next up we've got the additional labels and this works in fundamentally exactly the same way as what we had we create our custom post types so again if you want to put values in there you can do if you want to leave them as they are that's also perfectly fine next up we have the settings section and again we need to make some changes in here to make sure that it works in the way that we want it to you can read through these it gives you information about each one and again if you make a change and it doesn't do what you expect it to you can come back in and edit your taxonomy and change any values that you set up what we want to do though is we want a set again to hierarchical so we're going to say true for that and we're gonna come down and we're just going to make sure everything else is set the way we want so it says rewrite hierarchical show admin column and so on so we can say we want to rewrite the hierarchical we also want to show admin column now this is a nice little feature that if you look at what we created a vehicle first of all all we had was the title and the date that we created it which is okay it doesn't really give us a lot of information however when we create our custom taxonomies we can specify that's going to be shown inside the dashboard of the admin for our custom post and I'll demonstrate that in a moment so we're gonna say we want to set this to true once we've done that we can come down and make any changes we want inside sure you can see we've got show in quick bulk edit panel again this is one of those things that's very very useful I'll show you what that does once we've created our taxonomy so we're gonna set that value to true as well and then we're just gonna say add taxonomy now once we've done that because we've associated this with our vehicles custom post type if we come up the vehicles in the top left-hand corner you see we now have a new option called manufacturers however if we go to posts we don't see that in a the same four pages or media or anything else is only associated with our custom post type of vehicles so let's just jump in and take a look at all vehicles a moment now you can see we've got what we had previously which was the title the name of the vehicle and the date it was added we now have manufacturers inserted in there because we specified we wanted that to be inside the dashboard inside our admin we also have the option if we come in and take a look at the quick edit and open that up we have the option inside there for manufacturers now currently we don't have any manufacturers to choose from but when we do we can associate those with any of our posts so it's a nice quick way are we on to bulk edit or update anything you want by adding that into your dashboard ok so now that we've created that taxonomy and we've set up all the settings that we want let's take a look and actually adding in some values so what we need to do is come up to manufacturers we can click on there we can now add in some manufacturers so we know we've got a four word in there we know you've got an OD in this let's just say add a new Ford with ADD OD there we go now will add one more would you say BMW and we'll add that so we've now got some values so if we come back up to our vehicles and say all vehicles if we wanted to we could now select these vehicles we can code the bulk actions and say edit and apply and now we have the manufacturers as an option inside there so if you wanted to we could bulk edit things on here however because we only have two vehicles it's not gonna work for us in this instance but what we can't do is we're just gonna come into the Focus ST we'll click inside there and now we take a look on the right-hand side we've got our new taxonomy section for manufacturers so that basically means that this section for vehicle manufacture is no longer actually needed so what we can do is we can get rid of that first of all let's simply go through and say that this is a Ford so we're gonna select that and update and then we'll do exactly the same thing for our Audi and we'll just choose OD from there and hit update so we've now created a taxonomy and we've done away with a need for this vehicle manufacturer so all we can do now is simply come to the custom fields into our field groups open up our vehicle details and from there we can now scroll down and find any values that we don't want so we've got the vehicle manufacturer is no longer needed so we simply delete that from there and say yep we want to get rid of it we'll update that now come back to our vehicles and take a look at oil vehicles and just open up one of those to edit it and you'll now see that we no longer have that value inside there because we've started to organize our data in a much more logical fashion using our taxonomy x' so now that we've created a custom post type the template we created in the previous video is now pretty much useless to us so we're going to do is we're going to get rid of that and we're gonna create a new template specific to our vehicle post type just go to our templates and come down to our theme builder once we're inside there you can see we've got default archive so we're going to do is we're gonna get rid of that so we're just going to delete that and drop it into the bin I'm gonna create a new one so we gonna say add new from there we're going to choose an archive and then we're gonna call this default vehicle archive okay so we're gonna say create our template and we can go to the same process that we had the first time but the difference is we're going to set up a different condition for how we're going to display this information so we're gonna do is going to close this down and we're simply gonna drop in and create our own custom archive so let's drag our archive widget over drop that on there and we're simply gonna come in and add a little bit of space above and below just so we've got a bit of breathing room unless you can see it says well we can't find what you're looking for and the reason being is is because it's looking for just a default post type inside WordPress and I've already gone ahead and deleted the vehicles we created in the previous video that were just part of the normal posts inside WordPress so we no need to tell it what we want to use and what we want to display so first thing we do is coming to the little settings cog in the bottom left-hand corner of Elementor click on there and then we've got preview settings click on preview settings and you can see it says recent posts what we want to do is come down and choose a vehicle's archive now it knows because we've created this new custom post type and we assigned it to have archives inside the custom post type UI settings it allows us to actually use that as a reference to display data so we're going to choose a vehicle's archive hit apply in preview and after second su-- we should find there's our new vehicles that we've added in or pulled in from our custom post type so we've now created those we pulled that information in so all looking pretty good as we did in the previous video we can come in and fine tune and tweak the various different parameters the design and so on so we can say we can do all those kinds of things and that's looking perfectly fine I'll leave that as is we're gonna hit publish that's going to take us back into our add conditions option and this time we're gonna set a different condition to what we did in the first example in the previous video add condition and it says all archives which is not what we wanted to do now you could use this if you didn't intend to have any other kind of custom post types you could just sign this template to every single archive that may ever be used inside your design however if you were dealing with multiple different custom post types each of those post types may need to have a different archive design but we can do that inside element or protein builder all we need to do which says all archives is click on them and you can see because we've created that vehicle archive we now have additional options specific to the vehicles archive before we only had post archive now we can use the vehicle archive so we're gonna do is we're going to say vehicle archive that's what we want to do when you use that I'm gonna set that to be the right kind of condition for this I'm gonna say save and close we've now created our custom archive with the template or design the specific to that custom post type I hope that makes sense once you've done that we know how finished with that section so we can simply come out of this exit to our dashboard I was now created our archive page so let's take a look at this in action so to make this easy to find what we're gonna do is we're going to convert this exit or dashboard we're going to come into our appearance section and come down to menus and here we're going to create a new menu item specific for the template or the archive template we've just created to do that always do is come to custom links inside here we're gonna get rid of all this and we're just simply gonna put in vehicles with a forward slash at the beginning and the end and next we're gonna say View vehicles now let me explain where we get this information from why do we know or how do we know that the URL is vehicles well let's come back over to our custom taxonomies and we created our custom post type and we named it with the post slug vehicles as you can see here so that slug is the unique link to go to that particular post type and use the archive that we just created with that in place we're going to say add to menu let that add-on in there and save our menu then we can jump over to our test site and take a look so let's come over to our test site we'll visit our site and take a look at the top there's view vehicles I'm gonna click on there and I'll take us through and there is our new custom archive using the design we've just set up all created using custom post types and custom taxonomies and so on we click and go take a look inside there we've now still got that default kind of layout which isn't what we necessarily want so we need to change that and rectify that now because we'd already created this single post template that displays all of that custom post data we can reference that quite easily so we can do is we can come back into a template section into our theme builder and from there we're going to go into a default single template again so we're gonna go in edit with Elementor and once we decide there all we really need to do is change weird pulls the data from so all the information is ready for us all the template layer is there ready for us what we need to do is come down to the save options click on lis and we can update our display conditions click on display conditions and from there we can now go through and choose what we want to use to display this data now by default we see we've got the previous settings which is to include posts and all of them which isn't what we want so we need to do is choose the first option and from there you can see we've got vehicles which there are custom post type we're gonna say vehicles and then we're gonna leave that set at all so this is now going to use any of the data pulled from our vehicles custom post type and display that hit save and close once we've done that we can simply exit out of this exit to our dashboard we've done that we can come back over our test site we come back in and we visit our site we're coming in view our vehicles there's our new custom archive page and we click and take a look at our TT we'll go in and you can see there's the data that we wanted all pulled in ready for us so everything is looking the way we'd expect it to we have not to go back in and create everything but if you were doing this from scratch I'd highly recommend you take a look at the first video where I go over through exactly how you set all these details that display everything that you want to now if we come back to our archive page and take a look at this it doesn't really do any justice to what we create in other words we've got the vehicle picture the name of it and then some description information but it doesn't tell us any more than that we've got a click to go into the actual vehicle details and see exactly what's available so example the things like the color the engine and any other information we want to create as part of our meta fields well there's got to be a better way of doing that and there is however we can't do that with elemental Pro alone we need to have another plug-in now this is a free plug-in again so it gives us the ability to go in and create custom loops Before we jump in and take a look what our plug-in is let me just explain what we're going to be doing if we take a look at this screen in front of us the archive we are effectively using the WordPress loop now if you consider the loop to just be to repeat information on screen and loop it set number of times per page so let's just say you set up WordPress to have nine vehicles per page and then you go to the next page for another nine and so on that's displaying the loop now each one is individual items is part of that loop so what we are going to create is we're going to create one of these individual items we're going to create the template to display that then we're going to utilize that inside the WordPress loop to repeat it so it's just gonna replace the look of this with the data that we want to pull in and that's all its really doing so don't worry too much about the technical aspects behind it so when I'm talking about the WordPress loop that's what I'm talking about we're just repeats those entries one after another a set number of times for each individual page okay so let's come back over into our dashboard we're going to come back into a plug-in section we'll come down to add new from there with a little search for Ellie custom skin now there is a pro version of this available but you don't need that to do what we're going to cover in this particular video so once we found that you can see it Elementor custom skin we're going to install that once that's installed we can now go through and take a look at how we can start to use it so let's activate that as you can see it's got over 10,000 active installs and of five-star rating so it is a great plugin and like I say the free version does more than we needed to so get rid of any of these nag messages on there and we're gonna do and come back into our templates into our theme builder and you'll see we now have a new entry called loop so we now can create those templates that we use as part of our custom loop click to come into the loop option and you can see in the same way we'd expect with any of the templates inside Elementor Pro where I say add new from there we're gonna give this a name we're going to call this default vehicle loop well click to create our template and then we'll go into the normal element or editor we have many templates selected for this so we're gonna just close that down so we're going to start creating the various different aspects you can see we've got the single post icons available to us on the left-hand side so we can start to use those if we want to I'm pulling the various little pieces of data that we've got as part of a typical post let's create that we'll first loop then first thing I do is come out to a settings section and from there I've changed this template now even though it won't use this we just want to get rid of it just to make sure that we don't have any distractions or we're creating things so and then what the page layer is set to default we're gonna set this to element or canvas to get rid of that header and footer once we've done that kind of the preview settings and you can see we could put in what dynamic data do we want to use then I click on the we'll just choose vehicle and all is perfectly fine so we'll say apply and preview and that will then give us the ability to now use the actual data from one of our vehicles when we're building out this layout so there's our vehicle already inserted in there for us we can change a the values we want to want here so you've got the image size and so on so we can set the alignment on their cheesy image size will sell at a medium large because we don't need it to be sort of full width that's gonna be a little bit too big and also slow down the page load the link we're going to set this we want this to go through and take you through to the vehicle so all we need to do is click on link we say custom URL and from there we can click on the dynamic icon if you're ever back to the previous video where we took a look at ACF and how we can start using dynamic data this just opens up the opportunity to start using various different features in sight either advanced custom fields or WordPress itself and use those where we need them to so for this we're gonna say we want this to go through to the post URL so that means if we click it it'll take you through when you can view the vehicle next let's come back out of this and we're going to say we want to put in the actual post title so we can say what vehicle it is click on there see TT Roadster we'll change that to a smaller heading and if we want to we can come in and easily style this down any way that we want to just to make sure that everything sits nice and neat and tidy in our design and we'll just say uppercase there it girl so we can do now is we can simply put in anything that we want to so let's say we want to do something like pulling the manufacturer now the manufacturer if you remember isn't part of the custom post type it's it's own separate taxonomy so how do we reference that well we can do exactly that we will just drag and drop in this text editor field now you can use any of the other fields you've used headings if you wanted to it's entirely up to you it all comes down to just how you want to format that data afterwards click on dynamic and in there we've got a lot of different options what we want to choose is post terms to click on there that now just pulls in the ability to use a post term but we've got to tell element or what we want to use what post term it is we want to use click on the little ranch icon and from there you see we've got taxonomy click and expand we've got the default ones you'd expect with WordPress categories and tags we also have manufacturers which is the custom taxonomy that we've created we're gonna click on that and you see that immediately pulls Ian OD click on down to advanced and we're just gonna put in before manufacturer and we'll put a full column in the space and we can now see that we've pulled in that relevant data so that's pretty cool now there's another thing that we have that's part of this le custom skin is a new option we have when you use that and you have that installed normally if you try to add in an excerpt you either have the option for post excerpt which is as you would expect the custom or the meta field that you have as part of a post type which is post excerpt so it's another field you'd have to fill out it's not always the best way of doing things however let's just pull in this text editor again drop that in there come back over and choose dynamic and you see we have a new entry called post summary this is specific to Elementor custom skin what this will do is in the same way you'd expect it to when you create a normal post and you use the normal archived loop you'll have a brief section Neath it'll pull it from the description of your post this is doing exactly the same thing but now works alongside our custom post types so with that in place we can count the style tab we can set any values we want inside there the content all those kinds of things that we expand this out you can see we have the option for the number of characters or words that we want to use and again we also have advanced so we could say if we wanted to we could put in we'll just print a little bit of HTML code and we'll say description full colon and we'll just close that HTML code down just so it makes that little bit more bold at the beginning so you can see now it makes a bit more sense so that looks pretty good I like the look of that and finally what we could do is we can if we wanted to come back out of this and say we wanted to drop in a button in today so we just scroll down find a button drop that underneath there and we can do is now we can start using dynamic data on here as well so we could if we wanted to change the text from there and use anything from here so let's just say we want to pull in the details of the name of the car them the actual vehicle itself so we're gonna do say post title and you see it says TT Roadster click on the little wrench icon and come down to the before and after and we can just put in view so a space and after space and end details so we now have a custom button that'll pull in the dynamic information from the post title and sit in between the words view and details so it makes them much more sort of obvious button as to what's going on next up we need to put a link in there and we're going to do is going to click on the dynamic option again and we're just going to say post URL in exactly the same way we did with the vehicle picture okay so we've now created that were basics of this particular loop item this template for the loop so we're gonna do is gonna hit update on there save and close because we don't want to apply any conditions to it we've now created that we can now go through and tell it where to use it to come out of this exit or dash what I'm gonna come back into a theme builder once you're inside our theme bells are going to go back into our default of vehicle archive edit that with elemental now you'll remember when we created this we just used the normal archive widget which is again like I say perfectly fine but it uses only a couple of different layouts that are predefined and we have no control however just selecting that now look under the skin section and click and open that up we now have a fourth option called custom if we choose the custom option that'll open up a range of different options that are only available when you have elements or custom skin installed so the first thing we have is select the default template that it will select the template we've just created that we want to use click there's our default vehicle loop click on there and you see that now pulls in the design that we've just created now the options underneath are for the pro version so you can see they're all locked we can't actually access those so if you want those you're gonna have to go for the pro version however like I say you don't need it you can use it as it is and it'll still do a fantastic job of allowing you to create a custom loop template you can choose the number of columns you want you to set this to be two if you wanted to three for whatever you kind of want on there but this gives us a lot more option as you can see we now have a template that's used inside our custom archive loop which gives us the ability to pull in any data that we want a style it any way we want and then make it a much more unique layout so if we jump over to our test page you can see this I will lay out there's our custom loop you can see we can click on the image to go through the vehicle details or we can click on the button to go through to the vehicle details as well now when you use custom post type UI alongside elements or custom skin and advanced custom feels an element or pro you have an incredibly powerful platform to be able to develop and build much more unique WordPress websites without relying upon additional plugins on top of that to do various different things just gives you a great solid foundation to be able to do a lot more with WordPress whether we go that's how we can take advanced custom fields elemental Pro and some other tools and start to create way more advanced WordPress websites hopefully this video along with the previous one has whet your appetite to the kinds of things you can do with this fantastic combination of tools best part is it opens up more opportunities for you to make more money if you look at the do this commercially well as always all the links are in the description below for everything we've covered in this video and if you'd like to get any comments questions or feedback out they dropped us in the comment section below let's get a conversation started and tell me how you can see yourself using these tools in the future well as always my name is Ben posse this has been wptouch and until next time take a

Channel: WPTuts

Views: 73,119

Rating: 4.9642568 out of 5

Keywords: how to display custom post type in elementor, how to display custom post type in front end, how to display custom post type in frontend wordpress, how to display custom post type in wordpress, how to display custom post type taxonomy in wordpress, custom post types, wordpress custom post types and custom fields, wordpress custom post types and taxonomies, elementor page builder tutorial, elementor pro tutorial, elementor wordpress, cpt ui elementor, wptuts acf

Id: UBy1cd-N1q0

Length: 38min 17sec (2297 seconds)

Published: Tue Nov 19 2019