Transcripts
1. Course Introduction: we all know that WordPress is a very powerful Web design software package. It has tons of options available, but sometimes you just want to go beyond what it offers today. We're gonna be taken advanced custom fields. We're gonna be using that to enhance what wordpress come do. Nice thing is, this is the free version, and we're gonna be using this in conjunction with elemental pro Elemental pro gives us the ability to create custom theme files on weaken, then fine tune and tweak to get something that's a little bit more unique. If you think this is beyond you, don't worry, because I take through every single step in this beginner's guide. So the time you finish, you're gonna have a good basic understanding of our advanced custom fields. An elemental pro work in conjunction with each other. Once you've done that, if you want to learn more, there's tons of videos on this channel. A link in the description below on a card up in the corner right now So you can take a look at those when you finish this and move on to get even more complex, powerful WordPress websites. Okay, so what? We're gonna do? First of all, it's jump over onto the computer open the dash would've been WordPress and take a look at the tools were going to be using for this particular beginner's guide.
2. ACF Pro & Elementor Pro Plugins: I've already gone ahead and downloaded and installed advanced custom fields. Elemental, elemental, pro with advanced custom feels installed. Let's take a quick look at the custom fields options. A brief overview, if you will. If you take a look on the left hand side. Now we have custom fields, and inside there we have three options. If you have the pro version, you'll have an additional option that just says License, which you can go in putting your serial number. And then you can have access to any of the updates of the pro version as and when they actually come out for the free version, we just get three. We've got field groups and we've got add New. Now feel groups will just list all the custom field groups we've created. An oilfield group, really is is a way of grouping together. The custom matter feels that we're going to create. So let's take a look at add new on What that'll do is that allows to go in and start creating our first A C F feel groups. Now the screen is broken down into four distinct sections, and we'll cover each one of these in more detail. If you go through setting up our first set off fields, you can see at the top. We've got the title, which we can put in the name of this particular field group. So naming these two make sense a logical kind of naming system is going to be something is very useful to you if you create more complex sites in the future. Next up, we've got the actual feels themselves, and this is where we create the different kinds of field types. So we've got things like Text feels image feels file upload feels on a whole range of different options as part of a CF. After that, we've got the location settings. Now these are rules that we can set up to specify exactly where our custom fields are going to be listed. So we've got a range of different places. You can do this. We can choose from post types, templates, formats, categories, user roles, forms, a whole range of different things we can use to trigger where we use these particular field groups. Next, we've got the sort of qualifier. Is it equal to, or is it not equal to men? Finally, what we actually check it against. So things they post page template on these will change depending on form what kind of thing you choose. So, for example, if you t post category, you'll see that changes now on. We'll have things like categories, and if we create additional post categories or your taxonomy, if you want to call it that, these will be listed inside they. So, depending point when you choosing, the first option will dictate what you'll see in the last option on. Like I say, we will come back and take a look at how we could set some of these as we go through and create our first field group. Next, we've got the setting section, and this is where you can find tune, configure exactly way and how you want a CF to interact with WordPress so you can see we can make this field group active or weaken. Deactivate it. This just means you can create field groups, and then you can deactivate them. If you don't want to use them all, you can then reactivate them as and when you need to. We then got things like this style, which allows us to choose whether you want to have standard, which is your WordPress metal boxes or, if you want seamless integration, these arm or visual than actually sort of technical is just how they actually show up on the page that you using them on. Next. We've got the position. Do you want them normal after the content high after the title or at the side? So you have that on the right hand side off your actual page. Next up, we've got the label placement. So if you're using labels when you create your matter fields, you can have control over exactly where these are listed at a top aligned or left aligned. Then we've got the instruction placement. So if you apply instructions to more complex feels that you may create is part we feel group. You can put some instructions inside there, and then you can dictate exactly where these will be displayed. Inside the actual dashboard order number just specifies where they'll be listed on the left hand side, inside the hierarchy off your dashboard and then description, which will again show up inside the left hand side. Section on. Finally, we have the hide on screen options when you create custom post types, for example, or you integrate this into an existing post type of part of WordPress, you can control exactly what is or isn't going to be displayed. This gives you a more granular control or making sure you don't have information inside your custom post or inside your posts. With use the sort of meta data that we're gonna create inside a CF, you can control exactly what's displayed on what's not displayed. This could be very useful if you want to keep things very, very simple. If you offloading this to a client or they don't have access or need for any of these options, you know we'll take a look at some of these as we go through on will change and configure things, and I'll show you exactly how some of these display. But for now, that's the overview of exactly how you create your custom. Metta feels inside a CF
3. Advanced Custom Fields (ACF) Overview: you can see at the top. We've got the title, which we can put in the name of this particular field group. So naming these two make sense a logical kind of naming system is gonna be something is very useful to you if you create more complex sites in the future. Next up, we've got the actual fields themselves. And this is where we create the different kinds of field types. So we've got things like text feels image feels file upload feels on a whole range of different options as part of a CF. After that, we've got the location settings. Now these are rules that we can set up to specify exactly where our custom fields are going to be listed. So we've got a range of different places. You can do this. We can choose from post types, templates, formats, categories, user roles, forms, a whole range of different things we can use to trigger where we use these particular field groups. Next, we've got the sort of qualifier. Is it equal to or is it not equal to men? Finally, what we actually check it against so things they post page template on these will change, depending on form what kind of thing you choose. So, for example, if you t post category, you'll see that changes now on. We'll have things like categories, and if we create additional post categories or your taxonomy, if you want to call it that, these will be listed inside they. So, depending point when you choosing, the first option will dictate what you'll see in the last option on. Like I say, we will come back and take a look at how we can set some of these as we go through and create our first field group. Next, we've got the setting section, and this is where you can find tune, configure exactly way and how you want a CF to interact with WordPress so you can see we can make this field group active or weaken. Deactivate it. This just means you can create field groups, and then you can deactivate them. If you don't want to use them all, you can then reactivate them as and when you need to. We then got things like this style, which allows us to choose whether you want to have standard, which is your WordPress metal boxes or if you want seamless integration, these arm or visual than actually sort of technical is just how they actually show up on the page that you using them on. Next. We've got the position. Do you want them normal after the content high after the title or at the side? So you have that on the right hand side off your actual page. Next up, we've got the label placement. So if you're using labels when you create your matter fields, you can have control over exactly where these are listed at a top aligned or left aligned. Then we've got the instruction placement. So if you apply instructions to more complex feels that you may create is part we feel group. You can put some instructions inside there, and then you can dictate exactly where these will be displayed. Inside the actual dashboard order number just specifies where they'll be listed on the left hand side, inside the hierarchy off your dashboard and then description, which will again show up inside the left hand side section on. Finally, we have the hide on screen options when you create custom post types, for example, or you integrate this into an existing post type of part of WordPress, you can control exactly what is or isn't going to be displayed. This gives you a more granular control or making sure you don't have information inside your custom post or inside your posts. With use the sort of meta data that we're gonna create inside a CF, you can control exactly what's displayed on what's not displayed. This could be very useful if you want to keep things very, very simple. If you offloading this to a client or they don't have access or need for any of these options, you know we'll take a look at some of these as we go through on will change and configure things, and I'll show you exactly how some of these display. But for now, that's the overview of exactly how you create your custom. Metta feels inside a CF
4. Creating Your First Field Group: Now that we've seen what feel groups are, let's create our first field group in a CF on as associate. That with posts. And what we're gonna do for this example is keep it pretty straightforward we're gonna use it is a good example of how you can enhance what's already inside WordPress with a CF Fields. We're gonna use the example off creations of additional information about vehicles. One associate that name with outposts. So what we're gonna do, first of all, is give this a name and we're gonna say vehicle details. Now, this is more for you than for anything else. This isn't gonna be displayed on the front end of the website. This is just so you know exactly what this particular field group is associated with. Great. If you are using just one or two a field groups, it's not so important. If you build more complex sites, it makes sense to get into it a name, a convention that makes it very clear and obvious what every single field group actually relates to. No, we didn't that before we move on and start actually putting in the fields we want to use. Let's tell it where we want to use it by using the location option. Now at the top, we've got post types, post templates, status and so on. For this, we're just gonna simply come in and say Post type There were, say is equal to And if you click to expand that out even though it says post type, we've got pages and templates and fonts and icons, sets and so on. However, we know we won't associate this with the Post, so we're just gonna click on post and leave that as it is very, very simple rule. So any time we create a new post, these custom fields will be associative and available to us. If we wanted to get even further in control of this, we could use additional options inside our location rules, or we could use rule groups. However, that's a little beyond what I want to cover in this beginners gay to use in a CF with WordPress. Next, we're gonna come down to the setting section primarily. We're gonna leave everything intact. We don't need to worry too much about this. However, we will come back a little later and I'll show you how some of these actually influenced the way things are laid out inside your Post editor. For now, we leave them as they are. So there's the first part that we've named this. We've set the location of where we want to use it on any settings we may think we need to apply. The next thing we need to do is start adding in the fields. That's very easy, or we need to do is click on Add Field on That will open up a range of options. Now, this is very context based. So depending upon the field type that you choose, you'll see different options open up below two. Before we start feeling anything in, let me just benefit what I'm talking about. But the boat text is set up and you can see we've got things like default value place, hold attacks, pre penned, upend and so on. If we come down and we choose something like file, you'll see that no opens up a range of different options. So we've got things like Return Valium File array file. You are l file I d. All these things don't quite complicated, but the reality is it's just how the data is going to be stored inside the database inside a CF. So don't worry too much about this. I'll explain some of these as we go through, and then you take a look at some of the more advanced videos that we've got. What? You kind of got a good understanding of how a CF works. You see these being used in different contexts throughout some of those videos. So if you are interested in this, take a look at those further videos and see exactly how you start to utilize these various different options. So for now, let's put this back to text or we're gonna do is we're gonna come up. We're gonna give the field a label. But the label is basically the name that's going to be displayed inside your editor, Your Post editor. So we want this to be a nice, clear plain English, so we'll just say vehicle manufacturer if we click then into the next field as the field name. Now this is ultimately generated. You can if you want to change that toe, anything whatsoever. The only thing you have to make sure that you do is you don't leave any spaces between any of the words that you use either use an underscore or user dash. There always has to be something like that in the otherwise you will encounter problems. The next day we got the field type instructions. Let's just put something really simple in here is just likened. Demonstrate how this is going to be displayed so we'll just say, insert vehicle manufacturer. There you go. Well, just correct that spelling mistake. There we go. Is this required? Will say yes. Because obviously, if we're gonna put a vehicle in there, we want to make sure that the vehicle manufacturer is included in the that we've got default value. Do we wanna put default value inside your well? No, because we don't know what the vehicles going to be. But in some instances, you may want to have a default value placeholder text or that really means is it'll put some placeholder text into this particular field type, which would be replaced as soon as you type anything in there. It's also worth bearing in mind. It's only placeholder text. It won't be added to the database. If you don't put anything in there, pretend just basically means something that appears before the input on a pen is something the PS after. So you could have something like the pound sailed a dollar sign for beforehand. Or you could have a unit of measurement to be afterwards would using the upend option character limit. If you want to limit this to a set number of characters, you can do that. If you leave it blank, there's no limit. And then you go conditional logic. No, I'm not gonna go into conditional logic, but I will give you a quick over off what it actually is. Now you can have multiple different field types inside here, and you can use conditional logic to display or hide them based upon whatever criteria you want to set. So we click our conditional logic. You can see we get something that is very familiar to what we had at the top. We choose exactly what we want to actually display this particular post type, But this is only gonna work on a field level. So this particular field, if we match any other criteria, we can either display it or hide it. I hope that makes sense. You see, Schofield. If we click on there and you can see we were at the moment, we don't really have anything in there. But when you start to get extra fields in there, we can reference those to specify whether something is hidden or shown. So we may say that we wanted a year of manufacture. And then once you put that your manufacturing, if it meets a certain criteria, another field may pop up the specific to a vehicle that was only manufactured after that, you ate in this pry into that wouldn't be displayed again. Like I say, I hope that makes sense. Then we've got to qualify out, which would basically be How do you want to compare the values and then, finally, the value at the end of it. So that's the basics of condition logic. And like you say, that's beyond what I want to cover in this beginners primer. 16 that off and then we go Rapper attributes. If you want to, you can set some after bits inside you. Then you could reference those with CSS and other things just to make sure that if you wanted to customize any of the fields, you create inside a CF. You can do that by using the rapper after base. Okay, so there's our first field. We can click at the top to hide that. We say, Let's add another field in So this time we're going to say vehicle color again. We click down in the field name. You could see it automatically put in that underscore field type. We can leave that. As is, instructions will just say vehicle color that's better required. Yes, default value, all those kinds of things. We're gonna leave those as they are some basic text fields. Let's take a look at adding a different field type in on a new field. On this time, we're going to say vehicle, we would say engine underneath this time changes. Now we want them to be able to pick what engine table is, whether it's a diesel where it's a hybrid. Whether it's a petrol, you name it. We could sort of add that in them. So we're gonna do is gonna click and changes from text. I'm gonna come down and you can see we've got things like Check Box Select and so on were going to say select what we do that we know get some different options instructions. If we want to put that in again, we could drop instructions in there. We're going to say we want this to be required and then we've got the choices and you can see we can do in one of two ways we can put a choice. We have a value where we have a label if he wanted to, so we could say, We want this to be a petrol, going to put a space a full coal on and then we can put petrol at the end of it. Now, this is obviously the kind of thing you think it will if we choose petrol or diesel something we don't need to have a label Andi value. However, there's gonna be instances where you do. You may have the label to be a sort of shortened version, and you could have the value want to insert to be a long version, or you could have something like It could be text for the actual label. Where's numeric or something like that for the value. So it's up to you how you want to set this up if you use the same values for everything you can If you want to, simply just put in the one value like so which is what we gonna do. I'm gonna go click underneath and we're gonna put diesel in. We'll put Highbridge and we'll put electric. So we know created our values. And if not, you can see we got default value each default value for on a new line. So if you want to put default management, you can do that if you want to. You can also do things like alone. No. So we're gonna say no to that select multiple virus again. No stylist, you it doesn't really matter. For this example, it's more a case of just demonstrating how this works. Then we've got the return format. So this is a case of do we want to use the value, the label or both of those. So you may want to store one or the other, or you may want store both in your database various different reasons why you'd want to do that. We're just going to simply set this to be the label conditional object. We don't need that we're not gonna worry about rapper attributes either. So gonna close this down to one final field type is going to say add field, and we're just gonna put in vehicle specifications, look underneath, and then we can choose the field type. We're gonna click to expand this out. What we're gonna do is we want to have a witty rig editor. In other words, what you see is what you get so you can get all the normal things, like bold italic underline the basic kind of editor you get inside WordPress itself. So we can do is we can come down, you say with the wig editor, Click on there and you see no, we get some different options again. So we sent to reveal Quiet. Now we can set up how old we want this to be used. We want have it fully featured. Or do you wanna have a very stripped down basic version so you can see we've got the tabs, visual and text. So we may only want to have this set of visual only, or visual and text or text only. This is just basically Can you see that behaved TML cold behind it? Or do you want to be able just sort of see visual tax only entirely up to you, Really This visual on text the toolbar then is Do we want to have the full featured version so all of the options are available? Or do you want to keep this a little bit more basic? We'll say basic. Then we've got the option. Say show media upload buttons. What this means is, do we want to allow people to upload things like images? Pdf files, word files, things like that, as part of it will show the media button will say yes. For this example, Delay initialization a tiny M ce. In other words, this is the little visual adity Using is not initialized until the field is clicked on. This is going to mean that you end up with a slightly quicker load time and you don't have the clatter of that in there. We're gonna leave that to know because I want this just a load in straight away. Other than that, everything else is now in place. So I've created our four new custom field types as part of our vehicle details. There's one thing I want to draw your attention to before we go any food that you notice that every single one of these labels on the names that I use all pretended with vehicle and then underscore. Now I always tend to get into this habit because it means if I want a reference one of these later on on, I can't think exactly what I've called it. I'll know that if it is vehicle, something will be sort of painting something or book something. I always used that it beginning to dictate exactly what's going on. So it just means that I don't know that my name of convention just makes it easier further down the line when we're a reference anything like this because I always use it by using its a vehicle. Underscore book underscore Recipe Underscore always starts with exactly what that particular field said is all about hope that makes sense to you. Okay, so now everything is in place. We're gonna click on publish on. We've no created our first field group as part off advanced custom fields. Now, if you want to view any Belfield groups, we can come back Oh, to the field groups listing on that will show us anything we've got inside there, but the other thing I would draw your attention to is it says currently. Vehicle details. Now that's kind of love. Pretty self explanatory. But sometimes that may not always be the case. We can't make our lives just a little bit easier by adding something extra in. So let's come back in and Ed these vehicle details this feel group scroll down to our setting section on we saw previously. You've got description. Well, what we can do is we can put in a little brief description name. Let me just do without this se whatever you want to call this, let's new vehicle details. So we'll just say this again. Update that come back at our field groups and you see No, we get the name of this particular field group. We also get this little description of the end of it, which just means identifying what all these different field groups actually relate to become a lot easier. So that's just something that I think it's a little visual thing that makes life just that little easier. And it's something we're taken advantage of on more complex websites that use a CF so now that we created our first field group. Let's take a look at Waterston to our posts so we can get our posts on the left hand side and will come down to or posts anything we have, what we listed inside you and you can see we've got the typical hello world. Let's add a new posting. And once we do that, this will open up and you can see we know got the normal editor section the top, which is part of Gutenberg. We also now have all of our custom fields listed below. So vehicle manufacturer, vehicle color, the vehicle engine, which is a drop down list which we can pick and choose whatever we want from. And then finally we go vehicle specifications, which is our with the wig editor with the ad media option, the visual, the text options and also the slimmed down version of the options that we have as part the visual editor. So it's simple to include these into the design itself into your post types. So, you know, created that. Next thing we're gonna do is take a look at creating some content inside there. I'm taking a look at how we can go back and fine tune and tweak this to make sure that we end up with a great looking set up inside over posts using a CF.
5. Tweaking the ACF Settings: before we take a look at actually said in some of these settings up, it's worth bearing in mind that if you use Gutenberg's your editor in WordPress, some of these options really don't have any effect. However, if using the classic editor, you should have more success. So just bear that in mind, depend upon what entity views you may have mixed results. Now, if you take a look, we could do things like, Let's just say we want to take the label placement and the instruction placement is an example. Let's just say to start off with what looks like is like this. You can see we've got everything listed out underneath. So that's all pretty sort of seamless and straightforward however we can. We want to just change things like toe left, a line that will say below fields. So this will change your label placement and change the layout structure so we know Come back in and refresh this. We get a slightly different layout so you can see now we've got the details on the left hand side. We've got that instructions. Now sit below the field entries, so you confined, tune and tweak this if you want to come back out, will set those back to the original values we can do. We could just say we want their content position to be on the side. So if you have a small content areas and you don't want to sort of make your entire interface looking really complex, you could put the position to the side. And then what that'll do is it'll put your new custom feels inside the right hand column inside the dashboard. Inside, you posted a test you can see now we've got our vehicle. Details on the right hand side wears. Previously they were underneath this area, so it's empty You. How you want to lay things out obviously depends upon the content on the way that you want to work. So let's say just bear in mind that if you using Gutenberg, you may find you have so slight differences in the way that everything is displayed
6. Adding Basic Content: now that we created a lot of different custom fields and associate those low posts. Let's just put some simple data in so we can use that in the next stage we start building the templates. So I've come into my post section coming to add new. And as you can see, I've got the normal editor on the right hand side. We've got our vehicle details, which is the additional section from advanced custom fields that we're going to fill out. Let's just put some details for a vehicle in. So we're gonna call this one The Audi TT sport I'm gonna do is gonna just drop in some filler text for the normal information we come over to the right hand side was set of a featured image and we just choose the Audi TT with select that next that we can just come in and we could fill out all the details that we want for this vehicle. No, we could if we wanted to. When it comes to vehicle manufacturer, we could add in a drop down list, the same as we've done with the vehicle engine to reduce any kind of problem where people put incorrect data, misspellings and so on in this is just a simple example of how to put extra data in. So when you were using this in real world example, you set the fields have to be exactly what you would need to minimize any future problems. Okay, so vehicle manufacturers is Audi vehicle color is red. It's a diesel car on the we come down and weaken, drop in the additional specifications. So we've set everything up. Now all we need to do is hit. Publish. That will then add this into our database and we now have some vehicles. I did this a couple more times now, so we've got some extra data in here. But this is just a simple way of I didn't some sample data that we can use when fleshing out the actual templates.
7. Building Single Post Template: in this section, we're gonna be taking a look at how we create the single post template which will output the information to do with the actual vehicle that we're talking about. Now we're gonna be using the Hello theme for this because it's a kind of blank thean. The works really well with elemental. It means we don't have to worry too much, but all the extra bits and pieces that a typical fee will bring along with him. So with that being said, let's take a local we're currently working with. If we click through, we take a look at a typical single post. Now this is the details of an individual post or you can see we've got is the title. We've got the basic information on the leave, a reply option and neither. We don't really have much to work with, so we need to rectify this. We need to go in and create that new template. We come back into our dashboard, but I come down to the template section were to come into theme buildup, not getting new to working with the theme building inside Elemental pro. It's not as complex as it may 1st seem, you start off by breaking your themes down into various different components. So if you think of a typical page inside wordpress, you'll have a header which will have your menu, you logo, and so on. You have your footer, which could have additional links, copyright information and so on. Then you actually have the content of the page itself that sits in between the header in the footer, and that content can take on many different forms. In this example, we have two different things that we can deal with. We've got the single, which is where you click through and take a look at an actual individual post and you've got the archive and the archive lists all the post in a particular section. So, first of all, let's take a look at dealing with single post that we'll take a look at the archive and how we can quickly use elemental pro to make a more custom archive. So we're in the scene builder. What we need to do is click on single inside the That gives the option no, to create our first single post type, gonna click on add single and in the we've got the options to specify some basic information you can see if we select this option. First of all, if we chose single by mistake, we could, if we wanted to choose a different type of template from page section pop up and so on. Single is perfectly fine for this example, though, says Select the Post Type three. Click on there and you can see we can choose between three individual values posts pages on the four or four page. We don't want to worry about pages at this point. We just want to concentrate on posts now if this is something you'd like to learn more. But I gotta completely dedicated video on exactly how to use the theme bill as part of Elemental Pro when I'd recommend taking a look at that. If you want to learn more about all the different nuances you have inside this particular page builder on the theme options that are associated with it put a link in the description below and in the corner so you can take a look at that. So let's just choose post. Next thing to do is we're gonna give this template and name and we're gonna call this default single. Well, no, no. This is the default Temple is going to be used for all of our single post types. So we could say create template, and I don't Then take us through into the elemental editor where we can choose from blocks pages in any templates you may have created ourselves. We don't worry about using anything from here. We're going to start completely from scratch, so we'll close this down will end up them basically with a blank template. Now, if you want more, this a CF for beginners at the top is because we haven't associate ID a header and a footer . Yet, as part of our themes, this is just basically the name of the site so we can rectify that. And we'll take a look at that after we created this single post template. Okay, So because you've chosen a single template, single post template, you can see we now have eight options on the left hand side group together, and the single elemental pro is smart enough to know that if you did it with a single post type, you're probably gonna want to use some of these if not all of these, let's just do exactly that. First thing you want to do is choose the featured image, so we just simply come over Dragon, the featured image, which it dropped out on the on that will pre fill out the information from one of our posts . Now, if you find you're not seeing what you expect or you want to change it to a different post , you can do that incredibly easily. What we need to do is come down to the bottom left hand side. She was settings from the little cog icon, and in there you can see we've got preview settings. We click and expand that out. First option we have is what dynamic content we want to use to preview with. Click and expand that out. You can see again. We've got posts, page media for four and so on. If you're creating custom post types, you may see additional things inside you. And also, if you're dealing with things like if you installed room commerce again, you'll see different options available in association with what we have you. When she was post, that's perfectly fine. Currently, we're looking at the Audi TT, but actually saying I want to change that to the focus that we start asserted in your you can see, we've got Ford Focus. You say apply and preview on literature. Just update the previous bear in mind. This is just the preview, nothing more. This is just there to make your designing the single post template or the archive templates a lot easier because you can actually see some data inside there. Okay, so they is our vehicle. Let's come down and say We want to drag in the post title so we'll drop that underneath the and the receipt. We've no pulling forward focus. We want now. We're gonna come in and we're gonna come back out. We're going to say we want to put in the actual post content now. This is all really, really simple and straightforward because we're just using normal, simple parts of a typical page or typical post title, the featured image on the actual description itself or the content. But how do we go about pulling in that? A CF data that's not quite so straightforward. That's a little bit more complex, surely Well, not really. We can do is come back out of this on. We're going to just say we want to put in some additional information underneath you. We've got all the options, you know, we expect to how things like headings, text editor images and so on. And we can reference not information. So we're gonna do is we're gonna say we're pulling heading. Drop that underneath the And you see, we've got this dynamic option for both title on the link and various other sections depend upon the widget that we choose what you've got that we can use that to reference the advanced custom fields data. So we've got this fill a Texas at the moment. But we want to change that for dynamic contents. Let's click on Dynamic and you see that no opens up a range of extra options. We've also got things in the Elect Pope ST Post excerpts So on. So these kind of mimic what you have with those normal single post widgets on. If you wanted to, you could use either all. However, we've also got extra things. If we scroll down, you can see at the bottom. We've got a CF a cf field. Let's click on a cf field on. Nothing happens. So why does anything happen? Well, basically, because all we've done so far is tell it, we want to put in a CF field in it. We haven't told it what field we actually want to use. So what we need to do to do that it click on the little Wrench icon and that will open up then two different sections. We've got the key, which is basically the A C F field name that we want to reference on, advanced on what the advance does is it allows you to put some information before after, or a default fall back of value in there. So first of all, let's deal with settings. Let's just come in and choose the key that we want to use. If you click on there, you can see we have our four options available. Now. One thing to bear in mind is you will only see different options inside your for the key that are associated or will work with the widget that you use it. So, for example, if we put some image upload fields in here, we wouldn't see those reference inside the key because we can't use those with a heading section with heading widget. So logic would dictate that you only see the relevant information you can pull in this associated with the typical type of widget that you're working with, the hope that makes sense. So what going to do is pull in manufacturer? Has he done that? You can see that. No poles in Ford. Great. But what does Ford mean? You know, if someone look, this might mean actually nothing to them. Well, this is where the advanced options come in. So we can do is we could put in something before. So let's just say we want to put manufacturer. I would put a full color on a space good second soul, and you see that No updates if he wanted to put something else in there like fall back, for example, of the value wasn't inserted in this field will just put it on like an ace was known. Applicable. If you wanted to put something after, you could do that. So let's just say something. Give it a second or so and you could see that now updates I will put after what we put into the key that puts that in there as well, so we could put before we can put after. We can do pretty much whatever we want in there. Like I say, if you want to, we can use HTML code inside us. If you want to make this bold, we could just wrap this in strong tags. However, we're not worried about that. So there's the 1st 1 we've done. We put in that a cf field. We've associated that with the relevant key field. We want to use all pretty simple, straightforward so that we could you repeat that same process again if you want to. So we could say is we could duplicate this, which would be a quick way of doing that. We would only have to go in and just change what the value is for the key. So let's do that. Let's just right click on, just say duplicate, and then we can come up here. We can click on the little ranch I call. We could change that from vehicle. We can just change this to a vehicle color, and we'll just change the before and we'll put in color give her a second. So in the u go. We've now updated that information. Don't repeat that again. So we just right click duplicates. Come to the little ranch, Ike on, changed from color or say vehicle engine coming. Change this to engine type. There we go. So or very simple. Straight forward to the final when we got there, Mr Specifications, we're gonna do this a little differently. We're gonna come in and we're going to say, First of all, we want to put in a different heading inside this. We can come in today and we'll just put in. I will say specifications doesn't heading for that. Created now we can do is we can come in and say We want to put a text editor underneath it . So that's how different widget this time. But again, you can see we got Dynamic is an option so we can click on Dynamic Scroll, way down to the bottom shoes. A CF field click on the ranch icon will change the key to vehicle specifications. Good second So and you see that? No updates the specifications. So what you can see is the whole process isn't particularly complex. You know what we can do is we can go ahead and we confined to and we can adjust the styling on there so we can say we want to bring this here to make a bit more in keeping So Page one is perfectly fine on this. We're coming to our style settings We'll do is we'll set that to be a different color. We'll change. Our typography will just put in. But she's quick sound for this example. We'll just adjust the size on the we can do is we can adjust the weight if you want to weaken. Set up anyway. That we want to do that and we can do is I could just sort of copy that I could duplicate on pace that style. They paste that still the they stay on pasty so they'll just update the styling on there and we could start this anywhere you want. I'm not gonna go into too much detail about the whole styling options, because when it comes to dealing with this, it's very subjective, but also very easy with elemental. So we'll say that we're happy with this template that everything is in place. We hit publish on that no opens up some options for us now, these options of just literally conditions for when on way we use this new template. Now we're keeping this really, really simple, so I don't want to get the too much detail. Like I say, I've covered this in its own dedicated to tour. So I would definitely recommend taking a look at the theme. Build the tutorial. If you want to learn more about that, What we're gonna do is we can say we got include or exclude on, that we can choose where we want to use it. So at the moment, it says that posts that you see if we expand that we have lots of different options because we've only said I'm a really simple set. That post is perfectly fine. Where you can do then is you could say you want a Sinus toe, all posts or to specific posts. Was a happy with that. Well, say save and close. We've now created our single post templates that will be referenced and used for our particular website says Come back out now to that test page that we started off with. And this is where we were first of all with the normal Hello theme. Now, if we refresh this page, we find this our new design with all the details that we've just put in there. So the name of the vehicle, the details, that manufacturer, all those kinds of good things are used inside the. So that's how we go about creating the single post template. The next thing to do is take a look at how we can create an archive template on make everything just a little bit neater on a little bit sleeker.
8. Archive, Header & Footer Templates: at the moment. This is what our archive page looks like. As you can see, it doesn't really give too much information away, and it doesn't look that good. So how do we go about changing that and making a little bit Mawr stylish? Well, again, we're gonna come back into Elemental, gonna close out of our previous dashboard section. We come into our template section again, and we're gonna come in and say theme builder from there, we're gonna just choose archive. So what, you don't that will go to the same kind of protests we did last time to create the single post template I knew. But I call this default archive on, Say, create template that's gonna load us into elemental pro editor. Also take us into the blocks in the pages section. So if we wanted to use one of the pre defined pre designed layers, we could do that. But again, I'd rather show you from scratch. Just close this down. Well, do you can see again? Because you chose an archive. We now have the archive section available on the left hand side. So this is actually really easy we're gonna do is we're gonna just pulling the archive posts on. Drop that in there. Now What that's going to do is that's going to use the normal default WordPress loop. What that really means is it's just gonna loop through all the different posts that you've got a little display that inside here, and we there then control various different aspects of this and styling options and so on. So you can see at the top we've got skin as an options. We can click on there, and we can choose between classic and cards two cards and you can see that no changes the design on there if you want to, we can go through now and choose exactly what we do and don't want to show as part of this archive. So let's just say images perfectly fine. We're gonna choose the larger image because it looks a little better. Quality wise title is perfectly fine. Gonna come down. We're going to say we don't want to know about comments and we don't want a date. You see that now removes those from they in real time, read more, we're gonna get rid of that as well. The taxonomy is what you can see currently says and categorized. So if you were used in different categories, you could have those listed as part of this archive. We're going to turn those off. We're gonna turn. The avatar offers well, so we've now got a really simple, clean looking steps set up for our archive page. I would recommend putting pagination on, enabling that just to make sure that when you get more vehicles or more posts on, the user has some way of moving through to the next page of archive pages and so on, so forth. So we'll say. Yet that's perfectly finally, say, numbers on previous and next in the game. If you want to instill that, we're not seeing anything because obviously there's nothing actually on here to see at the moment. So we'll say that we're happy with the way that looks. We'll see, publish and again were taken through to a condition section. So we say, either condition, I think, see pretty much works the same way. But obviously, because we do have an archive, then the condition that's got to be used is going to be slightly different. So the one says all our case we click to expand that you can see we have a different set of ways of going through a specified exactly what archive this would be used on. Now. For me, I'm perfectly fine with or archives, but obviously, like you say, if you wanted to go through and specify different categories for child car degrees and so on or tags, you can do that inside you and again. All these things are covered in a lot more detail on that to tour that will take you through and show you how to use the elemental pro theme buildup. You say all archives would hit saving close. We've no created Our custom archive says. Come back over to our Web site because you set this for a while. The archives, anything that uses an archive page, will now use our custom built template click to refresh, and there's our custom templates being used. If we click can go through, there's a custom template being used for the single post type, so you know not only created custom archives and custom single post templates. We've also pulled in data from advanced custom fields on. We can keep on repeating that to create far more complex and comprehensive websites using just these basic skills. Before we wrap up this particular section, let's just come back into our editor gonna close out of this, and I show you how easy it is just to state a header and a footer for your site. So again, inside the theme builder, we're gonna come into their We're gonna choose head of this time. Say add new header. We're just gonna call this default header and create our template. Once you've done that, we're gonna use one of the pre defined templates as part of Elemental, So it just is a quick way of doing it. But if you want to create this from scratch, use it all the normal tools inside elemental, elemental pro. You can do just that. However, let's just keep this really simple and just choose a nice simple header. We'll use this. One will say Insert that will. Then insert that into a page and you can see it's no looking for a logo image on for our Manu's. We're not gonna worry too much about that in a moment. We'll just hit publish at our conditions so again you can see, it's all just repetitive to the same thing. Set in the right conditions, and so on. Entire site is perfectly fine. But again, you can see we can choose a different head of for the entire site. For archives on for singular well, say entire set is perfectly fine and save and close on. That's no associated that head up with every single page we create on our site. We do the same thing again exito dashboard. But to come in and we can say theme builder from there, we're going to say Footer and then say add new footer. So I want to do is come in and say Default footer, Create a template with n Choose our template. We're going to use the pre defined template again. We'll just choose a nice, dark, simple layers when she was this one. Insert that in. Now they want to do that with Hit publish out of a condition. Entire site is perfectly fine. Hit saving close on. We're now done. So let's come back. Take a look. Refresh this work on a new header at the top of scroll down our new foot at the bottom. So we need to do now is going to set up things like the menu you want to use in the at the logo into your site and just do any kind of fine tuning to make sure you got plenty of space around the various different elements on everything is looking really good.
9. Expanding ACF: So I'm gonna head tweaked a few bits and pieces, put a logo in person, obligation in just style, things out a little bit Tidier. And Nita, So you can see what we've ended up with now is a nice, simple way of going. Take a look at these vehicles, take a look at the details about them and style anything we want and add anything we want in there. So that's the basics off working with advanced custom fields. But what if you want to take this food, that what kinds of things can you do? Because at the moment we can associate these custom fields with things like posts and pages , and that's kind of still limiting. Well, you could do, and I'm gonna cover this in this particular video. I've already covered this in other videos. And if you want another sort of beginners gay to use these casings, let me know in the comments section below and create a second video that'll show you how you can utilize these extra tools. What you can do is you can use a free plug in called custom post type you I that will then allow you to create custom post types. So, for example, is that it? Using the posts via vehicles, you could create a custom post type for vehicles, and then you could have those two separated. You'll also then create another custom post type for manufacturer information and have different information for each of the manufacturers. They There's a real a lot of scope of what you can do. And I covered this recently in a deep dive video where we took a look at creating a food blawg, which he was custom post type custom loops and a whole range of really cool things to create a much more be spoke website. So if you are looking to take this to the next level again and just add an actual functionality custom post type, you I is definitely one of the best options to take a look at anyway. There are lots of different ways you could take these skills and these topics that we've covered in this particular video, but this should give you a good beginners grounding and how you can use advanced custom fields alongside WordPress, an elemental pro
10. In Closing: Well, there we go. That's the beginners gay to use in advance Custom fields an elemental pro to create more advanced WordPress websites. Hopefully you've got a lot out of this video, and it's opened your eyes to some of the things that you can do with these fantastic tools . If you did get something, that video let me know in the comments section below what you thought of it, what you learn from it and how you think you can take this on your WordPress websites to the next level of speaking of taking your WordPress websites to the next level. If you want to learn more about advanced custom fields, elemental pro on all the kinds of great things you could do with these tools, take a look at the playlist that's listed in the description below in the corner right now that's gonna open your eyes to even more opportunities. Even more great things you can do with these great tools as always, all the applicable links in the description below minus being porc. This has been definitely tax until next time, take care
Paul Charlton, Designer & Trainer
