How To Create A Food Blog On WordPress, ACF & Elementor Pro!

so if you've watched this channel for any length of time you'll know that I really do enjoy creating dynamic websites with WordPress today is no exception we're going to be taking WordPress elemental Pro advanced custom fields and some additional plugins we're going to combine those together to create a much more feature-rich WordPress website it's going to base itself around creating a recipe based website but don't worry about what the topic is the skills that we cover that's the most important thing so we're going to cover things like filtering with facet WP searching our advanced custom fields fields with searchwp also they take a little things like nested repeat regions a ton of really cool useful things so join me and I'm gonna take you through the entire process of building this website right now as always my name's Paul C this is WP test the channel where I help you get more from WordPress if this is your first time on the channel please consider subscribing and smashing our bell icon below to be notified every time we release new content okay so let's just start taking a look at the plugins we're going to use for this particular tutorial so the first thing to do now is go through a list of the plugins that we're going to use to create this website now as I said the top of this video some of these are free some of them are optional and some are commercial plugins that you need to pay for to get the functionality that we're looking for are there three alternatives out there they may well be but these are ones that I know work very well together and they are quick and easy and consistently good quality so it's up to you if you wanna do some research into some other options these are the ones we're gonna use in this particular video so we jump over now into the plugins section I can show you everything that's installed we've got admin columns advanced custom fields pro the pro version is being installed because we need to use the repeater regions however if the design you want to create doesn't rely upon repeater regions or any of the pro based functions you can get away with just using the free version anywhere Elementor Pro the reason we use in this one is because this opens up a ton of extra things we can do inside elemental that currently the pro version of element 2 itself doesn't allow us to do and as we go through those different sections I'll just show you some of the things we can do with that the classic editor I just prefer that over guttenberg again purely optional custom post UI that is a completely free plugin allows us to create the custom post types that we're going to work with in this particular video any custom skin there's a free version and a pro version for this example we're going to be using the free version however again if you won't use the pro version I'll drop a link in the description below so you can check that out elemental Pro because we need to have the steam building options facet WP because this allows us to create really simple powerful filtering options inside the website however there are cheaper alternatives out this and then later search and filter I think it's called or searching filter Pro that's another one you can take a look at that does very similar kind of thing facet WP elemental just allows us to link element or one facet WP together to make sure that they work seamlessly and finally we've got searchwp now searchwp just means that we can create a search which will go through all the various different parts of our advanced custom fields and our met the fields our custom post types and so on which the normal search function inside wordpress doesn't allow us to do what this also does is it allows us to fine-tune and apply weight and various other things to the actual content we want to search against so we can make sure that the search is fully functional so again I'll take you through some of the basics of that before we actually complete the site so that's the plugins we're going to use and I just want to reiterate one thing at this point in the video if you're not comfortable working with WordPress dealing with custom fields and doing things like the theme building inside elemental Pro I'd highly recommend you take a look at some of the other videos on this channel that'll get you to speed we're gonna go over those and we're not gonna cover those in detail we're gonna focus on how we can combine these various different elements together to create a much more feature-rich website using things like advanced custom fields so you say tons of videos on the channel and get you up to speed on how to use these tools this is not one of them there's a certain level of prior knowledge expected okay so what do we need to do to start off with well the first thing to do is create the custom post type we're going to work with on this particular website so we're going to do it code to the custom post types UI on the left hand side first I'm going to do is create our custom post type then we'll take a look at creating some taxonomy so we're going to link and allow this to go through and organize and structure the various different recipes in this example they're going to be used on the site so let's come in let's take a look what we have inside the add/edit post types now while there are a ton of options inside see ptui lots of them we can leave as they are some things we do need to put in first of all we got the post type slug this is all about recipes for this example so that's the slug that's going to be used inside our naming structure so we're going to put in post type recipes then we're going to put the plural so we're gonna call this a recipes and the singular underneath that so these are the values that are going to be used inside our dashboard that'll show us on the left-hand side you'll see that in a moment next if we take a look we've got additional labels now if you want to you can go through this and you can put a post type description to get some information about how this post type is meant to be used we could put menu names in there on all those kinds of things however for most examples you can leave this as is unless of course you're working in a different language and you may want to put in your language specific values we're gonna leave those as they are we're gonna scroll down now to the settings section and inside you this is where if you're not used to working with CPT UI you can get overwhelmed by all of the options that you have however we don't really need to change much in here what we're gonna do is we're gonna make sure that a few things are set up so you can see we've got things like public publicly queryable show UI all quite complex sounding things but reality is they're not hierarchical we want to set that up in here now if you're wondering what hierarchical means it just basically means you've got parent values for example you could have dinner and inside there you can have child values so you could have vegetarian you could have vegan you could have low calorie so there will be a subsection of that particular parent that's all that means it just allows you to create a hierarchy inside your custom post types we're gonna set that to be true so we won't have a parent and child relationships inside there you also need to make sure that we select has archive so we can use it with the archive setting so and then he has archive just change that from false to true and then we can move on to the next step okay so if we scroll down take a look at some of the other things you've got menu position showing menu main you icon and so on this again like I say these are optional values if you want to change things inside here you can do it's good to put an icon in this so it's something that actually has some kind of meaning to the end user when they're looking at all the options that are available so let's do that now now what you can do with the menu icon is we have a couple of different ways we could work with it we could upload one to our media library and use that we just drop in the link inside there or you can use the dash icons we're going to do is we're gonna use dash icons because it's a nice easy and free way of you know to add icons in that look consistent with our layout just head over to - I constitutes with search with - icons and you'll see what we have then is three values can't be CSS HTML and glyph above that we have the actual CSS class that's associated with this particular icon and if you scroll down you see you have a range of different free icons you can start to reference I've already gone ahead and copied this so I'm gonna do is just jump back over into my dashboard underneath the menu icon section we're gonna drop that in there and that will now allow us to use that icon when we save this out okay so if we take a look now at the bottom you can see it says supports these are the normal features you have inside your actual post type so things like the title the editor the featured image the excerpts and so on enable whatever you think is relevant to you for this example we just want the title the editor and the featured image we're going to leave that as is and then we can scroll down take a look at some of the other things so we don't want any custom supports we don't want to worry about built-in taxonomy just yet so we're gonna leave those as they are so that's the basics done and now what we need to do is scroll back up to the top and we're just gonna say add post type once that's done we should see now on the left-hand side we've got our new recipe section we've got all recipes and add new so we created our custom post type now if you ever create a custom post type or taxonomy and you make a mistake or you just basically want to change something it's very easy to get back to you just choose the cpt you write options on the left hand side if we're working with a post type or your taxonomy just choose the relevant one from there once you've done that you've got a tab that says edit post types you can click then you get a little drop-down that allows you to edit any of the post types and you can simply open up the post you want scroll to the relevant section make your changes and then just resave that and you aren't done the same goes for your taxonomy x' now the next thing we're gonna do is create our taxonomy x' so we're gonna click to open up taxonomy x' now if you're not sure what a taxonomy years or you've never heard the term before it's synonymous with wordpress of what it realistically means is ways of allowing you to group content together so we're working with recipes so we're gonna have a taxonomy called recipe type we're also gonna have another taxonomy that's going to be featured which allows us to do various different things an associate or group posts together and any of those custom taxonomy x' hope that makes sense you'll see what i mean as we go through and start creating some content and then linking everything together so let's just create our first taxonomy and this is going to be our recipe types so we're just gonna drop in recipe types and you'll see as I put a space in it'll automatically put an underscore in there for the taxonomy slug next up we're gonna put in the plural label so we're gonna drop recipe types in there and then the singular which will just put recipe type then we can attach it to a post type now the nice thing with this is taxonomy ZAR not limited to custom post types that we create we can associate them with anything else inside the core of WordPress so we could if we wanted to create additional taxonomy x' and then associate them with posts pages media and anything else that's associated part of WordPress itself and you can see it says posts WP core pages OTP court and so on these are core functions inside WordPress itself well we're interested in though is recipes which is our new custom post type click on recipes and we can scroll down and you can see we can add the taxonomy if we want to make no more changes to anything else that's on the site itself however we can come in and change some of the settings or any of the labels in much the same way as we could do with the post types so let's just scroll through I'm going to change any of the labels or values in there we're gonna cut the settings and take a look inside the at what we have and again this can look incredibly daunting upon first look but most of the values you either self-explanatory or you don't need to change them you can leave them and their default values so again let's take a little look through we want to be public we want people to see these and the same goes with a queryable so we leave those as they are however hierarchical again like I say we want to have the ability to group these and have subsections so parent and child values so we're gonna change that to be true we can scroll down and take a look at some of the options we have then so you can see we have things rewrite hierarchical and show an admin columns and so on so some of these are useful some of them can just be left as they are now we're gonna leave these values as they are for now but like I say if we wanted to we could easily come back in at a later date and make changes to anything on here that we wanted the only thing we do want to change though is change this rewrite hierarchical and we're going to set that to true okay so we've done everything we need in this we're gonna scroll back up to the top hit add taxonomy once you've done that now if we come over to our recipe section you can see now we have a third option which is recipe types so that's our new custom taxonomy so here to do this one more time we're gonna come back to add edit taxonomy and from there we're gonna create a second taxonomy and this is where we're gonna group things based upon what I just termed featured however you could call it whatever you want or what it really means is that I can do things like they're gonna be a featured recipe or they're gonna be a seasonal special allows me a way of tagging those without using WordPress tags so let's just set this to be featured so we're gonna type in a featured will do the same underneath for the singular and we'll just copy that for so for the people on the singular because that's fine and again we're gonna associate this with recipes scroll down leave all the values inside there we are gonna say change this to hierarchical so true on there and rewrite hierarchical and set that to be true as well so there we go we've now created our second taxonomy we'll just click on add and now if we come over to recipes you can see there's our second taxonomy our fourth entry underneath the recipe section so we've now created the basic custom post type and the taxonomy so we want to associate with that custom post type we're now ready to put in the meta fields which are basically the information that we want to insert into our custom recipe before we wrap this section up on the custom post type UI there's one other thing I want to show you that could be very useful when you're working with taxonomy x' this is a totally optional thing if you don't want to use it you don't have to but if you ever use the poached section inside WordPress you know that you can quick edit various different things one of the things we want to do with this is allow us to quick edit the taxonomy information it saves us having to go into the actual edit post page if we only want to add in a custom taxonomy let reference so how do we do that well I'm a featured at the moment so we're scroll right the way down to the bottom under the settings section keep on going down and you see says show in quick bulk edit panel currently and by default is set to false we're going to do is we're going to set that true and save our taxonomy and they come back out of the featured and change that this time to recipe types which is our other custom taxonomy scroll right the way down and do exactly the same thing again so when I say true to both of these now at the one we don't have any content in you but what this is gonna do when you go into list all of the recipes this just means you can quick edit and just adjust the taxonomy that are associated with any of the custom post you create optional but can make a massive difference when you're working with custom post types anyway that's just an optional thing I wanted to show you now we're going to move on to creating the custom field sections to access our custom fields all we need to do is come to the left hand side of the dashboard I come out a custom field so from there we can go to the field groups which we can view any of the field groups we've previously created or we can go in and click on add new so let's just add a new field grouping and from here we can now go through and specify how we want this field group to actually work first thing we do is give this a name so we're going to call this recipe and from there we're gonna come down and choose exactly where these custom fields are going to be used by default you can see enter location it says post type is equal to post so that would add anything we add inside this custom fields field group into our normal posts as part of WordPress which obviously in this example is not what we want to do we want to associate these with the recipes so going to do is post type is equal to we're gonna click I'm going to come down you can see we have recipe now our custom post types we can click inside there that will now associate that with our custom post type a recipe so now we've done that we can go ahead and creating the custom metal feels we want to use and associate with our recipe post type so we've got this main area which is where we can go to control all these things so we're gonna start adding in the fields that we want so the first field we're gonna come in we're going to choose preparation time so we're gonna type in the name we want to use once we've done that we've got the next field you see it automatically fills out the field name and puts an underscore anywhere there's a space we can now choose the field type now depending upon whether you use in the pro version of ACF or the free version you'll see a different amount of results inside here I'm using the pro version so I can click it expand and I currently have all of the options that are available as part of the pro package and the free package so what we're gonna do is we're gonna just choose text for this we can choose instructions if we want to so if you want to make a more intuitive interface that's part of your custom post types of people may not know exactly what to do with some of the different things you want to insert into these custom post paid meta fields you can put some instructions in there you can also specify whether they required default values placeholder text and all those kinds of things so you've got a lot of options inside here we're going to keep this pretty simple because I'm assuming that anybody's gonna use the site is going to know exactly what's going on when it comes to the recipes so we can scroll through make sure everything is as we want it to be and we'll just close this down by clicking on the name add another field in this time we're gonna call this one cooking time come to the next field you see it or it might pre fills that out the field type we're gonna leave us text so you may be thinking well why are we leaving it a text if we're dealing with a numeric value for cooking time realistically all I want to do is be able to put the cooking time and then I want to specify whether it's minutes I was or a combination of anything there so text it just makes it a lot easier but obviously if you want to filter based upon different values you can use different field types like I say we're keeping this fairly straightforward but we will take a look at various different ways of filtering information later on in this video ok so we're gonna come down and we're gonna say placeholder text and in there we're gonna put e dot G so anybody that's looking at this will know how they have to put the information into this particular field and the copy that we're gonna use that in the next one as well so we're gonna come in we're gonna just scroll back up at the top come back at the cooking time add a new field in this time we're gonna put in yield click underneath text for this one I will leave that as is and I'm gonna keep on doing this now until I've covered most of these different bases off so I'm gonna pause the video and we'll come back when most of these are input into our lay so go ahead and put most of the fields that we need into our custom field group you can see we've got various different options things like text area WYSIWYG editor no busy week editor just basically means that if we want to put more rich text in there so things like bold italic underline maybe even insert images we have that functionality built into our custom post type now the final we're going to do which like I say this is purely optional depend upon the kind of site that you're dealing with we're gonna create a repeater field and a repeater field just basically means that we can have an unknown quantity of information so in this example we're going to deal with nutritional information so we could have fat content we could have sugar content salt content so we don't know what's going to go in there and different values and different entries for different recipes is something that's a very distinct possibility so we're going to do is we're gonna click on add a field where this one we're going to call this nutritional information come to the next one that'll pre fill that out feel type we're gonna come down and we're gonna choose the option for repeater and you see that now opens up some additional sub fields now sub fields are basically the same as fields but they sit in the side your repeater so we're gonna do is we're gonna add three fields into this first one it's going to be a nutrition type so you can see we create these in exactly the same way that we would any other kind of meta field next what we're gonna do is we're gonna come down and we're going to just close this up I'm gonna add another field in and this one's going to be nutritional value again we'll come to the field name Technic field type is going to be text and the final one is going to be the percentage of your daily allowance so we're going to put percentage daily value and this is gonna be the sort of percentage of any of those nutritionist of the fat content the sugar content and those kinds of things so we've now created a repeat of inside our actual setup so we can come through and choose some other options you can see we've got collapsed we're gonna just choose nutrition type so we can see the nutrition type when this is collapsed out you can then go through and you can choose layout and you've got tables blocks and rows with it this will just kind of dictate the layout in the dashboard nothing to do with the front-end of the website so we're gonna leave that to be table you could then change this from add row and you could just say add new additional nutritional information whatever you kind of want that's just the label for the button okay so that's I will repeat the field or created and everything is set up if we scroll down a little bit you can see we can go through and we can do some other things about the way this is going to be displayed as some of the features that we have so you wanted to we could hide various different elements as part of our actual meta fields however we've kind of controlled that inside the custom post type saying what we want to include in there so you can leave those completely as they are that's perfectly fine now we will come up and hit publish and that's now going to create our new custom meta fields as part of our recipe section so if we come over now to all recipes we now come in and say add new you can see we now have all our custom field information if you scroll down you can see there's our nutritional information which I'll repeat the field that we can click on add row row row and keep on adding additional information inside there so it's a nice simple clean interface all set up ready for us to start creating content now that we've gone ahead create our custom fields our custom post types and taxonomies I've now gone ahead and just added in some recipes and some different taxonomy information but we have one little problem which is more of a usability issue than anything else and that is if we come up to a recipe section and view our list of recipes you can see we don't really have a very nice interface we have a list name title of all the different recipes and the date they were published that's okay if you only have a small amount but when you start to grow and have maybe hundreds of different recipes this isn't necessarily going to be the nicest or easiest way of working but there are a couple of ways of getting around this first of all you could if you wanted to come into the custom post type UI current your taxonomy so once we're inside there let's edit a taxonomy and choose our recipe type and scroll right the way down and you'll see one of the options we have inside there is to elect um allow us to see this inside the actual listing as you can see we've got show admin column click on there and set that to true come down and say save taxonomy now come back into our recipes and say all recipes we now have our recipe type in it so it's already a little bit better and we could utilize that method if we wanted to however we can use one free plugin that just makes it even more useful so let's take a look at that if we come over into a plugin section and go to install plugins we have the option for admin columns like I say this is optional and this is the free version and while it doesn't work fully with advanced custom fields with the free version you have to have the pro version for that on one of the plugins this does give us enough information to be able to much make a much more useable listing for our recipes let's come into our settings section and under there you can see we can't look at the AE global templates which is not what we want to make changes to so click on there and we're going to find recipes once you've done that that'll show us the different colors we currently have inside our recipes listing as you can see title recipe type which we just added in through custom post UI and finally the date at the bottom now let's just take a look what we can do let's expand out the title now title doesn't really mean anything that's perfectly fine if you write in blog posts but widget and wood recipes so we're gonna do is we're gonna change that to recipe name so that already makes more sense whilst I'm not going to close that we're gonna leave the date that's perfectly fine we'll leave that at the end we can come into recipe types and we can edit that if we want to but that's that's all good we can leave that as it is we can then come in to add column and from here we can do a ton of really useful things first of all let's say we want to put in the thumbnail for the featured image just so we get a visual representation of the recipe that we're currently taking a look at inside our listings what we need to do is come down to a says custom now scroll down find featured image and select that we're not gonna worry about changing any of the values we'll leave those as they are we're gonna close this up we're going to reorder that so it puts it in after recipe name so we know have the name of the recipe the featured image the recipe type and the date we also want to put in another columns they say add another column this time we're going to change that out we're gonna come down and we're gonna say a taxonomy now because we've created custom taxonomies as part of ACF we can reference those insights here just by using the taxonomy option so you can see at the most has taxonomy featured which in this example is exactly what we want so what we can do is we can say featured to give it a name and we can leave that as is and we can then move that up so it's it's after the featured image before recipe types so now if we save this an update we can now jump over and take a look at our new layout for a recipes listings there we go we now have a much more informative layout which is pretty cool what we can also do is we got these edit and quick edit and so on the kinds of things that we used to we could make this even more intuitive if you wanted to now again this is totally optional but let's come back into our admin column said and let's say we want to add a new column inside there we're going to set it to actions and we leave action set on there that's perfectly fine we'll say use icons and we're going to click on update now we're gonna do is gonna come back over and refresh this page and now instead of having that little hover over where we've got those little sort of floating options to quick edit and so on we now have icons on the right-hand side that allow us to do exactly the same things of view trash or bin we're gonna call it quick edit and edit so if we click on quick edit you can see where we put the recipe types in the feature and we set those to be part of this quick edit section as part of custom post at UI we now have a much more user-friendly dashboard for anyone that's working with the recipes that we're creating as part of the website now obviously you can use the admin columns and set this up throughout your entire site so if you want to do the same thing for the post if you were having posts as well as the recipes you could do exactly the same thing and lay things out however you wanted to but I think you'll agree this already looks a much more user-friendly bit layout for actually working with dealing with your recipes so that's how we're gonna use admin columns like I say this is the free version and purely optional but I think it's worth in investing the time and effort to install this and set it up like I've done here it's just a lot more user friendly now because we're using the holo theme alongside Elementor the hello theme is basically pretty much a blank theme which gives us a nice clean canvas to work from what we're building at our website but when the problems is we don't really have any way of styling fonts and so on so we set up some basics inside Elementor itself and then we can worry about dealing with the specifics on any of the different sections through the actual theme builder itself so we're gonna do is we're gonna start working with setting those things down so we don't come over we're gonna create our home page to start off with though it doesn't matter what page you're gonna create or anything else just as long as we get access to elemental that's all that matters should say add new from there we're gonna come in and we're gonna call this home page we'll save that or we publish that and then we'll click edit without a mentor to open up the Elementor editor and then we can access the settings so once you've done that we're gonna come over to this top little left hand hamburger menu and from there we have the option to choose default colors fonts and the color picker so start off with our fonts at this point in time like I say elemental doesn't really have a huge amount of control hopefully this is something they're gonna be working on with a global styling in the next version of Elementor but for now this is what we've got to work with so the primary headline we're gonna set these up so the first thing we're going to do we're going to change this from Roboto and the font that we're going to use is a font called dosis they choose that weight 600 is fine we were the same thing then for the secondary so again dosis choose that we'll set the setting we had like the 600 as well on the body text we're going to change this over and we're gonna use bitter there we go 400 is fine accent text I'm going to come back into there and again we're going to just use dosis in the just we've got some consistency click apply then we'll come back out of this come back up we're going to choose our default colors so inside there you can see we've got a range of default colors we're going to drop in the value that we want to work with now I'm gonna work with this sort of deep purple kind of color so our primary color is going to be that so we're just going to drop that value inside there and you see that picks up our color accent we could change that to whatever we wanted to for now I'm not gonna worry too much bo-tat come back click on apply' come back out of this and the color picker weather the same thing inside you the color picker is basically the 8 standard colors you can choose from whenever you sort of choose anything that's got a color options those headings and things along those lines so you can set these up to be site-wide so you can change this for this blue color and we'll change that to put the purple inside there obviously you can create a full color palette that works with whatever design you're working with and you can come in and change this at any point and any changes you make to this will update and reflects through your site so it's good to know these are there at the moment like I say they're very very basic so once you've done that gonna come out and go down to settings and from there we just gonna say hide the title I'm gonna click on update so we've done some basics we've set the basic things that next thing we're gonna do is go through a start building out some of the key templates the header and the footer and so on then we can move on and start building some more of the templates notice are the basics let's get on some little more fun stuff let's start building out our templates we're gonna do come on to the template section and come into theme builder and from the theme builder this is we're gonna start building out the actual template layout for our header and our footer so we're gonna do when we're coming in and we're gonna say we want a header I would say add new header gonna call this default header so we notice that the default header is gonna be used throughout the site unless we use something different create our template and from there we're just gonna pull in a predefined template we're gonna use that as the basis so this one we're going to use click on insert once you've done that we can now fine tune and tweak this to get exactly what we want so let's just come and choose that okay click on there we could do now is we can come in a style for example we can change this to a solid color click on there and now you can see there's our color chips and there's the purple color we wanted so we don't have to go to the process of doing that every single time so once we've done that we've now set the color up on there we can come in and change this logo over so we can come in we can just click on there and I've got my logo that I'm going to use we'll insert that media there's our logo set up in a custom URL is perfectly fine and tell me what the site URL so you can see because we've used a template all these things have been set up for us now currently this is set to use a menu and we don't have any may was created but we will do that a little later on we start to create some content so for now don't worry about that what we've done that we're gonna click on publish come in to add condition and you see it says include entire site and that's perfectly fine so we say save and close there's our header section setup we're gonna come back out of this now we were the same thing for our footer so theme builder again into the footer section add new call this default footer create our templates once we've done that we can now go and choose a predefined or we can build our own from scratch if you want to it's entirely up to you I say for me it's just for the speed of creating these particular template files so there's our footer section again it's waiting for our menu structure inside there we can change anything we want so we can say we want to change that from 2018 to 2019 we'll get rid of the design by element or get rid of that it published add a condition and you can see includes entire site so save and close we've now created the header and footer for our site we're now able to go in and start building some of the more fun things inside this layout now the next thing we're going to create is the actual layout for each one of our loop items so take a look at the example of our home page you can see we have the designs that have this nice layout we've got the nice large image at the top the name of the actual recipe itself a brief description and the view recipe button if we take a look further down the latest and greatest recipes it uses a similar layered it's just a slightly smaller version so what we're gonna do is we're gonna create the template for this example item now this is part of the loop and all the loop basically means is it will repeat individual recipes in this example and each one will use the same template the same loop template and they will have their own custom data inside so a different image different title and different sets or a section of text different link in the button and those kinds of things to do that we're gonna use element or custom skin now this is the free version and again this is very very useful and very powerful plugin that opens up a ton of really great possibilities so let's head back over to the dashboard and what we're going to do is we're going to come into the template section and down into our theme builder once we're inside there we're going to come and on loop which is a new entry that you see once you install Elementor custom skin now we're going to go in and we're gonna add a new loop item in there so we're gonna do is we're gonna call this default loop so we'll know what this is actually going to rotate it sort of pertain to click on that create a template and we'll go into the elementary editor as you'd normally expect to see so we now have the ability to get rid of this predefined layered thing and we're gonna come in and start building out the actual layout now for simplicity we're going to come down to the settings section and we're coming in and we're gonna say we want this page layout to be the elemental canvas so we get rid of a heading any headers and footers or the preview section we're gonna come into here and we're going to choose recipe and we can choose any one we want so let's just start typing something in so we'll start typing in cran and that'll find the cranberry one so we'll click on that apply in preview now obviously nothing is going to show up at the moment but what this means is we're going to be using the write data in example the recipes to build out this template so we know we're working with the right information now don't worry about the size of this we'll just create in the layered and we know that when we put this on the page it's going to be smaller so don't worry too much about the fact that it's gonna look a little bit weird a little bit misshapen so the first thing to do is pull in the actual content so let's click on this and we'll create a single row column and from there we're just going to click on that and we're going to just make sure that everything is set up the way we want it to be so if we come over on to the layout section we're going to make sure that that box is fine the column gaps we're gonna set to no gap we don't any borders run this we want to control those ourselves now we've got the placeholder we could start dropping in the content so we come back over and click our widgets first we're gonna do is we're going to pull in the featured image so they drag and drop that into our single row column and you can see that now immediately pulls in the image that we've got from the product we use in as our sample that's great we're gonna set this to be whatever size you kind of want so you can see we've got all the normal options inside there your thumbnail medium and so on so choose a value that's gonna work well on the size that you're gonna actually display this I'll leave that's a large that looks perfectly fine and we can set the link on this if you want you can click on that and we're going to say we want this go to custom URL and from there we're just gonna change this over then click on dynamic and we're going to say post URL so that just means that this image we'll be clickable and allow us to click through to the recipe that we want it's a nice user friendly way of doing these kinds of things next up we'll come back over and we're gonna go in and choose the next section which is going with the title that we want so we're gonna drop in a heading and drag and drop that inside there you see it picks up the formatting that we set up on your you're on so I'm going to change the dynamic for the title click on there and we're going to come down or we go to say post title you can see that will then pull in the actual name now we can fine-tune and configure any of this text so at the moment it's looking a little bit thick and like I say Elementor doesn't have great controls over this it has very basic controls when you set them globally so we're gonna do is gonna put the Style section or commit the typography and we're going to adjust that in say inside there as well so gonna set the weight to be something like let's try 400 that looks pretty good I like that okay so we're gonna use that I'm gonna come back over I'm gonna come back out of this I'm gonna set this to be h3 so it's slightly less important because it's gonna be a lot of these on the page okay so that's the basics for the title itself however what I'm going to do one more thing come back into the style into the typography and I gotta come into the style SEC into this into the transform section and we're going to say we want to capitalize this so it doesn't matter how we type it in it'll capitalize the first letter of each of the words just a style thing that I quite like next up we've got a new option to going to come in we're gonna say text editor and when we install elemental custom skin one of the things that gives us is a new dynamic option so if we click on on there we have a new additional option called post summary so this is great we can click on that and now we can do is we can configure this so post summary click on the little cog icon or the little wrench icon and we can change that to whatever value we want and that will then give us the ability to control exactly how much text pulled from the main body content that we've got inside our custom post type so we'll leave that at 25 what we're going to do is at the end of it say afterwards we're gonna put in a couple of full stops or periods as the Americans will call it and that way it just kind of is that universal symbol for saying there's more content available okay so the next thing we need to do is come in choose a button and we're still going to drive that button and put it underneath thee and from the way we're going to say change this to do recipe there we go now we could style this so again we can do what we've done before come on the style option typography we'll leave as is but we are set that to be a weight of say 600 and we're going to set this transform to be uppercase so it's a little bit more punchy that's fine for that text color we're going to set to be white the background color we're going to said to be our global sort of burgundy color I will come back into our content and we'll just make this medium to the buttons just a little larger okay so now we need to link that through so at the moment it's using a null link so we're going to click on dynamic and that will give us a ton of different options what we want is the post URL that will then link this through to the individual post so when someone clicks on the image or they click on the view recipe that'll take us through and show us that actual recipe and it's just part of the loop so it just works all nice and neat and tidy now quickly just going to apply it a little bit more style into this to make it look nice and neat and tidy like I say this is something that is purely optional and it's not really part of how we create this I just want to make sure it all looks good so I'm going to do that then we're going to move on okay so there's my styling done all I do now is click on publish now we usually this as part of the loop so we don't want to set any conditions to it so what you can do is when it comes to this publish settings just leave the add conditions empty and just click on save and close that's now created I will loop item so we can now start to use that in our designs now that we created the loop design the next thing we need to do is create our archive and this is gonna be where we're gonna list all the different recipes so we're gonna use this in various different places so let's just build that out come over the templates again inside your dashboard and back down to theme builder once you're in the theme builder we're gonna come over to archive click on add new archive and then we're just gonna give this a name she's gonna call this default recipe archive create our template and once we've done that we're now going to create a two-column setup we're gonna have the left-hand section which is going to take up around 70% that's where we're going to be listing the recipes and then the right-hand section we're going to put our filters in a little later in the video however we're not going to use Andy's template we're going to build this ourselves just close this down let's come in and add in a new section we're going to set this to be a two column they come into here and we're just simply going to come in and we're gonna add a little bit of extra space at the top and bottom so we're gonna add 50 pixels top 50 pixels bottom there we go I guess it's a nice little bit of a lay up there so next we can do now is we can drop in the loop so to do that we've come back over to the left-hand side and we're going to pull in the archived posts so gonna drag and drop that into there now at the moment this is just gonna try to pull in what it thinks is the right information and you should in the right design however we don't want to use the classic or the cards or the new full content in Elementor 2.7 we want to choose custom clicking on custom opens up the le custom skin options and that allows us now to choose the custom skin that we want to use the custom loop that we just created now don't worry about these extra options down here there if you using the pro version and to get access to those you need to purchase the pro version which I'll put a link in the description below so if you interested in grabbing that you can do that however for this we don't need it unless that you say you want to take advantage of some of these extra new options what we're gonna do is select the default templates we're gonna click and you can see there's our default loop so if we created more of those loop items we see different entries inside here however we've only created the ones we're gonna click on that and that now pulls in our basic loop now you may be thinking well why isn't that showing the information that I'm expecting it which would be the recipes well we just need to go in and tell it to actually start using those so to do that it's pretty easy all we need to do is come down to the cog icon on the bottom left hand corner and we can change the preview that we're going to use so go into preview settings and from there we're gonna change that from recent posts I'm gonna come down you want to choose recipes archives when I click on there click apply and preview and then we should find that we start to see the images and the information we've just pulled in now directly from the new custom post type using the loop template that we've just created so there we go there is our basic archive page all set up so we can do now is just add a color of extra features in there just to make sure everything is looking the way we want it to we simply come back over the set is on the left hand side we're gonna scroll down comment upon generation and we're gonna set that in the to be previous actually go for numbers previous and next we can configure that if we want to and we could set everything up in there we're also going to commit the facet WP and enable that now this is just something to do with the filtering which we'll take a look at later on but we just need to make sure that's enabled on any page that we want to use the facet WP filtering functions on and because this is one of those pages we need to make sure that's enabled so we do know is just click on publish and once we've done that we can now set the parameters or the conditions for where this is going to be used say add condition we don't want to use this for all archives let's just change that and we're gonna say this we want this for recipe archive so I'm going to come down recipe archive save and close and we're now done we've created the archive for our recipe section now then the next thing we're gonna do is create the single post template that's going to contain the actual recipe itself and normally I would just go in and use the element or templates however if you want to use the repeater region you can't do that this is where anywhere elementals templates come into play so that's what we're gonna use for this however like I say if you are not using a repeater region you could do the same kind of things we're gonna do now but just utilize in the normal templates and the normal single post template inside elemental Pro so we're gonna do come over to a e templates and we're gonna come in and we're gonna say add new from they we're gonna give this a title when the call is default recipe single and I'm gonna put a e anywhere that I'm using anywhere elemental so I know exactly what I'm using now you're gonna see that we have some additional options that are available to us when we use in any way element or prose template in structure we're gonna need to set some of these parameters up to make sure that everything is configured the way we needed to so the render mode we're gonna click and expand that you can see we have sort of quite a few options inside there we're going to choose post template once we do that you can see that it opens up a range of different options we're gonna just choose the post type applicable to the single post layout so gonna click on me and this is going to be for the recipes preview post we can leave that to whatever in your C it'll just basically we can just choose any of the posts that we've created already we've got to say Auto apply and we going to leave the theme default for the template so if you done that we can save that or say a dry whichever one you want to do and now we can go into element or start building of the actual design itself so this is gonna open up Elementor in the way you'd expect to see it we can start making changes to that in other way we'd normally do so what we're gonna do is we're gonna create another two column layout gonna click set that to be a two column layout like so we're gonna have the main recipe in this main area on the right hand side we're gonna have some related information so it could be signed up to your mailing list it could be things like you know your favorite articles whatever you want to put in there it's good to have some additional information on the page to help drive traffic to other parts of your website so that's what we're going to use this for we're also going to come down we're going to say we want to get rid of this default recipe rubbish at the top so gonna come in there you say hide the page title to get rid of that I'm gonna click on this section I'm going to come into advanced and we're just literally gonna put in fifty pixels padding top and bottom again just to give us some breathing space on what we want to do now we start pulling in the relevant information for our individual recipe now we can't be using the normal default layout options of normal widgets we have inside elemental we need to start using the anywhere element or option so and close these down so we can just see the widgets that we want so we're gonna put in the AE title to start off with and drag and drop that in there and you see that now pulls in the relevant title for this article we're just gonna quickly tweak that's going to come up the style into the typography we're gonna make this just a little bit thinner so then I know it's pretty good next step we're gonna drop in the post metadata so again we're gonna use the anywhere Elementor options so we're gonna scroll through until we find that AE post meta drag and drop that underneath there so you can see that pulls that data in so all I need to do now is just basically set the styling up on there so we can come in and we can just set up styling to whatever we want we'd also get rid of anything we don't want on there so we may want to just have the date that it was posted and the actual person that posted it that's perfectly fine and you see we click on any of these little tabs we can choose whether we show something on what icon we want to use with it and also any labels and things we may want to use so we can fine-tune and configure that to get what we want so we're just going to quickly jump into the style set the text color to be our purple color I'm just gonna be the typography and we're gonna just size of that to make it somewhere around 12 pixels I say these are all just styling options you can basically style this anywhere you want to okay come back out of that I'm going to come in this time and we want to make sure that we put the image that we want at the top so we're gonna say AE post image drag and drop that into our section change that from thumbnail to something like large to make sure it fits and looks good on the actual section itself to link it to anything nope we don't want to link that to anything cuz obviously we're already in the post so we don't need that we're gonna play an overlay to this if you want any kind of styling you want to do it's entirely up to you how you want to lay things out come back out and again we're just going to come in say AE post content drop that in there and that now puts in the actual content itself no I'm going to leave it at this point because we're gonna come back a little later and take a look at how we can add all the extra things in we're just going to go through now and make sure that everything is working and I can show you where we are so far so the first we need to do is click on update once you've done that we can now come back out of this so we can come back at the top left exit to our dashboard I'm going to come back into the appearance section we're going to come down to menus this time once really menus we're gonna add in our main menu so gonna just change the name of this call this main menu and we're gonna get rid of this sample page we don't want that and we don't want this section right here this homepage gonna get rid of that so we can now create a recipe section so we can drop that in there so because we did it with an archive all we need to do now is quickly just adding a custom links we're gonna click on custom links we let's just change this and we're gonna drop in that link there and we're gonna put in recipes for the actual link itself I say add to menu there we go so now we got to say create our menu once you've done that we'd have set most of the things that we just set that to be primary and save that again and we now have our menu set up now let's quickly hop over to the site itself and let's take a look at where we are right now so jump over and you can see there's our home page which looks absolutely terrible could've done nothing with it what we're interested in though is the new recipe section so if we click on me you'll see that now takes us in and shows us that custom looped layer that we've set up we've got the archive page set which is what we currently using now if we scroll down you'll see everything is laid out nice and neat and Heidi and then if we take a look at any of these by clicking on view recipe we can go in and there is our single post template being used so we've got the basics put together the next thing we need to do is start fleshing that out with some of the advanced custom fields data styling that and making sure this page is now looking as good as possible with all the data we need and finally we'll take a look at adding in the repeater region and how we can drop that into the design and how we create the custom template to actually output all that data so on the key parts of this entire website is the home page the reason for it is because it uses quite a few different techniques and some of the things that we put into play with the taxonomy and so on to make sure that we can have a nice versatile layout so I'm going to do is we're going to break this down into various different components we're going to start off first of all by setting up the featured recipes section so what we do at the home page as you saw earlier on video but we've got nothing on it so let's come in and start working on building the home page now it's time to flesh that out okay so there's our blank page first I'm going to do is we just simply gonna drop in a section at the top that's just primarily there just to put in a header section where the search is going to be and we're not gonna worry too much about the search and functions like that at the moment we'll work on those a little bit later on let's start by just putting the placeholder ready for where the search is going to go in okay so we've got the section at the top we'll come in to the height we're gonna set a minimum height in here and we're gonna set this to be somewhere in the region of 300 pixels high I should be nice and tidy we're gonna set a background image we're going to come into style I want to come in to choose an image for the background and I've already uploaded that so we're going to use the image which is this one I believe there we go insert that media in there and we'll just set the parameters up for this we're gonna set this to be Santa Santa fix this perfect your final just leave a default no-repeat and we'll have that to cover it next thing we do is going to come over into the background overlay and we're just going to drop in overlay so we can separate the background we just choose black on there and that looks fine with finally gonna just drop in a search form on a title so come in we're gonna drop in a normal WordPress search form because searchwp the nice thing with that is it integrates directly into the actual normal search form inside we press itself just expands the functionality we have available to us and they so we're going to do is we're just gonna set up a few things inside you so we're gonna change this search message of uh something a little bit more interesting in there and we're just gonna set the style on this the text colors perfectly fine although we've got a little dark on there I think a little darker again would be good there we go now we'll set the background color to be white and we'll drop the opacity down so it's a little less in-your-face and finally we're going to come into the button section and in there we'll set the text color to be white even though we just using the icon we're gonna set the background to this purple so again we keep that consistency of image throughout everything we're doing finally we're just gonna come in and put a title above that we'll drop a heading in above there we'll set that to be something that's quite nice and catchy because obviously we want people to enjoy searching for the things that they want on our website well h2 is perfectly fine on there we're just coming to a style and we'll set like a text color to be white so it stands off and finally we'll just adjust our typography so it isn't quite so bold ugly there we go so there's our top section for our search bar next you want to do is drop in our featured recipe section so we'll just duplicate this heading and drag and drop that underneath once we've created our new section so let's just drop that in there change the color on that so we've got the style set that to be purple so that keeps our styling and everything in place and again we do the same as before we're going to come into a revised section just put in some padding above we could just change our title to something that makes a bit more sense for this which is going to be our featured recipes and there we go so the next thing we need to do is just drop in our custom loop so we're going to do same again I'm gonna come over into our widgets on the left hand side we're gonna come down to posts and drop that underneath our featured recipe section and as you can see that does this as we did before so we just need to change this over now to custom choose our default loop I'm going to do then is we're going to make sure we've got the right information in here change that columns to 2 Q want this to be slightly larger and have a bit more impact and we're gonna change the post per page again to two we just want the first two featured recipes we're not gonna worry about the facet WP because we're not going to be filtering this live filtering but we do want to do though is come to query now at the moment this is just gonna show what we'd expect which is going to be the normal image at the normal posts however we want to change that so we're gonna change the source on posts and we're going to change that to recipes okay so that now we'll just put in the two latest recipes which isn't what we want to do but we can do though is include by go click in there and we're going to choose term once we do that that allows us to open up and choose what term we want to actually filter it by so you click on me and we're just going to start typing in featured and there we go so it says featured featured so what's doing is it's saying the custom taxonomy the term of featured and it's looking for the value of featured if we wanted to set that to something like like favorites for example or my favorites so I can do it just take out what's in there and we'll just start typing in a different term and then we go featured my favorites so if you're wondering it you kinda a little confused what I'm talking about let me just show you wanna talk about when it comes to the taxonomy that we created if we head back over to the dashboard we're going to do is we're gonna come down to our recipe section and into the featured taxonomy and a click inside there and as you can see we've got featured my favorites and seasonal we just using these as ways of filtering our data so that's all that's going on here is that we're saying we want the term taxonomy to be from featured and we want this to be featured so again we'll just change that there we go so let's just search there we go so that's now gonna show featured recipes pulled out directly from our custom post types I hope that makes sense we don't need to worry about things like pagination because we're only showing two recipes but you can if you want to choose exactly when they're going to be displayed how what order they got to be displayed in and so on I don't leave those as they are say date descending that's perfectly fine for this example but there's the first part of our homepage we've now created a custom filtered section that show just featured recipes so now that we've set our featured recipes the next thing we're gonna do is the latest and greatest recipes and this is going to show the latest six recipes that have been added to the website what we need to do is simply come over we're going to do locate this section so we're gonna duplicate our featured section we're also gonna come up and duplicate the title so we'll just duplicate that we'll drag that on drag that down below we'll adjust the spacing and so on a little later on we'll change the text on there from featured recipes to latest and greatest recipes and now we're just going to change how we filter this second section out so we're going to click on that and come back over everything else is really left the same we're just going to change the number of columns to 3 and we're going to change the number of results or posts per page to be 6 there we go we're not got a pretty pagination in this we gonna leave that to none what we are going to do though is coming to a query section from our query section we're gonna change the parameters inside there so we don't want to include anything in particular so we're going to take out all of that we are going to alter the exclude section and in there we're gonna do the reverse we're gonna say term and again we're gonna put in feature featured so what we're doing is we're stopping anything that's gonna be displayed at the top in the featured recipes from displaying in the latest and greatest recipes below because obviously you don't want to end up with duplicates of the same recipes in there so you can see it's incredibly quick and easy to start doing these kinds of things where we can create multiple different loops all filtered or queried in different ways and then we can build up a really nice complex looking homepage all dynamic data but all done very very easily and there are a couple more things I want to do with the homepage before we finished with it first of all let's make a little bit more space for these sections so we're gonna come into our title there we're just gonna select it contour advanced and we're just gonna drop in 50 pixels at the top just to give us a little bit of breathing space there next up we're going to come over and we're going to just drop in a button we're gonna use this button to go through and view all of the features recipes as opposed to just the two other on there so let's drag over put a button in on that section now we're just going to change this over and put some content in there that makes sense we're just gonna say View for featured recipes okay I'm gonna then set that to be right aligned what I do with the link is we're going to come in and win a specify we want to use a particular type of link so we click on Buy but from there we're gonna scroll down and we're gonna find internal URL this is pretty cool I like this this is a new feature that I think is well this is a feature I think is really good and it's not one that I've used too much we've specified an into an URL we can click on little wrench icon and we can choose what type of internal link is this going to be well we know this is a taxonomy because the featured is a taxonomy so we click on taxonomy says search and select and it currently says all so we're gonna do is we're gonna do the same again with your search for featured now there's a weird little clicks for some reason whenever I do that it pops up to the top left hand corner but you can see featured featured click on there that now tells it it's go to link through to the featured taxonomy and display everything inside there but I just want to tell you that link up a little bit so first I'm gonna do we're gonna add an icon into this we want an arrow so we're gonna find this arrow pointing to the right hand side we'll insert that into there specify that we want that to be after and we're going to do is look at the styling section and from there we're gonna set the text color to be the burgundy color that we've been using and the background color we're gonna set to be transparent we can then tweak typography if we want to just to make that a little bolder so we'll say something like these 500 sheets try 600 and we'll just increase the size a little bit so it's just a little bit more evident 16 looks pretty good I like that that's okay I like that so what we're gonna do then is we're going to just come over to the hover State we're gonna change the text color on there to a dark gray I'm going to apply hover animation which will grow so what'll happen is when you take your mouse over you'll see it's a link go in somewhere and it does something so pretty good next step we're going to do exactly the same thing now we're gonna say we want to view all the recipes so we're going to duplicate that drag that down underneath this section and drop that into thee we can now just check that from there adjust this just to say view more recipes there we go a few more recipes and we just need to change that link and we're simply gonna take this off and we're just gonna drop in the link to our recipe archive so all that is is there's our recipe archive ignore anything that pops up and there we go so now that'll have you more recipes we can update this page if you want to and we've got one more section that's going to go in this new section is going to have two dedicated little blocks in there and what to do is it's going to allow us to go through and do our favourites which again is a custom internal URL and also our seasonal favorites so you'll see what I mean well it's just a great way of using that internal URL option so first things first let's come to the top let's just duplicate this heading so we've don't have to go to the process of doing that manually and we'll drop that in thee we'll change that now to more great recipes just change the text there we go and now we're going to come over and we're going to insert an intersection below that we could just set things up on there so there's our first section so we're going to do is now we're going to come in at we're gonna drop in another card in there now we're gonna do is we're gonna use a call to action and this is just gonna be a great way of being able to visually separate these sections from the recipe so which is a call to action but obviously you could set this haven't build this anywhere you want how you build it is not important at all okay so we can change the way this looks if we wanted to set it up to look a little like this if you want to you can change the style on there we could choose an image and I'm not too bothered about images I choose this is just just to demonstrate how it all works more than anything okay so we're gonna change these this text now for the content we're gonna set this up to our favorite recipes and we can drop in some other information underneath it if we want to we're gonna keep this like I say really really simple and clean but this is just gonna link through to those relevant different sections on our site change click here I'm gonna drop in our favorites she just put our faves I will style that if you want to but before we do let's just go into the dynamic links again we're gonna do internal URL once you've done that click on the little wrench icon type is going to be taxonomy and this time we're gonna just choose a different one and we're gonna put fav search my favorites and there we go so that's no link that through to that section on the site and all we could do now is if we want to we can easily come in and style the various different aspects so if we come into the button for example we'll change the text color on there and we'll set that to white change the background burgundy color and then we come to the harvest eight text white I will do the background color a lighter gray so now we get this hover effect we can also take off any border on there so you can see any border widths whatever you kind of wanted to so you can set that up any any way you want let's duplicate that we'll drop that then into the right-hand side will be the same thing again we change the image on there to something different we change the text to our seasonal favorites so let's just change that text over in there change the content maybe go seasonal favorites which finally will just change the message in there and we need to just change the URL now so it again with taxonomy is perfectly fine it will get rid of what's in there and this time we're going to type in seasonal and we get that we a little quick where it pops at the top but now what we've done is we've created a section that allows us to go through and view a custom taxonomy there's a it's a gap but we've got our favorites and the next one is where we've got the option to course we will see the seasonal favorites so let's just change that button there again and we'll just put seasonal so it makes more sense it doesn't confuse our viewers okay so let's update that page so we've now created a much more feature-rich homepage we're going to do is just set this that's going to jump out of our dashboard and go back into our settings section and what we want is I'm going to reading and set this as our home page so set a static page home page is going to be home page save our changes and then we can jump back over to our site and refresh our home page and there is our nice new home page all set up with links through to various different sections so if we click on it that'll take us through into our favorites alright my favorites I should say if we come back out and go to seasonal and it's in seasonal you can see that's the seasonal one and everything's looking good one problem we have though if we go and through the recipes from here you can see that takes us into the right template however if we go and take a look at these sections at the bottom it takes us into the default blank template so how exactly are we going to deal with that well we'll take a look at that right now there's two ways you could treat this you could either create a new archive page specifically for your features so if you want to have a different layout slightly different options whatever you wanted to do you could do that or you can just edit the default recipe archive now because we've got filters set up on our recipe archive I don't want to use that I want to have a slightly different layout for those results when you're looking at feature so in the to is we've come in and take a look at the Edit with Elementor for the default recipe archive I'm gonna cheat a little bit just for the fact this makes life a little quicker quicker and easier now cut the section we're going to right click we're gonna copy it we have come back out exit to a dashboard I'm going to come back into a theme builder and we're gonna say we want to add and do we're gonna choose an archive and from there we're gonna call this featured archive create our template and now we can just cheat by just get rid of this right click in choose paste and that'll pull in exactly what we had before now what we need to do is right click to get rid of this extra column that we don't want so we delete that from there and then we can just set this that to be three columns wide we don't need faceted WP onyx we're not searching just make sure that he pulls in the right preview just decided to play city so-and-so's so recipes Argyle play in preview there we go so we can do like I say it's come back into this change any parameters we want so pagination we can set that up and we want if you want to change that we can do that but we basically now have a new archive page specifically for our featured so whether that's the featured whether it's my favorites or is the seasonal or anything else we may sort of build in the future we've now created that's all we need to do is apply a condition so in click on publish add a condition we don't want all archives because that'll just cause confusion with the other archives we've got we're gonna do is expand that out come down to recipes archive and choose featured which is our custom taxonomy save and close and we are done we've now created a custom results page for any of those custom taxonomies that use the favorites section so we come back over refresh this we now have our new section our new template built up again I hope that makes sense so you come over to our home page now if we come down and we want to view all featured recipes we can click on there that'll take us through and show us that template and the same thing goes if either of these or if we want a few more recipes we can click on that and that'll take us to to what we'll have our filters down the right-hand side because this is where all of our recipes are regardless of what categories are anything they're in so we've now created archive pages to display both the normal archive and also and you can do sub filtered archives for favorites it's no time to revisit the actual recipe page itself and the first thing we're going to do is set up the template for the repeater region for the nutritional information now again we have to do this slightly differently because out of the box Elementor Pro doesn't allow us to work with repeater regions so we're going to use anywhere elemental approach template the structure to work with that so in the dashboard we're gonna come over to a e template so I'm going to come down and say add new and what's written there we're gonna create our new template which we're going to call nutritional repeater template AE like I said I always put the AE in there because it means that I can see exactly what template is going to be used at any particular point the scroll down again we've got the nd anywhere element or settings and we need to change these now to work with a repeater block so from the render mobile we'll change that from normal unfortunately you can't see this because it's right at the bottom of the screen we have an entry called a CF repeat a block gonna choose that it then says a preview post in other words what posts do you want to use just to preview the data when you're building this template out we will come in and choose one from there so I know that I'm going to use this biscotti one so we can use that one and you see the repeater field a CF automatically pulls in nutritional information now obviously if you had more than one repeater field you do have to set this to be the correct repeater field for this example we're only actually using one so that's perfectly fine no they're not going to click on publish all we just click on save draft both will do the same thing and now we're ready to go in and start building out the element or template so let's just come into edit with elemental I'll open up the editor and we can now start building out all the various different parts for our particular template first thing we will do is get rid of this title so we're going to come over to the bottom left-hand corner take off the title I'm going to set the page layer to be element or canvas so we get rid of the headers and the footers and any other kind of distractions we may have okay so now we have our blank template ready to start building things out so the first way to do is in the actual layout we're going to use listen really simple it's going to be two columns a left is going to have the information about the agile nutritional value on the one on the right hand side is going to be the one that contains the percentage for the daily allowance what we need to do is come over we're going to create a simple two column one row section and this is going to be the basic template for our actual content now I'll see you can style this any way you want one of the things I'm going to do is just select that I'm going to come into vertical align set that to middle and we just make sure that these columns are set to vertical line for the middle for both of those so I thinks it's nice and neat and tidy there we go so we do now is we're going to come in and put in the actual data and again we need to use the anywhere elemental widgets for this so we're going to come back out just close all these up a second until we get to what we want which are the AE template elements and we want the custom field option again so we're going to find the custom field drag and drop that into the first section and now that actually allows us to go in and specify what key we want to use and the type where this a link and default and so on and any icon we want to use with it so how do we find the values for that well it's very easy if we come back over and take a look at our repeater field you can see we've got three nested repeated fields in there or meta fields nutrition type value a percentage - daily allowance what we need to do is copy each one of these we'll take this one first come back over drop that into the name of the key that will then pull in the title for that as you can see it pulls in total fat we could do the same again and we'll do that in a moment but let's just go through and make sure we've got everything set up inside here so we can style this if we want to we can come down we're going to set this to be a span and then what we can do is we can just apply some simple styling to this if we want so we're going to come in we're going to set this to a dark grey once you've done that we'll leave everything else as is that's perfectly fine but you can style this anywhere you want to do as much styling and thought of all those kinds of things to make sure it looks the way you want to fits in with your template so there's the first one what I do now is we're simply going to duplicate this so duplicate that come back over to our repeater region copy the next value change that inside there and you'll see that will now change to 12.8 I will do it one more time so we'll just duplicate this come back over and we'll take our percentage daily allowance so copy that from there and we'll just change the value inside there as well next thing to do is just make sure everything lines that the way you want the percentage value needs to go over into the right hand column so that's fine however we need to have the grammage for fat and the total fat label in this example we need to have them in line with each other so again that's one things that's really nice we can do that really really simply inside elemental pro so we need to do is select the first one we're going to come in to select that come over to advanced I'm going to come down to a custom positioning and inside there we're gonna just change this so we got width and you can see we can set full width in line and so on so we want this to be in line and we'll do the same then for the next one it's going to click on that come over to advanced come down to custom positioning and we'll set that to be inline and now everything lines up nice and neat tidy but we just need to make a little bit of space in there so we can do is just come into the Advanced section into advanced come into the padding and we're going to do it just a little bit of left padding so we'll set that to be 5 pixels just to give us a bit of space I will change the styling slightly on this as well so we make this a lighter gray just lighten that up a little bit like so and we'll just make the font size just a little bit smaller something like that and we'll specify we want this to be italic it's got one more pixel higher there we go okay so we've now created the basic layout for our repeater if we update this we've now created our repeater region we can now reference this inside our templates so to start using this we're going to come back out of our template come back into all our AE templates I'm going to come into our single post template which is for the actual recipe itself we're going to drop this into the top right hand corner to do that we're going to close these down I'm going to come in and use another of the AE template widgets and we're going to come down we're gonna find the repeater so here we go AE ACF repeater drag and drop that over into the right hand column and you see it says please select your template so we need to do is come in today choose the template for the repeater region we want in this example we only have one they say you need to do is just choose the repeater field now sometimes there's a little bit of quirk with AE Pro and this doesn't always populate so if you find that is the case save or update the template you're working on and reload the page and you should then find the repeater field a CF will then populate correctly so we've got nutritional informations we'll select that and we should then find that now brings in the data that we've created as part of a repeater now currently it looks like a little bit of a mess but we can change that come to the layout section and we can choose between grid or carousels so you can choose whatever you want inside there you can also set up this to be masonry so if you have different height sections they'll all marry up and look nice and neat and tidy however what we want to do is just change this from columns being 3 we're going to change that down to 1 you see that now ties everything up and brings everything inline the way we expect it to be we can then adjust things like the column gaps so they take that out of there and the row gap we're gonna reduce that down now things are starting to look nice and neat and tidy so we can do if we want to is come in and start styling things inside here as well so we could put things like little and the lines and so on we can do whatever we want so let's just do that let's just say we're going to put a dotted line underneath there I'm gonna change this over to be just at the bottom so we're gonna put one pixel dotted line I'm gonna change that to be a light gray and there we go so we now have our nutritional information displayed on the right-hand side obviously you can go through and you can create sort of headers for this and make it a little bit more informational and you know a bit more detailed but for now I just want to show you how we do this and we're just going to simply drop in a heading at the top so it just looks nice and tidy and people know exactly what this is so we're going to just set this to be nutritional information and we'll just style that then a little better so at the moment we're going to set that to h4 because this isn't as important as a lot of the other information on the page I will just come in and we'll just set the typography we'll set that to be a weight of 400 and the size we'll set to be something like about 20 that looks pretty good there we go so we've now created our nutritional information on the right hand side there's a repeater region that can be different for every single recipe that we create that's how easy it is to start implement the into your designs though obviously if I was working on this I'd add a little extra styling in some additional things like headers and so on for each of the different columns but you can see how easy it is to start implementing so the next thing we need to do is to go through and add in all the extra information to do with the recipe itself over just this basic description we have at the top so let's take a look at how we do that next now this is one of those areas where you can get as creative as you want when you're creating the actual layout for your single recipe type we're going to start off just by adding the relevant elements in and then I'll quickly style things afterwards so you can see the end result that I'm working towards again because we're still inside the anywhere element or template we need to use those AE template which 'its we can't generally use the normal elemental pro ones so we're gonna do is we're gonna drag in the Ray list of things we want so we're gonna first of all create a new intersection so we're gonna create an intersection inside there set this to be just one column to delete a second column and we're just gonna come in and make sure that everything is later that we want so we're going to say we want no column gaps just to give us the full width so we get control of exactly what we put in there and how we style it next up we're gonna come out and we're going to go into the anyway element or pro widgets and we want the post image first of all we're gonna drag and drop that inside their thumbnail is perfectly fine and we're gonna set that to be centered we're not going to link this to anything cuz obviously we're already inside the post itself now we're worried about styling this a little later on let's just put all the elements in there first next up we're going to come in and we want to put in the actual title so I'm going to come down and we're going to say grab the AE template title see if that pulls that data in I'm going to drop in and a little separate us we're gonna come into the basics section drop a divider inside there we'll leave that as is and we'll just yeah solid that's all fine we'll leave that as is come back out and next thing I'm going to do is drop in some additional information so we want some headings inside here so we're going to come in choose the heading drag and drop that inside and change the dynamic data on this we're going to change that what we want it's gonna scroll down to our ACF fields click on me now we're gonna click on the little wrench icon we can choose what field we want to put inside there so the first thing to do is preparation time it's going to click on preparation time now one of the issues you have when you're working with AE Pro and you're dealing with just the normal element or template widgets is it doesn't display it correctly as in it doesn't display it at all in this example so you can see we're working kind of blind with this however the data is being pulled in and it will be displayed later on let's just click on advanced and crack on with this we're gonna put prep time inside there and then we're gonna duplicate that I'm gonna set this now to a different fields were going to come back in to the preparation time we're gonna put cooking time in there I'm gonna change perhaps I'm to cooking time now the nice thing with these advanced areas inside the heading widget and anything has to do with ACF is you can also put HTML in there you can sort of reference classes and so on then you can style things directly inside here no matter why you're too much on this example but just know that you can do that okay so there's the two things we want to put to start off with next up we need to move on to the next section before we do let's style this first block so we've got something to work with gonna choose this block first of all and from there we're going to just go in and we're gonna style things out a little bit so let's put the Style section come to the background and we're going to set a background color of the burgundy color we working with just so everything looks nice and neat and consistent select our title and we're going to change that now to be white so that stands off there we're going to change the typography a little bit on there cuz we're gonna just make it a little thinner so something like that size wise let's adjust that as well so it's not quite so prevalent 24 I just make it like 28 30 yeah that'll do come back out into our content section we'll set that to be centered and there we go so that now looks a little neater next up let's come over to our image and let's just make that sort of overlap thing so it looks a little bit more classy a little bit more styled out so the first thing to do is come into our Advanced section I'm going to cut our margins unlink those with a set of top margin of minus 95 for this example there we go do you see that now pushes it the sort of main block will deal with the spacing in a moment don't worry about that next up we're going to come over and we're going to make sure that everything is nice and neat and tidy and round just so it looks a little bit cooler so we're gonna do is we're gonna come back over into our style section with making sure that our image is still selected border-radius we're going to come into that I'm gonna set a border type of solid border radius of five pixels I'm gonna set that to be white so we have a little separation from the burgundy and then the border a yes we're gonna set 200 pixels and that'll nice make that nice and round it look quite cool just come back up then to the section above where the text is and we're going to do is going to come to advanced on the come to our padding and we're gonna set let's try about a hundred and twenty that were you so we've now got a nice gap and everything looks nice and neat and tidy so I like the look of that let's deal with the styling for this particular little separate them I'm gonna just make that of a sixty percent center that off there we're going to set this then in the style to be white we'll just drop the opacity down a little bit on that and maybe increase the weight to maybe to let go for that there we go and we'll reduce the gap on the inks we don't need such a big gap okay next we're just gonna come into our preparation time and so on going to our styling set that to be white like I say we're not gonna see it at the moment but we can just adjust that now just so everything is nice and tidy inside there so we know that when we actually pull this up on screen it's gonna be laid out tidy change that from HTML okay just change that to a P tag we will do the same for the one above so Center that styling make sure that's white I know we can do is we can just right click copy that so the one above paste our styling this and I should pick up the style now for everything okay so there's the first part of that the next thing we need to do now is go and create the next section which I'll have the description the ingredients in instructions or our custom fields so we will come back over to our left-hand column and we're gonna drag in another intersection to sit below our heading again we're going to get rid of that extra column so we're going to delete that to choose this and we're gonna set the column gaps to be wide if we want a nice bit of spacing around this section next step let's pull in a heading and drop that in there I'm going to change this now to description and we're just going to just the styling on that as well so set our heading to Sonic h4 let's say we're just dealing with this just to make sure that everything is kind of consistent with the importance of the information that's being displayed style will come in they're gonna set this to be dark great typography we're gonna set this to be 600 and we're gonna set there to be uppercase and then we're gonna drop the size down so it's not quite so in-your-face and we also open up the letter spacing by about one so there's our first one now what we can do is we can duplicate that a couple of times so we're going to duplicate and duplicate one more time and change the titles on there so the next one's going to be ingredients and the final one is going to be instructions and there we go there's our three key headings gonna drag in a separator line just so we've got little separation drive that but they will set the styling on that so 100 is fine solid is fine we're going to come in and essay style and set this to be great adjust that slightly I'm gonna set the width to about 3 pixels yeah we're gonna get rid of that gap on there again we're just going to duplicate this a couple of times a position accordingly there we go get in the a little so okay so now we're going to pull in the data for our actual three different sections so we're going to do is just come in and we're gonna say we want the text editor for this it's gonna come in text editor drag and drop that into the relevant section I'm going to just choose dynamic from then we're gonna scroll down to a CF field click on the wrench icon open that up and this one's going to be the description and we should find that that will then pull in the data for us if it doesn't don't worry we just need to probably save this out and pull it back in later they say there's that still a little quirk because we're dealing with the anywhere Elementor Pro features alongside the Elementor feature so there's kind of just a little bit of a visual discrepancy between the two they let's just duplicate this again so I'm going to duplicate that drop that into the ingredient section and just change the source for that so again I'm going to come in change my description to ingredients and do the same again duplicate that drag and drop that down underneath it select it choose that ingredients this time its instructions so I'm just going to quickly go ahead to tidy up these lines and everything to make sure everything is nice and neat and tidy and once you've done that we can now save this out and we can start taking a look at how this all works and take a look at our handiwork so let's just update this and that's how a template basically completed so quickly went ahead update the stylet added in the calories into the actual details for the recipe itself use an exact same technique so we've just covered and let's take a look at that now how it's all working inside our new template if we come over to the home page you can see we've got all our recipes and so on so let's click on this crown read dark chocolate biscotti particulate now on the right hand side we've got all the additional information from our repeater field is inserted we scroll down you can see we go a nice neat tidy layout for all the details to do with the description the ingredients and so on and as you can see we've got the preparation time cooking time and the calories per serving listed so that's the basics of the template put together like I say if you want to you can add additional things in to the right-hand side on this section I will take a look at adding a couple of extra useful Ling's in a little later now let's move on to dealing with the sturgeon and the filtering which is where we can really get in and fine-tune exactly what information is going to be displayed as part of your website so the next on the list is the search function for our website now one of the Box WordPress will only search against things like posts pages and so on it doesn't actually search any data that's part of our custom fields and our ACF custom fields so we need to rectify that we're going to be using a plug-in called searchwp the reason I quite like this one and it is a paid-for plugin unfortunately is that it's fast it's quick it's easy but also it's very very powerful there are other alternatives out there that you could use if you want to but for me I find this one just incredibly simple to work with so all you need to do is insert a normal search field into your website nothing more than that we're going to come into the dashboard now I'm going to come into the settings section and from there we're gonna choose a search WP click on open an app and that's going to take us into the settings for search WP legacy to enable this please review and share your initial settings so we can go take a look at our settings if you want to however we'll leave that as it is for now that's fine now you can see underneath this is what's going to be searched against currently so you can see it says posts and pages which obviously like I say in limits what we want to do now because our blog or a website where you want to call it is focused specifically on these recipes for me I'm going to get rid of these search feels completely so we can exclude that one and the same for pages we're going to exclude that as well so this won't search on anything right now so if we come in and click on add post type you can see it now gives us a range of different things we can pick we want the recipes we can leave everything else unchecked so in choose recipes we expand that out and we can now go through and choose how important the various different aspects of our custom post type actually are so you can see what you can do is you can specify whether you want to use various different attributes that are part of the actual post itself and you can also apply a weight to them so we say the title is very important the content we could say actually is a little less important so we could say let's bump that up to maybe 20 so that's a and that's about 20 percent importance the slug which is basically just the URL that you could reuse we can drop that down say we're not overly worried about searching against that and we could if we wanted to just leave it at this point and we could just say we save this out and then we'll go it index everything however where the real power of this comes in is we can add additional attributes in so if we click on add attribute we can choose from a taxonomy or we can choose from a custom field so we can add a custom fields it'll open up another drop-down box which then allows us to go through and choose what custom field we want to use so we can click on there and we can say we may want to deal with something like the actual description or the ingredients we might be looking for specific ingredient so we can add ingredients in there and we can say how important is this so we will bump that up to maybe 40 percent or 40 so we add some weight to that and we can keep on adding custom fields or we can keep on adding taxonomy some things into this search facility as much as you want so we get all the different things that we need inside there so we're going to leave everything as is because this is something is very specific to the kind of content that you're working with but you can see that using this gives you a whole range of options on how you search what you search against really really powerful and very very simple to work with let's just save that engine and that then it's going to save all the settings we've done it's going to go through the indexing process and you'll see now that's currently indexed since we're saying how many are indexed how many run indexed and the main row count how many rows is gonna sort of pull in for search statistics and things so once you've done that we can go through if you want to take a look at the Advanced Settings and it's anything you want in there but what this allows you to do is choose stop words that'll be ignored so you can see things like a about above and so on we can also use synonyms so if you want to put synonyms in there we can drop those in so you can fine-tune and configure your search to be exactly what you want how you want to work what you want to search against and how specific you want to be of various different things so I'm not gonna with a huge amount of detail with this but what you can see is that you can very easily create really comprehensive searches with a ton of really useful features inside there what we've done that we can simply come out of this and go back in to actually take a look at the website itself so we're gonna come back and we're gonna refresh this and then we can test that was searched out so what we're going to search first something that's a name or anything like that we're gonna search for an ingredient because we've applied the ingredients as part of our search criteria so we're gonna type in honey because I know that one or two of the recipes in you have honey as part of that ingredients so once we've done that we're click and you see now that will come through search results for honey and we've got two results inside there and we click in any aside of these we could take a look and actually see where that honey is inside the actual ingredients itself so you can see we can come through and we can search for these various different things specifying exactly where they are inside our design now you'll notice there's one problem though we've got a very generic looking search results page we want to set this up so it looks in keeping with what we've created before so the next stage is we got to create the search results archive page well back in the dashboard what we need to do is come over to our templates section and into our theme builder and from there we're gonna create a new archive page we're gonna click on the archives add new and we'll name this default search archive just so we know exactly what it's working with create our template and once we've done that we only need to need to put a couple of things into this we're gonna close out of this we will create our own template first thing let's come in and add in a new section and just put in some padding at the top and bottom so again like I say we keeping that consistency of design throughout all our different pages well come over we're gonna drop in a title inside there so we're just gonna put in a normal title I'm going to change the text that's in there and we're gonna put in your yummy search results we'll quickly set the styling on that and we'll just come in the typography and we'll set that to be 400 I'll be fine no we need to do is come in and actually set at the archive results so all we need to do is click on archive posts that'll drop that in there just to change this over like we've done with all the other archives to custom change that to our default loop columns is perfectly fine facet WP we don't need because we're not gonna actually filter these pagination we're gonna put in there to be numbers of previous and so on like we've done before everything is looking good inside there we can do if we want to we can change these for the preview settings we don't really need to worry too much about that so we're gonna publish this gonna add a condition in we're gonna change it from all archives that we're gonna set this to be search results once you've done that we can say save and close and that now creates a custom archive page for our search results so we come back over to our previous layered results we're just gonna refresh this page I will find that that will now use our new template that we've just created all keeping that same design and as you can see it's incredibly simple to do with both Elementor Pro and also where we've set up these custom templates for the loop ok we've ticked off huge amount of this website now we're going to go into the filtering section so this is going to be using that facet WP plugin again like I say there are other plugins out there that do this kind of thing but I found fast WP to be quick easy and intuitive to work with and it's not crazy expensive links in the description below so if you want to take a look at it in more detail and also the different add-ons that you can get for this to expand the functionality you can follow that link and take a little look ok so what we need to do now is start setting up what are called facets now if you consider a facet to be one type of filter that's what it really means so we can create multiple facets and each one of those is an individual filter type so let's take a look at how we do it we're gonna do is we're gonna come over into the settings section I'm going to come down to facet WP once you're inside they when you install this the first time you're going to see that you're gonna have one option in there one facet which is called categories we don't want that this is just one the set up by defaults we're gonna click to get rid of that and that's now cleared that out now the other nice thing when you work with facet WP you don't really need to configure anything we've got settings in here but that just allows you to put in your serial number put the debug mode and so on we don't really need to touch that so we're not gonna worry about that in this video we're just going to go ahead and start creating our facets let's click on add a new one and this is the kind of dialog box that you get now that allows us to go through and configure what we want to search against what we want to name it the short codes are going to be used and all those kinds of things so the first thing I want to do is change the label of this and the first thing we're going to search you get or filter against is the recipe types so you choose recipe types you can see that puzzle name now for us next up is what kind of facets you want to use click and expand you see we have out of the box a range of different options in there checkboxes dropdowns hierarchy and so on and so forth we're going to keep this first one very simple we will take a look at some other options in the next step choose check boxes and then we're gonna say what's the data source in other words what inside your actual website are we go to filter against so you can see by default it says post type we click and that gives us a lot more options you can see they're grouped up into things like custom post types if using a CF or you've got things like posts if you just using the normal wordpress you've also got taxonomy some things and this will pull in any custom taxonomy that you create so this is what we want to target we will come down and we're going to say that we want to use recipe types click on there that will now change the options underneath to base upon what the data sources and what the facet type is so you'll have different settings depending upon the difference of a facet the different data sources that you use parent term we don't need to worry about that we're not gonna worry about hierarchical for this example you can if you want to everything in here has a little sort of help icon it'll tell you what each one of these actually does we are gonna say show ghosts and we're going to leave preserve ghost order behavior you see we can say narrow the results or widen the results and then you've got sort by the highest count the displayed value the raw value the term order and so on so we can say let's put that into term order we then have the counts this is the maximum number of facet choices to be shown and then we've got the soft limit which is the show the toggle link after this many choices so you can expand this out so if you have lots and lots of different categories or recipe types that could get a little unwieldy so you can set this up so you can expand it out after ten sort of like sections that have been used hope that makes sense so what we need to do now is say Save Changes we're gonna re-index so that'll go through now and check through all the data based upon our data sources and it'll build all that information out for us it's gonna copy this shortcode and if we come back to our facets you can see now it tells us there's our new facet tells us the type tells us the source and also now that we've reindex t' tells us the number of rows that are being displayed so we've got 17 different sort of recipe types associated or 17 different sort of variations should we say because you could have a recipe could be in multiple different recipe types therefore that's what this is displaying again I hope that makes sense so now we've got our first facet how do we go about actually inserting this into our design what we need to do is come over to our template for our archive where we want to put these filters code the template down to our theme builder once we're inside there we're going to come down and we want to find that the default recipe archive it's gonna click to open that up once that's it opened up with a lament or we can start populating that right-hand column so the first thing going to do is create a title for this so I'm gonna drive the heading over drop that onto the right hand side once you're inside there we can change this now and we'll say filter change that maybe go so you can filter our recipe type and we're just gonna quickly change this out h4 and we'll just change the styling a little bit so it just looks nice and tidy and in keeping with what we're doing so we just adjust the size a little bit okay so how do we put this filter in this this facet in them all we need to do is use the shortcode widget so just search for shortcode drag and drop that over onto our page once you've done that we can now drop in the shortcode so we're gonna just paste that in there and you can see it now says facet and we've got facet WP and the recipe types now it won't actually display anything inside she won't display the actual results they'll only do that in real time when you're on the actual site itself it won't do it inside the template we can apply this all we need to make sure and this is important otherwise you'll find this won't work correctly we're going to select the actual loop that we want to work with the archives and we can't come down and make sure that the facet WP option is enabled now any page that doesn't use faceted WP can have this disabled but any page you want to use it on you have to make sure that that option is enabled you've installed the faster WP element or plugin because that's how it works in conjunction with Elementor other than that that's it so now if we update this page if we come back over now into our test site so we're going to do is when I come into our recipe section which now should display our filters so you can see we've now got our filters displayed in the it shows us five and we can click to expand to see the additional ones so it's gonna roll these up to make sure that we don't overwhelm the end user with you know hundred different options then we can do as you can see we have a count for these and if we click like dessert for example select that that will now filter that out to only show the desserts we can uncheck that and we can try party food we now get three results so that's how we create our first facet now we're going to jump back over and take a look at another kind of facet where if someone wants to search by calories which if you're thinking about it when you're dealing with a Sippi website especially if you have healthy options in here this is going to be something that's very useful because the easy visual way of just filtering out to find those nice low-calorie recipes so let's take a look at how we can do that next so go ahead hop back over into fasted WP and we're now gonna create another entry another facet so this time we're gonna call this one calories we're going to change this from a check box we're gonna use a slider on this because it's a nice visual way of I'll just sort of set those values and slide things between so you can see exactly what you're doing they were saying the datasource so we need to do now is we need to find those calories so what I can do is I can start typing and you see that will pull up we've got both custom fields and advanced custom fields both are gonna pull in the same data so we're gonna say recipe calories per serving and the data sources we don't need to worry about and we'll leave every other value in here as it is except for the suffix and we're gonna put cows so what you can do now is you can see we've got a format we can change that if we need to so depending upon the kind of thing you're dealing with you may be dealing with some like car sales whereas you might want to put things like 5k 5.3 K and so on I'm gonna leave this as values like this because we're dealing with simple calories the step if you were dealing with much bigger values you could set a much larger step on here if you wanted to again I'm gonna leave it with 1 because the values we're going to deal with and not going to be exorbitant but you can change that should you want to well do now is save our changes reindex this let it go through and reindex now for the new data that we've sort of selected you see that'll go through tell us how much it's indexing and there we go is complete i'm gonna copy that shortcode like we did last time come back to our fastest as you can see we now have nine different rows because we have nine recipes currently inside here this is gonna filter guess those nine so what we need to do now is come back into our templates again into our theme builder open up our archive which is our default recipe archive in elemental once we've done that we're going to create another section so we're going to duplicate this title we're gonna duplicate that and we're gonna put that down and we'll say calories per serving so that's the filter come back over we're going to create another short code section drop that below there and paste our code in click apply and we're gonna update our template and we can now find we've got a new section to come back over and we refresh this we should know find there's our calories per serving and you can see it automatically in the values so our least calorific recipe as 172 calories our most calorific 523 so we kind of lis want to start to adjust these and see what recipes we get up inside those values so we can quickly come in and the other nice thing you'll notice is well we've got the filter recipe type above that also updates to show you what sections those recipes are in so you may say actually I'm looking for low calorie party food or you can click on party food and you know you're filtering this based upon the recipe type and the calories in each of those recipes so we filtered it down now to even finer results this is okay when you've got nine examples like this but imagine you had a nine hundred recipes on here this is gonna be a fantastic way to filter that data ten now you can keep on doing this for other sections so you may want to do number of servings and all those kinds of things you can just create more facets drop those into this section on the right hand side in your template and then you can build a really nice complex way of creating a nice filter for your entire website I will leave at this point because you're just going to go through the same routine as we just covered now twice just adding in additional filter options so just a couple little things that I want to do now just to finalize the look of our single recipe page so we're gonna come back into all I eat em plates and we're going to edit our default single recipe page and once you're inside there we're gonna drop in a nice little sort of right-hand column section this is entirely up to you if you want to do something like this but it just opens up the information on the right-hand side of our site and just makes things look a little nicer a little bit more finished so we're gonna do is we're gonna come over and we're gonna add in a new section this is gonna allow us to go through and choose one of our seasonal goodies to link through to you know you can create this in multiple different ways but I think this is a nice simple way of doing things again we're going to use our call to action widget so we're gonna grab that drop that over onto the right hand side below our nutritional information change our image inside here and we'll just use this Pizza one for example - now is we're going to just change this out to make it look a bit more interesting so skin yeah classic is fine that's perfectly fine content we're gonna change that over so we're going to come in and we're going to say winter warmers because it is or winter time so let's change that title on there there we go and we can drop in some text if we want to to actually sort of pre-populate what this particular section is about let's just make sure this all sets in style with our other recipe say it sections it's going to come over we're going to just make sure that everything looks nice and neat and tidy so tightly I think that's all great that looks fine we are going to do though is we have set the background color and I set that to be white and we're gonna come in and we're gonna say we want to put border around this but we're gonna use the box shadow option so everything ties in nicely so let's just adjust that to make it a lot more subtle and we'll AB the blur a little bit to maybe around it and if we want to we can do things like you know adding border radius and things so we can just tidy things up we can say we want to put ten in there ten in there that rose the top sections off and you know we can do whatever we want with this but what we are going to do is we're gonna change that button so we wanna make sure the button goes to where we want it to go to so click the content under the link section we're going to come in and choose the dynamic option and like we did before we're gonna say internal URL and then from there gonna click on the little wrench icon come down I'm gonna say taxonomy I'm going to just do seasonal there we go feature that sees not and if you weren't gonna change this as well I'm gonna say this change this to seasonal goodies okay you could set this out to be dynamic if you wanted to you can do anything you want with this it's pretty cool very functional lots of dynamic options inside here so you could create a nice little section that you could change this out at any given time using dynamic data create a custom section inside your dashboard and really get creative with how this is all working I want to do though is come into our button we're gonna set that to be medium we're going to set the text color to be white so the background-color to be our nice burgundy color so everything now flows in with what we're doing we don't really border so however we're gonna come over text color against me white background color is going to be great so we mouse over now you can see we get the effect that we want we'll just set our border width and everything to be zero border radius to be zero there we go so we now have a new section that allows us to go in and choose window warmers and jump through directly into that now if you want to what I would Jerry tend to go and do now is put things inside here that would be subscribe to your mailing list and so on so it opens up this function on the right hand side this and makes it somewhere that you've got consistent information throughout your entire site but obviously entirely up to you how you want to work with it let's just quickly update this jump back over take a look at our new template updates and there we go there's our winter warmers we can click through and see our seasonal goodies and there's our seasonal goodies inside there so everything is now set up and configured throughout the entire site that's it we've now finished this video hopefully what you've learned throughout this video is that you can create much more feature-rich websites just by harnessing the power of advanced custom fields Elementor Pro and a couple of extra little plugins that open up what you can do we've got a great looking site with lots of cool functionality fully customizable fully editable do anything we want with it you can filter it we can search on the data we want all done inside WordPress very easily if you'd like to learn more about using advanced custom fields with elemental pro there's over five hours worth of videos on the channel currently put a link in the description below to that playlist and you can also see it in the corner right now check that out you're gonna get a lot more out of WordPress by harnessing the power of advanced custom fields and creating really feature-rich websites as always I'd love to get your feedback on this video drop your comments questions feedback in that comment section below as always all the applicable links for everything covered in this video are in that description so you can check those out and - in policy this has been wptouch till next time take care [Music] [Music]

Channel: WPTuts

Views: 26,864

Keywords: how to create a food blog on wordpress, how to create a food blog, creating a food blog, how to start a food blog, start a food blog, advanced custom fields plugin wordpress, advanced custom fields pro wordpress, searchwp wordpress plugin, advanced custom fields elementor, advanced custom fields pro, advanced custom fields pro tutorial, advanced custom fields tutorial, anywhere elementor pro repeater, anywhere elementor pro tutorial, facetwp elementor, wptuts acf, wptuts

Id: a2uabma0ML4

Length: 109min 2sec (6542 seconds)

Published: Fri Oct 18 2019