Advanced Custom Fields & Elementor Pro Beginners Guide

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 going to be takin advanced custom fields we're going to be using that to enhance what WordPress can do nice thing is this is the free version and we're going to be using this in conjunction with Elementor pro now elemental pro gives us the ability to create custom theme files and we can 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'm gonna take you through every single step in this beginner's guide so the time you finished 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 I'll put a link in the description below and 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 well my name is Paul see this is w peters the channel where i hope you get more from wordpress if this is your first time on the channel please consider subscribing smashing up bow icon below to become part of the WP crew and be notified every time new content is added okay so what we're gonna do first of all is jump over onto the computer open the dashboard up in WordPress and take a look at the tools were going to be using for this particular beginners guide I've already gone ahead and downloaded and installed advanced custom fields elemental an element or pro now the advanced custom feels installed let's take a quick look at the custom fields options brief overview if you will if we take a look on the left hand side now we have custom fields at 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 but the free version we just get three we've got field groups and we've got add new now field groups we'll just list all the custom field groups that we've created and all field group really is is a way of grouping together the custom meta feels that we're going to create so let's take a look at add new and what I don't do is that'll allow us to go in and start creating our first ACF field groups now the screen is broken down into four distinct sections and we'll cover each one of these in more detail as we go through setting up our first set of 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 that's 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 fields image fields file upload fields and a whole range of different options as part of ACF 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 we can do this we can choose from post types templates formats categories user roles forms whole range of different things that 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 and then finally what we actually check it against so things like post page template and these will change depending upon what kind of thing you choose so for example if we say post category you'll see that changes now and we'll have things like and categorize and if we create additional post categories or your taxonomy if you want to call it that these will be listed inside there so depending upon when you choosing the first option will dictate what you'll see in the last option and like I say we will come back and take a look at how we can set some of these up as we go through and create our first field group next we've got the settings section and this is where you can fine-tune and 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 we can deactivate it this just means you can create field groups and then you can deactivate them if you don't want to use them or you can then reactivate them as and when you need to we've then got things like the style which allows us to choose whether you want to have standard which is your WordPress meta boxes or if you want seamless integration these are more visual than actually sort of technical it's just how they actually show up on the page that you use in 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 of your actual page next up we've got the label placement so if you using labels when you create your meta fields you can have control of 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 fields that you may create as part of your field 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 down the left hand side inside the hierarchy of your dashboard and then description which will again show up inside the left hand side section and 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 over making sure you don't have information inside your custom post or inside your posts we'll use the sort of meta data that we're going to create inside a CF you can control exactly what's displayed and what's not displayed so this could be very useful if you want to keep things very very simple if you're 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 and we'll 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 meta fields inside a CF now that we've seen what field groups are let's create our first field group in ACF and let's associate that with posts now what we're going to do for this example is keep it pretty straightforward we're going to use it as a good example of how you can enhance what's already inside WordPress with ACF fields we're going to use the example of creating some additional information about vehicles I'm gonna associate that there with our posts so what we're gonna do first of all is give this a name and we're just 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 field groups it's not so important but if you build more complex sites it makes sense to get into it a naming convention that makes it very clear and obvious what every single field group actually relates to now we've done 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 template status and so on for this we're just going to simply come in and say poster type then we'll say is equal to and if we click to expand that out even though it says post type we've got pages and templates and fonts on icon sets and so on however we know we want to associate this with a post so we're just gonna click on post and leave that as it is very very simple rule so now anytime we create a new post these custom fields will be associated 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 guide to using ACF at WordPress next we're going to come down to the Settings section and primarily we're gonna leave off 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 influence the way things are laid out inside your post editor for now we'll leave them as they are so there's the first part that we've named this we've set the location at where we want to use it and any settings we may think we need to apply the next thing we need to do is start adding in the fields this is very easy all we need to do is click on add field and that'll 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 so before we start filling anything in let me just don't flip what I'm talking about at the boat text is set up and you can see we've got things like default value placeholder text prepend append and so on however we come down and we choose something like file you'll see that now opens up a range of different options so we've got things like return value file array file URL file ID all these things sound quite complicated but the reality is it's just how the data is going to be stored inside the database inside ACF 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 once you've kind of got a good understanding of how ACF works you'll see these being used in different contexts throughout some of those videos so if you are interested in this take a look those further videos and see exactly how you can start to utilize these various different options so for now let's put this back to text all we're gonna do is we're gonna come up we're gonna give the field a label now the label is basically the name that's going to be displayed inside your editor your post editor so we want this to be nice clear plain English so we'll just say vehicle manufacturer if we click then into the next field that's the field name now this is automatic you can if you want to change that to 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 use a dash there always has to be something like that in there otherwise you will encounter problems then let's say we've got the field type instructions let's just put something really simple in here is just so I can 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 we'll say yes because obviously if we're going to put a vehicle in there we want to make sure that the vehicle manufacturer is included in name then we've got default value do we want to put default value inside you 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 all 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 prepend just basically means something that appears before the input and append is something that appears after so you could have something like the pound sign or the dollar sign for beforehand or you could have a unit of measurement to be afterwards we're using the append 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 limits and then we've got conditional logic now I'm not gonna go into conditional logic but I will give you a quick overview of what it actually is now you can have multiple different file types inside here and you can use conditional logic to display or hide them based upon whatever criteria you want to set so if we click on conditional object you can see we get something looks very familiar to what we had at the top we choose exactly what we want to actually display this but the post type but this is only gonna work on a field level so this particular field if we match a the criteria we can either display it or hide it I hope that makes sense so you see show field if we click on there and you can see we've 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 you're in manufacturing if it meets a certain criteria another field may pop up the specific to a vehicle that was only manufactured after that you anything this prior to that wouldn't be displayed again like I said I hope that makes sense then we've got the qualifier 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 conditional logic and like I say that's beyond what I want to cover in this beginners primer just turn that off and then we got wrapper attributes if you want to you can set some attributes 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 that you create inside ACF you can do that by using the wrapper attributes okay so there's our first field we can click at the top to hide that and 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 can see it automatically put in that underscore field type we can leave that as is instructions will just say vehicle color right that spelling required yes default value all those kinds of things we're gonna leave those as they are so that's some basic text fields let's take a look at adding a different field type in and add a new field and this time we're gonna say vehicle and we're gonna say engine like Wonder Neath this time we'll change this now we want them to be able to pick what engine type it is whether it's a diesel whether it's a hybrid whether it's a petrol you name it we could sort of add that in there so we'll do is with a click and change this from text I'm gonna come down and you can see we've got things like checkbox select and so on we're gonna say select once we do that we now get some different options instructions if we want to put that in again we can drop instructions in there we're gonna say we want this to be required and then we've got the choices and you can see we can do it in one of two ways we can put a choice and we'd have a value and we can have a label if you wanted to so we could say we want this to be petrol now we can 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 of well if we choose petrol or diesel or something we don't need to have a label and a 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 you want to insert it to be a long version or you could have something like it could be text for the actual label with 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 going to do I'm gonna click click underneath and we're gonna put diesel in will put hybrid and we'll put electric so we've now created our values and if not you can see we've got default value each default value for it on a new line so if you want to put default values in you can do that if you want to you can also do things like a loan null so we're gonna say no to that select multiple fires again no stylized UI does 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 to store both in your database there's different reasons why you'd want to do that we're just gonna simply set this to be the label conditional logic we don't need that we're not gonna worry about wrapper attributes either so we're gonna close this down I'm gonna do one final field type it's gonna say add field and we're just gonna put in vehicle specifications click underneath and then we can choose the field type so I'm gonna click to expand this out and what we're going to do is we want to have a WYSIWYG 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 and you say WYSIWYG editor click on there and you can see now we get some different options again so we've said everybody required now we can set up how do we want this to be used do we want to have it fully featured or do you want to 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 the visual only or visual and text or text only now this is just basically can you see like the HTML code behind it or do you want to be able to just sort of see visual text only entirely up to you really this visual and text the toolbar then is do we want to have the full-featured version so all of the options are available or do we want to keep this a little bit more basic we'll say basic then we've got the options 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 it show the media button we'll say yes for this example delay initialization a tiny MCE in other words this is the little visual editor you use in it's not initialized until the field is clicked on this is gonna mean that you end up with a slightly quicker load time and you don't have the clutter of that in there we're gonna leave that to no because I want this just a loading straight away other than that everything else is now in place so we've created our four new custom field types as part of our vehicle details as one thing I want to draw your attention to before we go any further you'll notice that every single one of these labels and the names that I use all prepended with vehicle and then underscore now I always tend to get into this habit because it means if I want to reference one of these later on and I can't think exactly what I've called it I'll know that if it says vehicle something or it'll be sort of painting something or book something I always use that at the beginning to dictate exactly what's going on so it just means that I'll know that my naming convention just makes it easier further down the line while a reference anything like this because I always use it by using it's like vehicle and the score book underscore recipe underscore always starts with exactly what that particular field set is all about hope that makes sense to you okay so now everything is in place we're going to click on publish and we've now created our first field group as part of advanced custom fields now if you want to view any of our field groups we can come back go to the field groups listing and that will show us anything we've got inside them now the other thing I want to draw your attention to is it says currently vehicle details now that's kind of low and pretty self-explanatory sometimes that may not always be the case then we can't make our lives just a little bit easier by adding something extra in so let's come back in and edit these vehicle details this feel group scroll down to our settings section and 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 you without this we can say whatever we want to call this did a list new vehicle details so we'll just save this again update that I'll come back up to our field groups and you'll see now we get the name of this particular field group but we also get this little description at the end of it which just means identifying what all these different field groups actually relate to can become a lot easier so that's just something that I think is a little visual thing that makes life just a little easier and it's something we'll take advantage of on more complex websites that we use ACF so now that we created our first field group let's take a look at what is done to our posts so we come in to our posts on the left hand side and we'll come down to all posts anything we have will be listed inside you and you can see we've got the typical hello world so let's add a new posting and once we do that this will open up and you can see we've now got the normal editor section the top which is part of Gooden burg but we also now have all our custom fields listed below so vehicle manufacturer vehicle color the vehicle engine which is our drop-down list which we can pick and choose whatever we want from and then finally we go over your call specifications which is our WYSIWYG editor with the add media option the visual no text options and also the slimmed down version of the options that we have as part of the visual editor so it's simple to include these into the design itself into your post types so we've now created that next thing we're going to do is take a look at creating some content inside there and 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 our posts using ACF before we take a look at actually set in some of these settings up it's worth bearing in mind that if you use Gooden burgers your editor in WordPress some of these options really don't have any effect however if you using the classic editor you should have more success so just bear that in mind depend upon what editor you use you may have mixed results now if we take a look we can do things like let's just say we want to take the label placement and the instruction placement as an example so let's just say to start off with what it looks like is like this you can see we've got everything listed out underneath so that's all pretty see sort of seamless and straightforward however we can't we want to just change things like to left a line that will say below fields so this will change our label placement and change the layout structure so we now 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 the instructions that I've said below the field entries so you can fine tune and tweak this if you want to come back out we'll set those back to the original values and we can do we could just say we want our content position to be on the side so if you have small content areas and you don't want to sort of make your entire interface so we're looking really complex you could put the position to the side and then what that'll do is it'll put your new custom fields inside the right-hand column inside your dashboard inside your post edit as you can see now we've got our vehicle details on the right-hand side whereas previously they were underneath this area so it's empty or how you want to lay things that obviously depends upon the content and the way that you want to work so they say just bear in mind that if you use in Guttenberg you may find you have some slight differences in the way that everything is displayed now in this section we're going to 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 holo theme for this because it's a kind of blank clean that works really well with Elementor it means we don't have to worry too much but all the extra bits and pieces that a typical theme will bring along with it so with that being said let's take a look what 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 and the leave a reply option underneath it so 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 so come back into our dashboard when I come down to the templates section where to cover the theme builder now if you're new to work with the theme will the inside elemental probe it's not as complex as it may first 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 your 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 and the footer now 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 posts in a particular section so first of all let's take a look at dealing with the single post now 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 theme builder what we need to do is click on single inside there that'll give us the option now to create our first single post type so I'm going to click on add single and in there 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 and it says select the post type so we click on there and you can see we can choose between three individual values posts pages and the 404 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've got a completely dedicated video on exactly how to use the theme builder as part of Elementor pro and 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 and the theme options that are associated with it I 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 I'm going to do is we're going to give this template a name and we're going to call this default single so we'll know now this is the default template it's going to be used for all of our single post types so we're gonna say create template and I don't then take us through into the elemental editor where we can choose from block pages in any template we may have created ourselves we're not gonna worry about using anything from here we're going to start completely from scratch so we will close this time I will end up then basically with a blank template now if you wondering what this ACF of beginners at the top is because we haven't associated 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 we've chosen a single template a single post template you can see we now have eight options on the left-hand side grouped together and the single now Elementor Pro is smart enough to know that if you're dealing 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 can simply come over drag in the featured image widget drop that on there and 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 all we need to do is come down to the bottom left hand side choose settings from the little cog icon and in there you can see we've got preview settings if we click and expand that out first option we have is what dynamic content we want to use to preview click click and expand that out you can see again we've got Post's Page Media 4 or 4 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 install WooCommerce again you'll see different options available in association with what we have you we're issues post that's perfectly fine now currently we're looking at the Audi TT but let's just say you want to change that to the focus so that we inserted in here you can see we've got Ford Focus we say apply and preview and that'll just update the preview now bear in mind this is just the preview nothing more this is just there to make your designing the single post template or the archived templates a lot easier because you can actually see some data inside there okay so there's our vehicle let's come down and say we want to drag in the post title so we'll drop that underneath thee and you can see we've now pulled in a Ford Focus we want now we're going to 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 your title the feed image and the actual description itself or the content but how do we go about pulling in that ACF data that's not quite so straightforward that's a little bit more complex surely well not really we can do is to come back over this and we're going to just say we want to put in some additional information underneath you we've got all the options we normally expect to have things like headings text editor images and so on and we can reference that information so we're going to do is we're going to say we're to put in a heading drop that underneath day and you see we've got this dynamic option for both title and the link and various other sections depend upon the widget that we choose what we've got that we can use that to reference the advanced custom fields data so we've got this filler text at the moment but we want to change that for dynamic content so let's click on dynamic and you see that now opens up a range of extra options we've also got things in there like post date post excerpt and so on so these kind of mimic what you have with those normal single post widgets and if you wanted to you could use either or however we've also got extra things if we scroll down you can see at the bottom we've got a CF and a CF field let's click on a CF field and nothing happens so why doesn't anything happen well basically because all we've done so far is tell it we want to put an ACF field in it we haven't told it what field we actually want to use so what we need to do to do that is click on the little wrench icon and I will open up then two different sections we've got the key which is basically the ACF field name that we want to reference and advanced and what the Advanced does is it allows us to put some information before after or a default fallback value in there so first of all let's deal with the settings let's just come in and choose the key that we want to use if we 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 here for the key that are associated or will work with the widget that you use in 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 a heading widget so logic would dictate that you only see the relevant information you can pull in that's associated with the typical type of widget that you're working with okay hope that makes sense so what we're going to do is pull in manufacturer once we done that you can see that now pulls in Ford great but what does Ford mean you know if some would look at 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 and we put a full colon and a space go to second so and you see that now updates if you wanted to put something else in there like for bag for example if a value wasn't inserted in this field we'll just put in like n/a so it's not applicable if you want to put something after you could do that so let's just say something give it a second or so and you can 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 and like I say if we want sir we can use HTML code inside here so if you wanted to make this bold we could just wrap this in strong tags however let's say we're not worried about that so there's the first one we've done so we put in that ACF field we've sociated that with the relevant key field we want to use all pretty simple and straightforward so now we can you tell repeat that same process again if you want to so we can say is we could duplicate this which would be a quick way of doing it 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 and just say duplicate and then we can come up here we can click on the little wrench icon we can change that from vehicle or we can just change this to vehicle color and we'll just change the before and we'll put in color give that a second so and there you go we've now updated that information so I'll repeat that again so we just right click duplicate come to the little ranch icon change that from color let's say a vehicle engine will come in change this to engine type and there we go so all very simple and straightforward so the final one we've got then is the specifications we're going to do this a little differently we're going to come in and we're going to say first of all we want to put in a different heading inside there so we can come in today and we'll just put in we will say specifications that's the heading for that created now what we can do is we can come in and we say we want to put a text underneath there so that's how different widget this time but again you will see we've got dynamic as an option so we can click on dynamic scroll right over to the bottom choose a CF field click on the wrench icon it will change the key to vehicle specifications good a second so and you see that now updates the specifications so what you can see is the whole process isn't particularly complex but now what we can do is we can go ahead and we can fine-tune and we can adjust the styling on there so we can say we want to bring this in and make a bit more in keeping so h1 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 or change our typography and we'll just put in use quick sound for this example and we'll just adjust the size on there we can do is we can adjust the weight if we want to we can set up any way that we want to do that and what I can do is I can just sort of copy that I could duplicate and paste that style there paste that style there it's the I'm paste there so they'll just update the styling on it and we just stand this any way 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 Elementor so we'll say that we're happy with this template that everything is in place we'll hit publish and that now opens up some options for us now these options are just literally conditions for when and we we use this new template now we're keeping this really really simple so I don't want to go into too much detail and like I say I've covered this in its own dedicated tutorial so I would definitely recommend taking a look at the theme builder tutorial if you want to learn more about that what we're gonna do is we can say we've got include or exclude and then we can choose where we want to use it so at the moment it says of posts and as you can see if we expand that we have lots of different options because we've only set up a really simple set at posts is perfectly fine or you can do them as you could say you want to assign this to all posts or to specific posts as we're happy with that we'll say save and close and we've now created our single post templates that will be referenced and used for our particular website so let's 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 holo theme now if we refresh this page we'll find this our new design with all the details that we've just put in there so the name of the vehicle the details the manufacturer all those kinds of good things are used inside there so that's how we go about creating the single post template the next thing we do is take a look at how we can create an archive template and make everything just a little bit neater and a little bit sleeker 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 more stylish well again we're going to come back into Elemento I'm going to close out of our previous dashboard section they come into our template section again and we're going to come in and say theme builder from there we're gonna just choose archive so what we've done that we know - the same kind of process we did last time to create the single post template add new I'm gonna call this default archive and say create template that's going to notice into Elementor pro editor and also take us into the blocks in the pages section so if we wanted to use one of the predefined pre-designed layers we could do that but again I'd rather show you from scratch so let's close this down we're gonna - you can see again because you chose an archive we now have the archive section available on the left hand side so this makes it really easy we're going to do is we're gonna just pull in the archive posts and drop that in there now what that's going to do is that's going to use the normal default WordPress loop and what that really means is it's just going to loop through all the different posts that you've got and I'll display that inside here and we have been control various different aspects of this and styling options and so on so we can see at the top we've got skin as an option so we can click on there and we can choose between classic and cards so we can see cards and you can see that now changes the design on them if you want to we can go through now and choose exactly what we do and don't want the show as part of this archive so let's just say image is perfectly fine we're going to choose the larger image because it looks a little better quality wise title is perfectly fine I'm going to come down we're going to say we don't want to worry about comments and we don't want to a date you can see that now it removes those from there in real time read more we're gonna get rid of that as well the taxonomy is what you can see currently it says and categorized so if you were using different categories you could have those listed as part of this archive we're going to turn those off and we're going to turn the avatar off as well so we've now got a really simple clean looking step set up for our archive page I would recommend to put in pagination on and enable in that just to make sure that when you get more vehicles or more posts on there you user has some way of moving through to the next page of archive pages and so on and so forth so we'll say yep that's perfectly fine we say numbers and previous and next and again we want to install that now you're not seeing anything because obviously there's nothing actually on you here to see at the moment so we'll say that we're happy with the way that looks we'll say publish and again we take you through to that condition section so we'll say add a condition and in C pretty much works the same way but obviously because we do have an archive then the condition that's going to be used is going to be slightly different so the one who says all archives we click to expand that you can see we have a different set of ways of going through and specifying exactly what archive this would be used on now for me I'm perfectly fine with all archives but obviously they could say if you wanted to go through and specify different four categories for child categories and so on or tags you can do that inside you and again all these things are covered in a lot more detail in that tutorial that'll take you through and show you how to use the Elementor pro theme builder so you say all archives will hit save and close and we've now created our custom archive let's come back over to our website and because you set this for all the archives anything that uses an archive page will now use our custom built template so let's click to refresh and there's our custom template being used if we click and go through there's our custom template being used for the single post type so we've now not only created custom archives and customers single post templates we've also pulled in data from advanced custom fields and we can keep on repeating that to create far more complex and comprehensive websites using just these basic skills and before we wrap up this particular section let's just come back into our editor gonna close out of this and I'll show you how easy it is just to set a header and a footer for your site so again inside the theme builder we're going to come into there we're going to choose header this time add new header we're just gonna call this default header and create our template once we've done that we're gonna use one of the predefined templates as part of Elementor so just as a quick way of doing it but if you wanted to create this from scratch using all the normal tools inside element or an elemental Pro you can do just that however let's just keep this really simple and just choose a nice simple header so we'll use this one and we'll say insert that will then insert that into our page and you can see it's now looking for a logo image and for our menus we're not going to worry too much about that at the moment we'll just hit publish at our condition so again you can see it's all just repetitive it's doing 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 header for the entire site for archives and for singular we'll say entire site is perfectly fine and save and close and that's now associated that header with every single page we create on our site we'll do the same thing again now we'll exit out dashboard but I come in and we're going to say theme builder and from there we're gonna say footer and then say add new footer so I'm going to do is come in and say default footer create our template we then choose our template we're gonna use a predefined template again we'll just choose a nice dark simple layouts we'll choose this one insert that in and then what she's done that will hit publish add our condition entire site is perfectly fine hit save and close and we are now done so let's come back take a look refresh this with our new header at the top and scroll down our new footer at the bottom so what we need to do now is go and set up things like the menu you want to use in the add the logo into your site and just do any kind of fine-tuning to make sure you've got plenty of space around the various different elements and everything is looking really good so I've gone ahead tweaked a few bits and pieces put a logo in for some navigation in and just style things out a little bit tidier and neater so you can see what we've ended up with now is a nice simple way of gonna look we'll 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 of working with advanced custom fields but what if you want to take this further 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 what you could do and I'm not going to cover this in this particular video I've already covered this in other videos and if you want another sort of beginner's guide to use these kinds things let me know in the comment section below and I'll 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 plugin called custom post type UI that will then allow you to create custom post types so for example instead of using the posts for your vehicles you could create a custom post type for vehicles and then you could have those two separated you could also then create another custom post type for manufacturer information and have different information for each of the manufacturers they there's a real 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 blog which use custom post type custom loops and a whole range of really cool things to create a much more bespoke website so if you are looking to take this to the next level again and just add in extra functionality custom post type UI is definitely one of the best options to take a look at anyway there are lots of different ways you can take these skills and these topics that we've covered in this particular video but this should give you a good beginners grounding in how you can use advanced custom fields alongside WordPress and Elementor Pro well there we go that's the beginners guide to using advanced custom feels an element or pro to create more advanced WordPress websites hopefully you've got a lot out of this video and you've opened your eyes to some of the things that you can do with these fantastic tools if you did get something out the video let me know in the comment section below what you thought of it what you learn from it and how you think you can take this and your WordPress websites to the next level now speaking of taking your WordPress websites to the next level if you want to learn more about advanced custom fields Elementor pro and all the kinds of great things you can do with these tools take a look at the playlist that's listed in the description below and 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 are in the description below mine is being poor see this has been W Peterson until next time take care you

Channel: WPTuts

Views: 56,923

Rating: 4.9488492 out of 5

Keywords: advanced custom fields elementor pro, advanced custom fields elementor, advanced custom fields, advanced custom fields tutorial, advanced custom fields wordpress, wordpress advanced custom fields, elementor pro, elementor pro tutorial, wordpress custom fields, elementor acf, acf elementor, acf wordpress, wptuts acf, wptuts youtube, WPTuts

Id: T07L96f_pso

Length: 42min 26sec (2546 seconds)

Published: Tue Nov 05 2019