Transcripts
1. Course Introduction: welcome to my second skill share course on building more advanced WordPress websites with elemental pro on advanced custom fields. Now, if you haven't seen the first part, I recommend working through that course. First place a link tonight in the course description below. Now, in this course, I'll guide you through the process of creating your own custom. Post types tell you, create more unique website structures now, while the techniques covered a perfectly fine to be used alone, I did advanced custom fields. Even the free version opens up a lot more possibilities now, where the time you completed both these courses, you'll be ready to take your WordPress and elemental pro skills to the next level. You'll be able to build much more unique and feature rich websites using WordPress. Anyway, that's enough of the benefits. Let's get started with a custom post types
2. Custom Post Type UI: 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 could see all the dedicated information, the custom fields We added to those vehicle posts. Now, this is pretty basic the way we did this in the first video. It is a good introduction to what Metta feels are and how we can use those with the default WordPress set up. So in other words, we 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 on adding custom fields to the normal post op in WordPress on. 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 card, agrees you may have cars, you may have Lorries. You may have all right manner of different kinds of post types. It starts to get just a little bit unwieldy. When you tried to shoehorn all of those into a typical post is much better to use custom post types. And that's what we gonna do so that we talked about what custom post types are. How do we go about actually creating our own custom post types with the website we're working on? Well, one the nice things about WordPress is with the repository of all these plug ins. There are tons of options available, and today we're going to be using a free plug in called Custom Post Type you, I or cpt you I So we're gonna do is come into the plug in section Commander Adnan. I'm simply gonna search for custom post type. And there you go. There's our plug in so we don't click on install. Now let that download and install, once especially stolen, will activate it, and we'll have a new entry then inside a WordPress dashboard. So let's activate that once that's activated. If we take a look on the left hand side in our dashboard will see, we now have a cpt you I So this is going to give you an overview of what's available in the latest version on as all recording this video, you can see version 1.71 is the latest version. So what do we actually start doing to use these custom post times where we take a look on the left hand side underneath the cpt you I 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 tapes and taxes, tools, help of support on about CBT y, which is what we're currently looking at. Now for this video, we're going to concentrate on the 1st 2 options. The first half of this video. We're going to take a look, a custom post types, and then later on, we're gonna take a look, attacks on Amis and explain what they are and how we can gives those to better organized the custom post had content. We're going to create this stand off with the edit post types
3. Creating Our First CPT: 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 ways we had with advanced custom fields in the previous video, we've got things broken down into various different component parts. We're gonna take a look at today of the key things that you need to do. I'm not gonna cover everything inside your 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 on auto populate labels. So we're gonna do, First of all, is give this slug. Now, we're gonna be dealing with vehicles, so we're gonna just type in vehicles must have done that. Most important thing to remember here is whenever you're dealing with a slug, you need to make sure you don't use spaces, capitals or ignored. And if you want to put a space into separate something, you need to use either an underscore or the minus sign to create that separation. Next that we have the plural label. So we're gonna just type in vehicles inside there, and then a singular label is going to 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 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 he wanted to leave it the and we could add this post tight and we have the very basic set up. However, there is still a couple of things that I want to go through and show you on a couple of settings that I want to change to make sure this works the way that we needed to. So this scroll down to the additional labeled section. The additional labels are completely optional. These are the kinds of things that they 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 four you can drop in a description. They then we have things like the man you 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 time. 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 time and delete any the values you don't want. What we do want to look at, though, are the setting 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 wanted to or expected 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 you when you set up your custom post types is irreversible. You can seem to come in and change anything you want. So we want to do things like we want this to be public. We wanted to be queria balls. In other words, if we apply a search filter later on, we want this to be something that could be searched against. I also think that show you why show not names and so on So you could see we could delete this with the user. We don't want to do something like that with the Options Day if you wanted to. What? We want to change the a couple of different values. So we say has archive. Now, at the moment, this is set to false and the problem with that is, if we leave that set us false, we won't have an archive available to us to display the vehicles. We don't have control over that, especially when we're working with the theme building inside Elemental 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 step. You 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 of the box, you've got a couple of different sort of types off 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 will take those basic capabilities from that post type inside WordPress on. Assign that to your default values. Inside the new custom post type might sound a little complicated, but for most examples, you're going to leave that set his post because we are creating a custom post type, not accustomed page or a custom media or anything like that. We don't need that value Set the post, then we've got a hierarchical. Now, hierarchical basically means come. We structure this in hierarchy. So, for example, can we have parent and child values? We may save you wanted to put vehicles in, and that will be the parent underneath 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 were going to say we want to set this to true so we could expand it if we wanted to. In the future, we're gonna use mortar. The default values for everything else will come down there and you see, it says showing menu. We want to make sure this shows up on our menu. On the left hand side, I'm going to say, What position do we want this to be placed in? So we set that to position one. What will happen is that will put that right, the top of our options on the left hand side so you can position that where you want. You see we got a range from 5 to 100 or whatever you kind of want to do showing many that means, will it show it in this new section of the top, where you've got inside the dashboard, where you can green to 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 they, I believe that set to true, even though I don't really use it myself personally. Then we got the menu icon on. What we can do is we can use dash icons to create a custom icon and use that inside the dashboard to separate out different custom post times 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 see that'll take us over and you can see we can now go through and search on you for anything we want. So we were looking for cars or vehicles, anything we could find. Icon, we think, is relevant to us, and then we can utilize that inside our dashboard. So let's just say we like the look of this one. This little speedometer or we need to do is take this value. Dash Icons Performance will copy that from the come back over into a custom post type was simply gonna pace that I value inside there. That now allows us to use that. If you wanted to, we could choose an image icons. We could click on anything we've uploaded previously. We could use that as well if we wanted to. Next that we've got the supports option now will be covered in the advanced custom fields portion of this. The first video took you through and showed you we can use default tools or default functions inside. Our post type editor is part of WordPress on 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 feels on top of it. We're gonna leave those values as they are they're gonna come down, you can see we got custom supports, which we're going to leave those completely empty and then taxonomy. So if he wanted to, we could associate any of the built in taxonomy. Is this part of WordPress with this new custom post time for this example we don't want to utilize. Those were 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 we're gonna find this. If we take a look on the left hand side, we now have a new entry called Vehicles, and 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 time. So we've created our custom post time 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 custom post type, we'll see that it basically is a very, very simple post eight. We've got three things we can do. We've got the vehicle, name the description or the details on the featured image. So the key things you'd normally expect to see insight, any kind of post type with WordPress. So the next thing we need to do is create or sign of a custom fields. So we're gonna go to the custom field section. We're gonna take a look at our field groups instead of going through and re creating all these again. We've already covered that in the first video, so I'm not going to go over the old ground. What I am going to do is committed these details, and we're gonna reassign these to a different location. So where we 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 advance custom fields. You could 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 without a new custom post type. This is super easy. Post type is equal to on. We just change from post on. We come down on, we choose vehicle because that's I want you custom post time. So now everything else could be left intact. All the settings are exactly the same. So we're gonna do is update this when that's updated with similar to come back over into a vehicle section come down, which you are new. 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 Insight. Our new custom post time. Let's go ahead on just create our first vehicle just so we can see how the whole process works. So he's gonna call this T T Roadster, so it's a different name to the 1st 1 so you drop in some text inside their choose. The featured image will just use the TT image set. That's our featured image vehicle manufacturer. We're going to say it's OD. What color is red petrol type is perfectly fine on. We're going to say that's the specifications for it. So that's just add that in a second time there's a little bit more text. So we put everything we need no, into a new custom post type. We can hit. Publish on there. And there were no got our first post type all set underneath our vehicles. So really straightforward thing to do. So why they didn't know. It's gonna create a couple more vehicles and then I'm gonna take you on to the next stage.
4. Organising Content with Taxonomies: There we go. I've now added an extra vehicle in this. We've got a couple of vehicles toe work with as we're going through and fleshing out this particular video. So you've seen how to create our custom post type of how to assign custom fields to it. This is perfectly fine if you want to create a fairly simplistic stata. However, when you want to get a little 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 could reason like the manufacturer, it could be any number of different things in any number of different scenarios. But we need to have a way of of the group things together, just a structure, our information a lot more logically for both ourselves on for the end use of this visiting our site well, custom post that you I gives us another option we can use to do just that. Have you used to work in with post types Inside WordPress? You're probably used to dealing with things like categories and tags. Now these are called tax on Amis attacks on Amis are just ways of grouping your posts. Whether that's a custom post type or a normal post type inside WordPress itself, how weaken group those together into a logical groupings. So what we're gonna do is gonna come to the custom post at you again. This time we're gonna choose add edit taxonomy. So what we do that that'll open at the taxonomy is 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 gonna be different, so we're gonna create a first taxonomy. Now, you can create as many of these as you want to logically group on. 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, let's kick this off by putting the taxonomy slugging. And this again works in exactly the same way as when you created a custom post type no spaces, no capital letters to this one is gonna be grouping our cars or vehicles by manufacturer next up the plural label. So we're gonna drop in manufacturer at the S on the on the manufacturer for the singular. So we created our taxonomy. We've given it the pool on the singular labels next time you've got, then it attached to post type. And if you remember back when I said we were creating our custom post type, we could, if we wanted to associate that custom post type with some of the built in taxonomy is that we have as part of WordPress this unless you did the same kind of thing, All 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 on they've got WP court in parenthesis, and that basically means that's wordpress core functionality. Not something we've created or not something that's part of 1/3 party plug in, like elemental pro, which gives us my templates. So we want to use of vehicles. We're gonna add that in there. So we know, 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 that we have the setting section. And again, we need to make some changes in here to make sure that it works in the way that we wanted 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 expected to, you can come back in and edit your taxonomy and change any values that you set out. What we want to do, though, is we want to set again to hierarchical. So that's a true for that. We're gonna come down and we're just gonna make sure everything else said the way we want. So it says rewrite, hierarchical show, admin column and so on. So you 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 will be created a vehicle. First of all, all we had was the title on the date that we created it, which is okay, but it doesn't really give us a lot of information. However, what we create our custom taxonomy is we can specify that's go to be shown inside the dashboard off the admin for our custom posted. Don't demonstrate that in a moment we're gonna say we want to set this to true. Was he done that? We can come down and make any changes we want inside. Sure. You 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, we're gonna set that value to true as well. And then we're just gonna say, add taxonomy. And once you've done that, because we've associated this with our vehicles custom, post time, we count 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 there. The same for pages or media or anything else is only associated with a 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 on the date was added. We now have manufacturers inserted in there because we specify 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 from 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 beyond the bulk edit or update anything you want by adding that into your dashboard. Okay, so now that we've created that taxonomy and we've set of all the settings that we want, let's take a look at actually adding in some values. So we need to do is come out to manufacturers. We can click on may. We can now add in some manufacturers, so we know we've got a Ford in there. We know we got already in this, I should say add a new Ford OD. Maybe go. We'll add one more. Would you say BMW will add that? So we've no got some values. So we come back out to our vehicles and say all vehicles If we wanted to, we could know Select these vehicles. We conclude the bulk actions and say edit on apply. And now we have the manufacturers is an option inside there. So if you wanted to, we could bunk 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 do it come into the focus, Esti. We'll click inside there, and now we take a look on the right hand side. We've got a 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. We're going to select that update on they will do exactly the same thing. For our I would be I would just use Audi from the on hit update. So with no created a taxonomy and we've done away with the need for this vehicle manufacturer, so we can do now is simply come to the custom feels 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 got the vehicle. Manufacturer is no longer needed, so we can simply delete that from there and say, Yep, we want to get rid of it. We'll update that name, come back to our vehicles and take a look at oil vehicles on it. Just open up one of those to edit it, and you're no seed that we no longer have that value inside there because we started to organize our data in a much more logical fashion, using our tax on Amis
5. Creating Archive Template: So now that we've created a custom post at the template we created in the previous video is now pretty much useless to us, So we're gonna do is we're gonna get rid of that. We're gonna create a new template specific to our vehicle post type, just going to our templates and come down to a theme builder. Once inside there, you can see we got default archives. So we're gonna do is we're gonna get rid of that. We're going to delete that drop into the bin. I'm gonna create a new one. So they say, add new from there, we're gonna choose an archive, and they were gonna call this default vehicle. Okay, so I'm gonna say create our template and we go through 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 gonna display this information. So we're gonna do is gonna close this down on with simply gonna drop in and create our own custom archive. So that's drug archive, which it over drop that on there and was simply gonna come in and add a little bit of space above and below. Just we've got a bit of breathing room, unless you can see it, says, Well, we can't find what you're looking for on. The reason being is because it's looking for just a default post type inside WordPress already gone ahead and deleted the vehicles we created in the previous video that we're 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 of all you do is coming into a little settings cog in the bottom, left hand corner of elemental. Click on the and then we've got preview settings. Click on previous sentence and you'll see it says recent posts. What we want to do is come down and choose vehicles archive. Now it knows, because we've created this new custom post time on. We assigned itto have archived inside the custom post type US settings. It allows us to actually use that as a reference to display data, so we're gonna choose the vehicles archive hit, apply in preview after second, so we should find there's our new vehicles that we've added in or pulled in from our custom post time. So we've now created those we pulled that information in. So all looking pretty good. And 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 you say we can do all those kinds of things looking perfectly fine. I'll leave that, as is we're gonna hit Publish. That's gonna take us back into our ad conditions option. And this time we're going to set a different condition to what we did in the first example in the previous video. Our condition. He says. All archives, which is not what we wanted to do. You could use this if you didn't intend to have any other kind of custom post types. You could have just signed 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 posters may need to have a different archive design. But we can do that inside elemental pro steam builder or wanted to do away says all archives is click on there 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 gonna say vehicle archive. That's what you want to do. We use that we have set out to be the right kind of condition for this. Well, say save and close. We've now created our custom archive with a template or design the specific to that custom post type hope that makes sense. What's he done that we know have finished with that section? So we constantly come out of this exito a dashboard. I was no created our archive page. Let's take a look at this in action. So to make this easy to find, what we're gonna do is we're gonna come out this exito dashboard where the current or appearance section, and come down to menus. And here we're gonna create a new menu items specific for the template or the archive template we just created to do that. Always do is come to custom links inside. You were gonna get rid of all this, and we just simply gonna put in vehicles with a four slash at the beginning and the end on next, we'll say view vehicles that may explain where we get this information from. Why do we know? How do we know that the euro is vehicles? Well, let's come back over to our custom. Taxonomy is on. 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 and to menu let that I've done in there and save our menu that we can jump over to our test site and take a look. So let's come over to our test site will visit our site on a particular at the top. There's a view vehicles click on the little tickets through, and there's our new custom archive used in the design we've just set up or created using custom post types on custom tax on a reason. So on the Clinton go take a look inside there. We've no still got that default kind of layer which isn't what we necessarily want. So we need to change that and rectify that. Because we'd all recreated the 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. From there, we're gonna go into a default single template again. We're gonna go in edit with Elemental. Once inside, they all we really need to do is change where it pulls the data from. So all the information is ready for Russell. The template layer is they're ready for us. What we need to do is come down to the save options. Click on there and we can update our display conditions. Click on display conditions. And from there we could know Go through and choose what we want to use to display this data by default. We see we've got the previous settings, which is to include posts on all of them, which isn't what we want. So we need to do is choose the first option on from the you can see, we've got vehicles which there were custom post time. We're going to say vehicles and then we're gonna leave That said that all. So this is now going to use any of the data pulled from, oh vehicles Custom post type on display that it's saving close. Once we've done that, we consume be exit out of this, actually told dashboard, well done that we can come back with our test site. We come back in and view visit, oversight will come into view of vehicles. There's a new custom archive page and we clicked and take a look at our Titi will 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 expected 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 when I go over through exactly how you set all these details have to display everything that you want to
6. Custom Archive Loop with Ele Custom Skin: If we come back to archive page and take a look at this, it doesn't really do justice to what we're creating. In other words, we've got the vehicle. Picture the name of it on, then some description information, but doesn't tell us any more than that. You 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 is part, oh matter Fields. Well, there's gotta be a better way of doing that. And there is, however, we can't do that with Elemental Pro alone. We need tohave another plug in. Now this is a free plug in again, so it gives us the ability to grow and create custom loops on before we jump in and take a look without plug in is, let me just explain what were going to be doing If we take a look at this screen in front of us, the archive were effectively using the WordPress loop. Now, if you consider the loop to just be to repeat information on screen on loop, it set number of times per page so Let's just say you set up WordPress toe have nine vehicles per page and you got 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're going to create is we're going to create one of these individual items. We're gonna create the template to display that. Then we're going to utilize that inside the WordPress looped to repeat it. So it's just gonna replace the look of this with the data that we want to pull in. That's all it's 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. Where just repeats those entries one after another, a set number of times for each individual page. Okay, so it's come back over into our dashboard, gonna come back into a plug in section will come down to add new. From there, we could do a 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 gonna cover in this particular video. So Once we found that you see element of customs skin, we're gonna install that once that's installed, we can now go through and take a look at how we can start to use it. So it's activate that. As you can see, it's got over 10,000 active installs on our five star rating. So it is a great plug in and let me say the free version does more than we needed to. So given many of these nag messages on, there were due to come back into our templates into our theme builder. And you'll see we now have a new entry called Loop so we know 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 Elemental Pro were say add New from there, we're gonna give us a name. We're gonna call this default vehicle loop, we'll click to create our template, and then we'll go into the normal elemental editor. We have any templates selected for this? We'll just close that. Damn. So we're gonna know. Start creating the various different aspects. You can see we've got the single post icons available to us on the left hand side to start to use those. If we want to pull in the various little pieces of data that we've got as part off a typical post, let's create our first loop. Then first thing to do is come into our setting section and from there change 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 of creating things. So the page layout is set to default. We're going to set this to elemental canvas to get rid of that header and footer. Once you've done that kind of the preview satins and you can see, we could put in what dynamic data do we want to use a click on? There were Just choose vehicle on. All is perfectly fine to say. Apply and preview on 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 a vehicle already inserted in there for us. We can change and the values we want to One furiously got the image size and so on so we could set the alignment on their cheesy image. Size will set out 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 gonna set this. We want this to go through and take you through to the vehicle. So we need to do is click on Link with a custom URL, and from there we can click on the dynamic icon. If you ever practice the previous video where we took a look at a CF and how we could start using dynamic data, this just opens up the opportunity to start using various different features inside 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. U r l So I mean to be 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 you say what vehicle it is click on there, See TT Roadster will change that to a smaller heading. And if we want to weaken, coming it easy, stale this then anyway, that we want to just make sure that everything sits nice and neat and tidy. In our design, I will just say up a case that we go so we can do now is we can simply put in anything that we want to. So let's say you want to do something like pulling the manufacturer. Now The manufacturer, if you remember, isn't part of the custom post type. It's its own separate taxonomy. So how do we reference that? Well, weaken do exactly that. We're just drag and drop in this text editor field. Now you can use any of the other fugitive use headings If you wanted to. It's entirely up to you. It all comes under just how you want to form up that data afterwards. Click on dynamic on in the We've got a lot of different options. What we want to choose is post terms to click on there that just pulls in the ability to use a post tune. But we've got to tell elemental what we want to use, what post term it is. We want to use Click on Little Ranch Icon, and from there you will see we've got taxonomy clicking expand. We've got the default. Once you expect with WordPress categories and tags, we also have manufacturers, which is the custom taxonomy that we've created. So we'll click on that. You see that immediate Posey and Audi come down to advanced, and we're just gonna put in before manufacturer, and we put a full call in the space. We can no see that we've pulled in that relevant data, so that's pretty cool. There's another thing that we have this part off this Ellie custom skin is a new option we have. When you use that, you have that installed normally, if you try to add in it, except you either have the option for post excerpt, which is, as you would expect, the customer or the matter feel that you have as part of a post type, which is post excerpts. So it's a Netherfield 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 elemental customs skin. What this will do is in the same way you'd expected to. When you create a normal post and you used the normal archive loop, you'll have a brief section of neat little Pull it from the description off your post. This is doing exactly the same thing, but now works alongside of a custom post types. So with that in place, we can call it the style tabling 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 on again. We also have advanced, so we could say, if you wanted to, we could put in. We'll just put a little bit of hasty metal code and we'll say description for Colon, and we'll just close that Hey, html code down. Just it makes that a little bit more bold at the beginning so you can see now it makes much more sense, so that looks pretty good. I like the look of that. They're finally What we could do is we can everyone to come back out of this and say We want to drop in a button into there So just scroll down, find a button dropped out underneath there. When 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, the the actual vehicle itself. So we're gonna dio It's a post title, says TT Roadster. Click on the little ranch icon and come down to the before after we just put in view for space on after space and then details. So we now have a custom button little pulling the dynamic information from the post title on Sit in between the words, view and details. So it makes it much more sort of obvious button as to what's going on next that we need to put a link in there and we're gonna do is gonna click on the dynamic option again. And we're just going to say Post you are l in exactly the same way we did with the vehicle picture. Okay, so we've no created that were basics off this particular loop item. This template for the loop so we're gonna do is gonna hit update on their saving close because we don't want to apply any conditions to it. We've no created that we can no go through and tell it where to use it. It's gonna come out of this exit, your dashboard. I'm gonna come back into a scene builder once inside our theme. But I'm going to go back into our default of vehicle archive edit that with elemental. Now, you'll remember when we created this, we just use the normal archives widget, which is again like it's a perfectly fine, but it uses only a couple of different layers that are pre defined and we have no control. However, just select in that now look under the skin section and clicking. Open that up. We know have 1/4 option called custom. If we choose the custom option that will open up a range of different options that are only available when you have elemental customs skin installed. The first thing we have is select the default template that it was. 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 no 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 to say you don't need it, you can use it as it is, and it'll still do a fantastic job off, allowing you to create a custom loop template. You can choose the number of columns. You want you to set this to be, too, if you want it to 34 whatever you kind of want on there. But this gives us a lot more options. 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. Style it Anyway, we want and then make it a much more unique layout. So we jump over to our test page. You can see there's ever layout. 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 op you I alongside elemental custom skin on advanced custom fields , an elemental pro, you have an incredibly powerful platform to be able to develop and build much more unique WordPress websites without relying upon additional plug ins. 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.
7. Bonus Lesson Introduction: So now that we've gone to the process of using custom post help you I linking it through with advanced custom fields and started created more advanced WordPress websites. This bonus lessons going to take you one step further again, we're gonna take the data that we created in cpt. You Why? We're gonna use that to create our own custom plug in for WordPress, and then we can get rid of cpt. You white remove the need to keep updating things because our little plug in that does everything we needed to. Well, it doesn't need to update because nothing's going to change in there. So if you're interested and find out how you can create your first WordPress plug in how you can use that to display your custom post type information, join me in this bonus lesson. I'm gonna demonstrate exactly how to do just that.
8. Bonus: Creating A Custom Post Plugin: So in the plug in section off my wordpress site, you can see the last plugging we have is WP tests. Cpt, this is my custom plug in, and it does one simple job. It sets up the taxonomy is and it sets up the custom post times we can see those in the things like dealerships. If I scroll up a little bit, you can see I've got vehicles inside vehicles. We've got manufacturers. We got options page set up. So all these things are custom post types. The reason why I've put it into a plug in is something that was suggested, which makes a lot of sense. If you do this in the functions PHP file off your theme. If you change themes, then you kind of lose that. And you've got to start again. If you create yourself a nice, simple, clean plug in to do exactly the same thing to reference those normal functions to create our custom post tapes and taxonomy is and so on. It's independent of everything so we can change themes. We can add plug ins, whatever we want, and it stands alone Now do you need to worry about updating this Not really, because all you're doing is creating custom post types. There's no real functions other than that inside there. So once they created and registered, So it's doing so providing on your code is nice and clean. You should be good for evermore. Okay, with that being said, how do we go about creating an exactly same kind of thing? Is this so let's just take a look at that right now. So first things first, I've gone ahead and deleted that. So you see now that once that's been deleted all of our custom post types, my taxonomy is have all been taken out of the left hand side because they're no longer being referenced. Okay, So what's he done that we need to get into the final manager for a particular site? You can do this in multiple different ways. I'm going to be used in sight groans final manager. But you accuse an FTP the file manager that comes with whatever hosting account you're using doesn't really matter. The principle is pretty much the same. So in the final, managing their off my particular site inside site grown. So what I'm gonna do is open up the public hasty email folder, which is where all those sites structure resides on inside there, we're gonna have a couple of folders. We're gonna have WP admin content and includes if we open up, don't be content inside. They were looking for the plug ins folder. So we need to do is click on that and that will open up and loaded all the plug in folders we have set inside this particular site. They were looking out. So if we scroll through, you can see there's all of the different folders. So we need to do now. First of all, is create the folder for our plug in and just basically give it a name. So do is create a new folder. We're gonna call this WP tuts bash. Cpt. So we know exactly word is to click on confirm we've no created the folder to put any files you want to work with inside there. Let's just open that up. Just double click to go into it when we have an empty folder, Obviously. So next I'm gonna do is create a new file. This needs to be a PHP file on. We're gonna call this again dollop Etats dash cpt dot PHP So that's gonna be the father's gonna contain our functions and all those kinds of good things take all confirm We now have our file. So we need to do is click to edit that we've got a blank file Now there's various different things you can put inside your butt. Is bay bare minimum. We just need to do this. We need to open the PHP tags on then everything that comes out inside this forward slash on the star is just basic information. So you see, by default or we really need to put in is the name of the plug in So we can just say this is WP tests Cpt. Okay, so you get that follicle on stopping there, so that's all we need to do. We've basically created the most important file in this case, the only file we need. So what we've done that we no need to put some functions in there. So how do we get these functions? What you could write them yourself. And if you're more than comfortable working with that, you probably don't need to follow along this tutorial because this is gonna be way too basic for you. But for most of us that don't really need all know how to write the entire code out, there's a couple of ways in which we can kind of cheat and make our lives a lot easier. So I'll show you a couple those right now to the first method I've shown this before in another video tutorial on how to basically do away with plug ins to create your custom post types is to install cpt. You I set of the post types set up your taxonomy is and everything you want to create inside there on. Then we can output that code. So I've got a duplicate sites year with cpt you installed on. What I need to do is come into the tool section, and from there we can come out of the get code option on each one of our taxonomy. Is each one of our custom post types all of the cold that's relevant, and that is inside each one of these individual boxes. What we could do is we could copy that over into a text file and then just paste that into our newly created plug in PHP file. So that's the first way, which you can do it. If you don't want to go to the time and effort of actually installing a plug in on deactivating it after, it's just in case you leave anything behind. You don't want to do that. There's a couple of online resources you can do pretty much exactly the same thing. Subversive These online sites is generate. WP General WP has a lot of free options. There are some paid for options. If you want to get full access to it, by all means, go ahead and do that before you want to do is create tax honorees and custom post types for your custom plug in their free. So what we could do is we can easily come in and we can say we want to take a look at content. For example, on inside the content section, we're gonna have the short coast generator posted has generated post type taxonomy generator. If you come and take a look at admin, you can see inside there we got settings. We got quick tags generator a ton of different options. The 2nd 1 we've got access to is hasty or WP Dash Hasty on this basically does. The same thing is just visually, slightly different. So we wanted to come in and create our new custom post type what we can do exactly that. We've got custom post that generator we can click inside there. And then what we have is a list of questions that we need to fill out check boxes and stuff like that and you can see on the right hand side, it'll show along the code. This is pretty much identical to what cpt you I would do if you use the first method I showed you. But what? You can do it, You can fill out all the relevant information inside you, Then simply copy the code over for all of the post types you want to create and all the tax on him as you want to create a swell. I'm not gonna go through showing you how to set these that because every use case is going to be different. But if you'd like to see some tutorials on these two websites and how to use them, let me know in the comments section below, and I'll take a look upon some content together to show you exactly how to use those specific websites. Okay, so let's just say no that you've got the code that you want and you're ready to actually start created your new custom Plug in what's next. But we need to go back into the file manager and from there we no need to copy that code that we've just taken from any of those methods. Address shown you on. Drop that into our text file our PHP file. So I've gone ahead and done that you received. There's all of my code. So what I need to do is copy this from the function section at the top, right the way down through. So what we're doing is we're just copy and already pre defined functions to create and set of our custom post types. Now, attacks on Amis says, make a little space underneath here. Dropped that in on We are pretty much done. All of our code is inside there, ready to start working. So we need to do now is just save this file. So you hit save on there, and that should be pretty much everything done. So we hopped back over into the dashboard of would press into a plug in section our new plug and should be in there ready for us. And then we go. We're in the plug in section. If we look at the bottom, there's our cpt WordPress plug in. We just created. All we need to do is activate it. Once we activated will have all those custom post types available. Let's hit, Activate. There we go. There's our vehicles with all of our taxonomy is inside there, there's our dealerships. Everything is set up, including our options page. So we've basically created our first plug in. It has a very simple job to do, but it's doing it very easily Now. You'll notice that at the moment, or the extra information, which tells us exactly where dares maybe version numbers. If you keep inversion, control off changes you may make to a site where you expand Maybe the custom post types of attacks on Amis. Well, we just need to add an extra little bit of information into our PHP far. Let's just hold back over into our file score back into the top on what we created. This initial basic set up with just a plug in name. We can expand upon that. Put more information in there, but by text file back up on a scroll To the top of this, you can see I've expanded or that out by doing things like plugging name plugging. You are I, description, version, author, author you are. You have to make sure whether it's structured in that way. What comes out of the four colon is entirely up to you because that's your user. Enter data. You don't have to use all of these. You can use any of them you want to. But if you want to keep track of what's going on on what a particular plug in Dez makes a lot of sense. Also, if you obviously you're working with multiple people, you may want them to know exactly what this plug in does because it might be a bit ambiguous to them. So I want to do is gonna copy that from this will, right click and choose copy. We'll replace what we have at the top here, making sure that we don't accidentally leave any extraneous code behind. And we've got the PHP opening tag at the beginning, so everything's in place. I'll just simply hit save on. There were hot back over to our site into a plug in section. Reload that. And once that's reloaded, we'll see. Now we have a lot extra information. Tell us exactly what version the length of your site on what the plug in actually does. So you've now created your first WordPress plug in. There's a very simple job, like I say, but it's a plug in.
9. Wrapping Up The Course: now that we've wrapped up the second course on working with WordPress Elemental pro on Mawr , advanced website structures. Hopefully what you're seeing is it's not as complicated. You may 1st thought it opens up a ton of really exciting possibilities of how you can take your WordPress websites to another level. If you want to continue learning more when it comes to WordPress, elemental and other Web design skills, check out my other skill share courses. You find those on my profile well, until next time my nation Porc take care.
Paul Charlton, Designer & Trainer
