Advanced Custom Fields & Elementor Pro Tutorial

hey everyone welcome to this new WordPress Advanced custom Fields custom post types and taxonomies tutorial now if you're new to these terms fear not because I'll be breaking them down into bite-sized chunks and showing you how to use the tools to create a more customized and functional WordPress site are you ready then let's get started [Music] so first things first let's talk about what I'll be covering and what the terms actually mean so first up we have advanced custom Fields all ACF now this is a WordPress plugin that lets you add custom fields to your WordPress editing screens and a lot more next up we've got meta Fields now these are Fields can hold all kinds of data like text images and even references to other posts website addresses and so much more then we have custom post types or cpts these are a way of creating your own types of content in WordPress now WordPress comes out of the box with post types like posts pages and attachments but you can create your own handle any type of content then we have taxonomies these are a way of grouping content in WordPress categories and tags are taxonomies that come built into WordPress but you can create your own then we're going to take a look at displaying everything so once you understand the terminology use the next thing we must need to look at is how to display that new content the next you might be asking yourself why would you want to use these features well they allow you to make your WordPress site more bespoke and they can make your life so much easier as a developer so for example you might use custom post types to create a job listing section on your site with custom fields for job title description and application links and all those kinds of good things next up let's take a look at how we start using everything so the first thing you want to do is install the advanced custom Fields plugin to get started with all these features now you can do this from your WordPress dashboard and that's exactly what we're going to do right now so simply head over into your dashboard and from there come into the plugin section and click add new next we're going to search for advanced custom Fields let's install it and then activate it and now we have advanced custom Fields installed as part of our WordPress setup if we take a look on the left hand side you can see we've got a new entry called ACF Advanced custom Fields now I'm going to be using the free version for all of this tutorial because there's more than enough inside here for most use cases but if you want to check out what the pro version offers I'll link that in the description so you can take a look at the extra features and if you actually need them for whatever you're working on so once ACF is installed we can now create a custom post type and that's where we're going to start now for our example we're going to set up a new custom post type called job and we're going to use this to create a really simple job listing but this is just scratching the tip of what you can do with ACF and all of the options this opens up to you now to add a custom post type in all we need to do is head over to ACF and choose the post types option once we're inside there we can now create our post type so let's do just that click add post type and this will give us all of the options now there's two ways in which we can work with ACF we can keep it really simple and just put in the most basic of information and if you're just starting out that might be more than enough for what you want to do but you can also use the advanced configuration and I'm going to show you both ways of working so first of all we're going to give this a plural label so we're going to call this jobs the singular is job and the post type key will automatically be created for us now this is what you'll see to organize your custom post tabs so you have your domain mydomain.com forward slash job and that's where you're going to find all of your new listings and things like that again I show you this as we go through taxonomies we haven't created any of these yet but you can see that we've got the standard normal WordPress ones available to us categories and tags and so on we're going to leave those as they are we can create taxonomies a little later next up we can choose the most basic of information do we want to make this public yes we do we want people to be able to see it on our website do we want to make this hierarchical do we want to have this so we can have sort of like parent and child elements so for example you may have a job type and a certain department for example Media or advertising and then inside there you may have different job roles that are sub job roles and you can use a hierarchy to create a nice logical way of grouping all things together I tend to like to enable this because it just makes life a little bit easier in organizing using the normal WordPress dashboard you don't have to if you don't want to and we could if we wanted to Simply hit save changes and we would be done we will create our new custom post type but let's take a quick look in the advanced configuration now don't be put off by this thinking there's going to be things inside you that are going to be really complex yeah sure there are some things but we can leave those at their default values so there's a couple of things I just want to explain so you get an understanding of how you can customize visual custom post type in the WordPress dashboard now first up we've got the general Tab and this is going to allow us to enable or disable standard default features that you're used to inside the post section and probably inside the pages section of Wordpress things like the title of the postal page the editor which is where you can put the content and things like the featured image so these are enabled by default but you can if you want to disable them if you need to we're going to leave all those enabled but if you wanted to add extra things inside your like author excerpts custom Fields comments revisions and so on you could do that as well if you want to add a description in you can do that so let's just add a simple description we'll just put in current job vacancies and I'll show you where this displays once we've created our custom posted it's useful if you're using this kind of setup to actually share with other people inside your company or you created it for a client this is just a nice little visual prompt that says what this particular post type is all about you can use it or you can ignore it next up we can hop over to the labels section now when you go into anywhere inside WordPress for example you come to post you'll see you've got things like all posts add new categories and so on these are basically the labels that are default and you have default labels whenever you create any kind of custom post type but if you want to override these with your own ones you can do that inside the label section I want to leave these as they are but if you want to you could easily come in and customize this to get exactly what you want to display pretty cool next up you have the visibility option and this is where you can choose a couple of useful things for how your new custom post type is going to be displayed inside the dashboard so first of all do you want to show this inside the UI in other words is it going to be shown up inside the dashboard itself yes we want to do that show in the admin menu this is at the top section here do you want to have the ability to add new in this example jobs well we can choose that and set that left to yes I will enable it the admin menu parent we don't need to worry about that we'll leave that if you want to adjust the position where it displays on the left hand side you can do that inside here I'll leave that as it is for now but you can always come back in and input of value if you find it doesn't go where you wanted to if you want to add in a dash icon you can do that very easily so let's go ahead and take a look at how we do it you can see we've got this Dash icon class name let's click to open that up in a new tab and this now shows us all these different kind of Dash icons that we can use so we want this for jobs so let's just say we're going to use something really simple like this users icon we'll select it and you'll see we get this little piece of code that says Dash icons Dash admin Dash users let's copy that let's hop back over into WordPress and we're simply going to paste that inside there now when we create our custom post type it'll have our own custom icon that we've selected from Dash icons totally free and super easy to do we're gonna leave everything else in here as it is next up you've got your URLs if you want to change things inside here you can do that very easily the only thing we need to include is this option for archive if we don't do that we can't create a list of all of our new jobs and that will make it a bit of a problem so we'll enable that feature and other than that we're going to leave it as it is we don't need to fill anything else out then you've got your permissions which we're going to leave exactly as it is and finally you've got the rest API which is Way Beyond what I want to cover in this video and something you really don't need to worry about at this point in time so okay we've done everything we want and you'll see we've changed a few things using the advanced configuration let's hit save changes and now you can see that saved if we take a look on the left hand side there's our new job section using the icon we've just created and inside there we've got all jobs and we've got add new so it's really simple to set things up you'll also notice at the top we now get this little green pop-up that allows us to do some of the things we may want to do next it's very common when you create a custom post type that you want to create custom taxonomies or assign custom meta fields to it we're going to do all of these things as we go through this tutorial just so you know though they are there if you want them but you could also access those on the left hand side underneath the ACF menu for now we'll leave those let's just simply hop over into the new job section and you'll see this now shows us a really basic layout we can add a new job in and you see we can have the job title and the date and that's basically all we have if we open up add new this simply looks exactly the same as any other post type you create inside WordPress your title your content your featured image it's going to operate in exactly the same way as you're used to when it comes to working with standard WordPress post types so next up we'll create some custom fields for our new job post type this is very easy to do we can add extra fields in things like the description or the application link anything we kind of want to do and for that we're going to use custom meta Fields so let's take a look at how we do that now inside ACF so once again we're going to come over to the ACF section on the left hand side but this time we're going to choose the option for field groups now field groups are a way of creating one or more meta Fields now meta fields are basically things like your title your description your featured image they are built in standard meta Fields but we can create custom ones that's exactly what we're going to do here all we need to do is add new we've got to give this a name so we're going to call this job details once we've done that we now have some options underneath and this is where we start to create these meta Fields now if we expand this first option out where we can choose the field types you can see there's an awful lot of options some are pro and you can see they're grayed out because can't access those but there's more than enough inside you to do most things and as you can see there's an awful lot of options and I can't cover all of those in this example but we're going to take a look at some of the basic ones so you can either access those and choose what you want by simply using this select field or you can click on the browse Fields option to open up a nice user interface that has a simple pop-up that gives us a little bit more information about any of the field types that we have you see things are grouped across the top we've got popular to start off with some of which are pro you can jump over to basic content Choice relation and so on if we choose something like basic you can see inside there if we choose any of these for example this text area it will give us some more information over on the right hand side and a link to the documentation which allows us to find out exactly how this all works and how we can start to use it in various different ways so all the settings available all those things so if you're ever wondering how or what something does you can simply use that option to jump over the documentation okay so let's go ahead and add in a couple of fields so first of all we want to put a number in because we want to put the salary that's associated with this job role so all you need to do is Select number from the list we can come to the bottom where it says field label and we'll put in salary we'll click on select field and we've now created our first custom meta field you'll see the field label has been inserted and the field name is automatically been populated for us and we could if we wanted to Simply basically leave that field as it is however we do have some more options we can jump into validation we can make sure this is a required field so we'll say yes we want to enable that do you want to put minimum or maximum values in in this example doesn't make a lot of sense but it's there if you need it you can hop over the presentation and this is where you can do things like you can add some instructions in to help anybody that's filling out this information to know exactly what any particular field is needed for now for this example let's put one in just so you can see if you want to put some placeholder text in you can do that and that will put a pre-filled number in this example into that input field if you're using step sizes you can use that inside you and then we can choose to prepend or append any files you want so for this example let's put a pound inside the prepend so people know that they're working with a monetary value if you want to you can also set the width for this field so let's say we want to make this like 33 percent then you've got your conditional logic now conditional logic is useful if you want to show or hide Fields based upon the value of a different field so for example if you had a checkbox that says is this a voluntary role and the checkbox was yes then you could disable the option for inputting a salary because it wouldn't make sense that's where you can use conditional logic again these are things that we don't need to worry too much about in this example but it's very very easy to work with and if you need it it's there finally once we've kind of set up all the fields we want and we'll come back down a couple more in a moment you've then got the settings option now this allows us to choose exactly where and when this new field Group and any of the associated custom meta Fields will be used inside WordPress you can see by default it says the post type is equal to post so it will automatically add any of these custom meta fields in this group to the normal post type which is not what we want so what we need to do is change this from post type is equal to and we'll change that over to our option for jobs so we'll just choose job from there and you can see that's now added that in and we can say add another rule if you want to add a second one in or we can change any of these inside here so you can see there's an abundance of different types of places that you can use these custom meta fields and meta field groups if you want to learn more advanced options with this let me know in this comment section down below and we can take a look at creating some more advanced options to show you more about what you can do with ACF for now let's leave it as this really basic setup then you've got presentation this is where you can customize how you're going to actually display the content inside the WordPress editor inside your custom post table or any way you're going to associate these meta fields and finally you've got your group settings where you can choose some additional options we're going to leave everything there as it is okay so now we've set up where it's going to be used we've added a salary field in let's go ahead and add a couple of extra fields in so we can see some more field types we can start to use let's go ahead and add a new field type from there we're going to use the browse fields and we're going to choose an option for choice and inside there we're going to choose select we'll check that from there and we're going to say location now this is going to allow us to have a simple select field so we'll say select that field and now we can do is we can go ahead and fill out those choices so everything is pre-filled for us we just need to import our choices so we're going to say we've got a couple of offices so we can say there's one in London and when it comes to your choices you can set this up in a couple of different ways we could leave it as it is now just by having London but you may have a different value that's been displayed on the actual dashboard itself and what you want to save as your data so if you want to do that you can simply put a space and a full colon and then you can put your second value so we can say something like that it doesn't really matter for this example though we're going to set it back to just be London for both and we'll repeat this a couple of times and there we go we've now inserted the values we want to use then you've got your default value so you can see next up you then got the return format how you want to actually output this information you've got your value which is your first value you can see inside here which would be London in this case your label which is the second value which again is London but if you had a different label to the actual value they could be listed inside here or you went to actually output both of them in an array we're going to leave this set up to be value because it doesn't really matter which one we choose and if you want to allow people to select multiple values you can do that from here again you've got the options then for validation do you want to allow people to have no value in there at all or is it something they have to choose so we can say this is a required field that we don't want to allow them to to not choose something and again you've got your presentation so you can see we've got stylized UI we've got instructions everything has more information underneath it again we're going to set this to be 33 and we don't need to worry about conditional logic now the third and final field we're going to put in allows us to upload a field as part of this that then the end user could download which could be the application form so we'll add one more field again we're going to choose browse fields which is the option for file we're going to just put this as application form select our field and then we can set up any values we want inside here so we've got the return value where we're going to say we want the file URL so it makes it that it's easy to see that anyone can download this from the front end and I'll show you how to do that then we've also got the library and we've got upload to post in other words do you want any images or files to be uploaded so anybody can access them as part of the normal media library in WordPress or do you want to upload this only to this post so it's not accessible to other people in this example it makes sense to upload it only to the post and again we've got validation and as before we can set this as required we can also set at the minimum and maximum file sizes we can say we don't want to be any smaller than one megabyte and we don't want any bigger than 10 megabytes and then we're going to say we only go to allow PDF documents or Word documents and that's going to restrict this if anybody tries to upload something like an image file or something else they can't upload it presentation again we can set this is what we want we'll leave everything inside there and we don't want to worry about conditional logic and once we're done with that we've now completed our custom Fields we're going to associate with our new jobs role so we'll do is click on Save changes and now we've created our first field Group and Associated that with our new custom post type so let's hop over into jobs let's say all jobs and now if we click to add new you'll see we have some additional Fields salary location and application form to upload a file so everything we need is now located inside the dashboard in our new custom post type so the final thing we're going to need to do is allow us to organize things into a logical fashion to do that we're going to use taxonomies so let's head over again into ACF this time we're going to choose taxonomies we'll click add new and we're going to give this a plural label of job departments single enable of job department and we'll leave that as it is Select our post type what do we want to associate this new taxonomy with well it's with our jobs so let's choose the job from there there we go and again we've got some options and again we can keep this to the simple version or we can delve in a little deeper into advanced configuration so again we want to make this hierarchical because like I've said we want to organize this in multiple different ways where we might have an overarching sort of department and inside there you have sub departments it makes sense to have hierarchical let's hop over now into advanced configuration and you can see inside here we've got some more options again we've got the ability to make this active add a description in do you want to allow sort terms yes we do it makes life a little bit easier so we can sort those based upon the terms for the taxonomy coming to labels again we can if we want to change any of the labels inside here or we can just leave them at their default values which in most cases is perfectly fine visibility again we want to show this in the UI and in the admin menu we also want to show an admin column so we can start to see at a simple glance inside the job section what department any job role is going to be associated with again tag Cloud Quick edit all perfectly fine so we want to access those we don't need to worry about the URL we will set the hierarchical and we don't need to worry about the rest API so we can click save changes and that has now set things up now as we've seen before when we created our custom post that we get this new section at the top with a couple of quick links inside there which we can use to add fields to the job department and so on so if you need additional Fields you can do that we just want to use this for organizational purposes so we're going to leave those so if you come over to jobs now you'll see we have new options that says job departments so this is our new taxonomy so we click to open that up you can see we can now go ahead and add in any kind of taxonomy that we want for the job department so this is exactly the same as you've seen when you're working with tags or categories that are part of the normal WordPress posts so let's do that let's add a couple in let's add one in for marketing all we need to do is click on add new and you'll see there's our marketing if you want to add a description we could do that you'll also see we've got the parent job department so let's say we wanted to add something to marketing so we could just say advertising for example and we say that this is linked to our marketing and we'll add a new job role and you can see that's now indented so we now have this hierarchical setup so marketed is the parent then we've got this advertising which is a child if you want to change that we can simply edit this and we can take that from there and say none and say advertising is actually its own department and you'll see now we have that set up like so so you could add as many inside you and use whatever hierarchy that you actually want to use and now we go back to all jobs you'll see we get this job department so this already inserted in here so we can easily see what department any new role that we add in is going to be listed in so let's go ahead and add in some basic content so you can see how this will start to populate so let's go and add a new job in we'll give this a title We'll add in a description we'll just use a fill a text for now we'll go ahead and we'll add a featured image we'll choose this one we'll come to our job departments and we'll set this to be marketing but you can if you want to add extra Fields inside sure our salary will set that up we'll say the office is Cardiff and we can upload our application form I'll just use this one for now we'll click on select and we've set everything up that we need so we're going to go ahead click on publish click publish one more time and there's our marketing manager all set up you can hop back out of here and you can see there's our marketing manager tells us which department and the date that it was published if we want to come in and quick edit this you can see we can add our job department and anything else we set up to be quick editable inside our meta fields and so on will be accessible inside here as well how to create our custom post type how to create custom meta fields and group those together and add them to our custom post type we've also seen how to create taxonomies and how to associate everything together to make it a one cohesive way of setting up our job listings now the next thing you're probably wondering is how do we go about actually outputting this to display it on our website now there are lots of different tools you can use if you don't want to use anything you can get stuck in and start using ACF itself however that's beyond the scope of what I can cover in this video [Music] so for this section we're going to be using Elemental Pro now you need the pro feature because we want to work with our Dynamic data we've created in the first part of this video so let me quickly show you how things are going to look and then let's go ahead and recreate everything using Elementor Pro so this is our kind of home page landing page whatever you kind of want it to be it's all about those jobs and if we scroll down underneath you can see each one of these now is our individual job each one of these is one of our ACF custom post type records our marketing director Junior copywriter and so on so you've got information inside you about the location of the actual role the salary the details and so on we can click through and go through the full job details and what we've done at the moment is I haven't set a template up for this so if we jump over what we're going to see is a very basic layout that doesn't include any of that Dynamic data we're going to rectify that we're going to create all the templates needed to get up and running using Elemental Pro to Output our custom meta field data data for our job roles so go ahead and start doing that now I am going to assume that you have a basic understanding of how to start working with elemental and Elemental Pro and we're going to be using some of the currently experimental features now you're going to need to use these to get the full effect and they are relatively stable so you should be okay but obviously bear this in mind if you're following along with this and you want to use it on a live site so coming over into the settings section for Elementor we're going to hop into the features section we're going to make sure we've got the flex container enabled the grid container we'll scroll down and we're going to make sure whether we have the option for the loop we're going to make sure that's set to be active and that's basically all we need we're going to click save changes and now we have all the tools we need to be able to start working so we need to do is go ahead and create those templates to do that we're going to come into the template section and into a theme Builder now for this example we're going to create two templates we're going to create an archive template and we're going to create a single poster template and inside the archive template we're going to have a loop template now don't worry this all sounds a little bit confusing it is relatively simple and straightforward what we currently have though is just simply the header section and the footer section they're the only templates we currently have so we're going to do is we're going to come over and choose the option for archive we're going to click the plus and this will open up the library we can choose predefined layouts we don't want any of that we're simply going to go ahead and close this down and now you can see what we have is our header section and we have our footage section and nothing in between this is where we are going to create the basic archive page and we're going to assign then conditions to use that throughout most of our site okay so what we're going to do is we're going to say we want to add a new flexbox this is going to be the container that's going to contain our loop we're going to choose the first option and this is an output a basic container in if we look on the right hand side underneath the Navigator you can see our container and currently nothing inside it let's come back over now click on the Plus in the top left hand corner and we're going to scroll down until we find the option for the loop grid this is one of those Pro features we're going to drag this into our container and this is where we're going to start to build out the loop that we've seen on that original section so if we go back to our test page this is effectively our Loop each individual item inside here is one item inside the overall Loop for our jobs now when you insert the loop grid you can see it drops in a basic placeholder and asks us to start off with the template now you may have created a template separately in this example we have no template to assign but if you had you'd simply use the option here to choose the template you want in our example we're going to click on create a template either in the main area or over on the left hand side both will do exactly the same thing if you look underneath we've got the query option now currently this is said to display posts and what we want we wanted to display our jobs so let's choose that I'm going to scroll down till we find jobs which have a custom post type and you'll see nothing currently changes because we haven't created the template but at least now it's going to display the right information let's go back to our layout let's create our template yes we're going to save the changes so we don't lose anything and this will now switch us over into the template for creating the loop you can see things have changed a little inside Joe we can jump back to edit the archive at any point by clicking the edit archive or we can just say save and back to go back to the archive both will do basically the same thing but then this area we have here this is our Loop item this is our template for our Loop so we're going to do is we're going to start building things out so first thing take a look at the left hand side you can see we've got the recommended widgets post title post excerpt and so on most of these are going to pull in the data that we want so we're going to do is we're going to say we want to grab the featured image we'll simply drag that over into the area inside our new template and you can see that now pulls that in now obviously nothing is being displayed at this point in time which is a little bit frustrating but it's not the end of the world we're just building the template out we'll leave the value set as they are we're going to set a link on here so we're going to click where it says None and we're going to say custom URL and once we do that that will open up the ability to add in a link we're going to use the database icon for dynamic tags and this allows us to then reference various different parts of our site information Dynamic content and so on we want to use the post URL so what this basically is going to do if someone clicks on the image it will take them over to the actual job details and then they can view the full job information simple as that let's click on the plus take us back over and what we want now is to grab the post title we'll drag that underneath our featured image you can see this just basically pulls in the hello world which is a basic post that's perfectly fine again we'll leave that as it is we'll change this over to something like H3 we can customize the typography if we want to but let's just get everything working we'll come back to the styling a little later next up again click on the plus this time I'm going to grab the post excerpt drop that underneath the title and we can do now is that again will only show us the placeholder kind of block we can come over where it says post excerpt click the little wrench icon and that allows us to set some various different parameters we can set the excerpt length so we'll say 30 characters or 30 words I should say and then it says apply to post content and what that basically means is if you haven't used an excerpt which is a native WordPress feature use the actual post content but then break it down to only show the first 30 words of that content we're going to say yep that's fine we're going to say apply that advanced we don't need to set anything inside Java before after all four bucks so we can leave that as it is and you'll see this now at least populates something with a little bit of info let's grab that now from the actual content that's great okay so next up what else do we need let's take a look at our example you can see we've got our title we've got our details about when this was posted the time or so on the location the salary which are our ACF feels and a full job details button so let's go ahead and add in this data that we've got for when it's posted okay I'm gonna come back click on o plus we're going to grab the option for post info and drag that underneath our title you see that pulls in what it considers to do the right info we're going to get rid of comments we're going to get rid of the author and we'll leave the date and time inserted on there and if you open these up you can customize this information if you want to you can change the format so you can see we could say we wanted that format or we can change this over to something like this format we can customize it how we want to if you want to put in before information you can do that if you want to add in or delete the icon you can also do that and the time works basically exactly the same way what we're going to do though is we're going to hop over into the style option and we're going to just make this just a little smaller so we're going to drop into the text section and you can see we've got the typography let's select the little pencil icon let's set our size we're going to change this over to Rems and we're going to set this let's try something like 0.8 there we go that's a little bit smaller and looks a little bit nicer I like the look of that and we can do the same for the icon you can see we can change this over we can set this to be Rams and as well and we can set that to be 0.8 to match size wise so everything looks as we wanted to want to change the colors you can change the color here I'm going to leave it as it is for now Okay so we've got most of the basic information inside there now we need to start pulling in some of that ACF data so it's pretty easy to do I'm going to do is going to come back click on the plus I'm going to come down and we're going to grab ourselves just a simple text editor you could use a heading if you want to both will work basically the same kind of way we'll grab this text editor we'll drop that in between the information we've just put on there and you can see that now just basically pulls in some placeholder text which is not what we want so let's click on the little database icon for dynamic tags one more time scroll right the way down past all the options and right at the bottom we have ACF field let's check that option and you see now what happens is that says we're going to put AC failure but it doesn't know what field to insert let's just click on the little wrench icon and then we can open up the key and inside there it will show us all of the ACF fields that are applicable to working with text in this example so first one is we want to select the salary and that will then put in the salary information let's jump into the advanced and we're going to do is put in information before so we're going to say salary the pound sign in there and we're going to put an after and we're just going to put per annum so now we've put in information before the dynamic data and some information after the dynamic data so we'll have nicely formatted information so we can do now is we can just basically duplicate that so if we come over to the right hand side for the Navigator we can click on our text editor right click and duplicate we now have two copies we're making sure we've got the second one selected we're going to click on that wrench icon change that from salary to location change our Advanced and get rid of the after and change the before to location okay so we're pretty much on a roll we've got the basic information inside you next up we need to put a button in that'll take us over to the full post so when someone clicks on the actual image or they click on the button it will take them to the same thing so again we're going to click on the plus with a scroll until we find the button and drag that into our design underneath and then we can do is we can just format this and Link it so we're going to change the click here to so like view full job info where we've got the link you can see that's using a basic null link we're going to click on our Dynamic tags one more time are you going to find you're going to click on Dynamic tags an awful lot when you're working with Dynamic data like content from ACF let's click on there and like we saw before we're going to just choose the option for post URL so that'll link it through to the post itself we're going to change the size over to something like medium and then we're going to come into our style and let's set this to match up with our buttons in the rest of our design so our text color we'll set that to one of our Global colors which is white and we'll set our background color to another one of our Global colors which is our accent color that now looks a lot better and I'm going to come into our typography I'm going to click we're going to leave everything set inside you except for the weight which we're going to make just a little bit heavier we'll try something like 700 so it stands out a little bit better finally all we're going to do is come to the content area we're going to set this to be justified and we know how our basic template created we can fine tune and refine this easily but for now let's just say we're happy with that we're going to click on Save and back and now when we jump back out into the normal archive template you see we now have all the information the dynamic data and everything laid out the way that we wanted it to everything is inside you you can see it's all laid out we've got our six examples so it's pretty cool and pretty easy on how you can set things up if you want to edit that template anymore you can simply come in click on edit template that will take you back into the template itself and then we can go ahead and we can customize things a little further now working like this where you can't see what's going on can be a little bit confusing and a little bit awkward so is there any way we can actually handle that well you can all we need to do is go ahead and choose what data we want to use inside here so we're making sure we've got this template selected if we come up to the top you can see Loop item settings if you use any old kind of layout for Elementor if you literally scroll down to the bottom on the left hand side you have the settings icon there which is basically exactly the same this little Cog icon if we click on there you can see we've got the preview settings and the query click on the preview settings and you can set up various different things including what you want to display so the moment this is set to posts and hello world but we can click on there and say job and we can pull up any of our job items if we wanted to so let's just say start typing in marketing and we'll say marketing manager apply and preview and after a second or so you can see that now updates and displays the right information for that template just makes everything just a little easier so what I'm going to do is I'm going to quickly apply some style into this just to make it look a little nicer but like I say the whole point is we've got the dynamic data in there you understand how that works now just with styling which is standard what you do with Elementor there we go I'm apply a little bit of styling let's just say save and back and we now have everything laid out if you want to make sure that everything looks the way you want inside this Loop we can simply select the loop either from the options on the right hand side the Navigator and click on there or you can come over the item inside the actual editing pane itself and click the little pencil icon and then we can make sure we've got things like equal height setup the number of columns you want to display the number of items per page and if you want to update the query you can update that and inside here you can set things up to include or exclude various items how you want to organize things how you want to sort them descending ascending and so on it's relatively simple and straightforward you can also go ahead and set pagination so if you have a lot of actual job roles inside you you can make sure that you can page through any of this information so we'll say we could just select previous next numbers and so on and then they'll actually display at the bottom when we have more data inside you and again you can control all the aspects of styling and so on and that's basically how we set up this template let's go ahead and click on publish and what that'll do is it'll ask us to set up what we want to use this on in other words what conditions we want to set up that this template gets used now if we click on ADD condition you can see the default is to include all of the archives throughout our entire site now this is sometimes the case and other times you may not want to have that you may want to have different templates for different archive Pages search result Pages you know different sort of sections like that but if you click and drop this down you can see you can filter this down quite granular so for example we can have just things like the job archive job departments direct child job Department of and so on so you can really get quite granular for example all archives works perfectly fine but let's say you wanted to have all archives except for maybe just the search results page where you could add another condition in and you could say exclude and then you can choose what you want to exclude so for example the search results so now this will this template will be used on all of the archive pages except for the results page for any searches pretty simple to do we're going to do is we're going to get rid of that so we'll just use it on all of the archive Pages hit save and close and we've Now set the conditions for where this template will actually be used so now we come back over to our page you'll see we have the original design where we've got things side by side let's go ahead and refresh this now to use our new template and you'll see now things are a little different the size is slightly different and so on but everything is still laid out the way that we just set it up so it's relatively simple to set this up and now if we go ahead and click on view full job info that will take us over into that particular job raw and if we come back out we click on the image that will do exactly the same thing [Music] so now we need to create the template for our individual job so we're going to do it pretty much the same thing again we're going to come back out of here we're going to exit back to our dashboard we're going to come into the theme Builder and this time we're going to choose the option for single post again that takes us into the library where we can use any of the pre-built templates but we're going to go ahead we're going to close this down and start off with a completely blank slate now this is again going to be relatively simple we're just going to pull the pieces in some extra things I want to drop inside here as well but the whole process is basically the same so we're going to do is we're going to click to add in a new flex box we'll set this to be the column you can see if we take a look at the container on the right hand side that's going to be empty at this point in time and we come back to our plus you can see we've got all the same ones we had in the previous kind of template plus some additional ones that are specific to working with the single post or page templates so first of all let's go ahead and drop in the featured image now you can see again we're not seeing anything so we can do is we can count our Cog at the top or on the bottom left if you're on the older design we can set this up then we can say our previous settings we want this to be a job and we're going to go ahead and we'll just say again we'll do the marketing marketing director apply and preview and you see that now pulls in the image so we can start working with the data that makes a lot more sense now what we need to do is go ahead and build up all the different pieces that we need so like we've seen before we'll grab the post title now I'm not going to worry about styling all this I'm sure you're more than comfortable styling everything and if you set up your Global Styles everything's going to be configured the way you want it to anyway so let's go ahead and just drop in all the component pieces we're going to do the post content come back over to our Plus we'll go ahead and grab our post info like we did the last time we'll drop that in there and we'll get rid of the comments and get rid of the author we'll leave the date and time on there again you could style these how you wanted to come back click on our plus and we're going to do now is we're going to go ahead and add in some extra information so obviously we need to grab that data that we've seen that's a dynamic data from ACF so like we saw before we can simply come down use a heading or text editor for this example let's use a heading so I can show you the differences so we'll come underneath there we'll change this over now from H2 and we'll set this to be AP if a paragraph you can set to span or div if you wanted to and then we're going to do it we're going to click on the little Dynamic tags icon scroll down so we get the ACF Fields gonna click on the Range icon like we did last time we'll set the salary option come into advanced set the text we want to be before and after if you wanted to drop a phone back in for example maybe someone hadn't give you the actual uh sort of salary at this point in time you could put be on POA or whatever you kind of wanted in there you can drop that in this there's no salary something will be displayed and like we did last time let's go ahead and duplicate this and again like we did last time let's change that salary over to location change the advanced over we've now got our location inside here so you've got basically all the information we want inside here the next thing we need to do is drop a button in that allows someone to download the application form like we saw when we set up the ACF Fields so let's go ahead and add a button in like we saw before let's change the content let's change the styling and we'll come back to the actual link itself in a moment okay so now we need to link our button up to the PDF that we've uploaded as part of our ACF custom Fields so to do that we're going to come over to our Dynamic tags click the option for dynamic tag scroll right the way down to our ACF field click then click on the little wrench icon choose our key there's our application form we'll select that from there we're not going to worry about a fallback unless of course you maybe have a generic kind of catch-all application form you could drop the link in there if you wanted to we basically now have a simple setup for our application forms let's go ahead we'll publish This and like we said before we've got to set our conditions so let's say add condition you can see by default it's a catch-all for all singular we can easily change that and we can say we want to change this to jobs now these are basically hierarchical so jobs is the top level of your job custom post type then underneath is in a particular department or departments then underneath that is a child job of departments and so on so you wanted to catch all of the jobs but if we had other sections on our site like normal blog posts and so on we'd have a different template setup let's just choose jobs from here and say all is perfectly fine and then say save and close we've now created the template and set everything up now if we go back to our demo page and refresh what we had originally you see we now have our new custom layout well our content our information pulled in from ACF our download application form button which allows us to go ahead and grab that PDF form you see click on it will take us into the PDF this is just a test PDF so you can see how it works hopefully what you can see is it's relatively simple and straightforward to start pulling in that ACF data that we've created in the first section of this video now hopefully you found this useful and it's opened your eyes to how you can get started working with ACF alongside Elementor Pro now this is really scratching the surface of what you can do there are tons and tons of videos on the Channel showing you how to take this to the next level so if you want to go a lot further and create far more complex comprehensive sites I've got you covered with a ton of videos just do a search on the channel and you'll find loads as always all applicable links are in the description my name is Paul C this is WP tats and until next time take care [Music] thank you foreign

Channel: WPTuts

Views: 37,566

Keywords: acf elementor pro, advanced custom fields, advanced custom fields elementor, advanced custom fields elementor pro, advanced custom fields elementor tutorial, advanced custom fields plugin, advanced custom fields plugin wordpress, advanced custom fields pro tutorial, advanced custom fields tutorial, advanced custom fields wordpress, advanced custom fields wordpress elementor, elementor tutorial, wordpress acf elementor, wordpress advanced custom fields

Id: _3BrYFesQk8

Length: 44min 58sec (2698 seconds)

Published: Wed Aug 09 2023