GeneratePress Theme Customization | Build A Custom Listing Website

now do you find yourself struggling with the limitations of the standard WordPress setup and you want to expand it we don't really want to have to rely upon themes that have specific features or plugins that you have to shoehorn into what you want to create better if you can create this for yourself you get a lot more flexibility a lot more expansion in the future should you want to move beyond what you create right now so for this example we're going to be using a fictitious website of created this is all about an accommodation based business it's effectively a listing website so even though this is using accommodation as the backbone of it this could easily be real estate job listings or any manner of other different types of listing websites so what we have is basically a site that gives us information about different accommodation you can see if we scroll through on the home page this is the list of accommodation and you can expand this as far as you want so we have is basically a custom post type that is accommodation and inside there we have some standard information like the featured image the title the description however we also have some additional meta Fields additional information a different taxonomies and so on I don't want to explain all these terms as we go through so if we take a look for example at Rocky's view we've got the featured image we've got the name and we've got the description but we also have the price per day we've got the location the country we've got the website if we click to go into this you'll see we have a nice looking layout where we've got information about the actual accommodation itself and we can put whatever we want inside you we've got contact information and this is a mix and match of dynamic data we've added in custom meta fields and so on and also standard kind of Wordpress features so we kind of put the two together to give us huge amounts of flexibility if we come back up to the top you'll see we've got location and inside there we've got the different locations we've got properties so for example Australia Canada and so on if we click on Canada that will now show us just the Canadian properties and if we take a look on the left hand side we've also got some filter is inside here so we can see we only want the ones that are under luxury and opulence and then we can kind of filter this down we can go from prices and so on if you come into types you can see we've got different types of accommodations we may have hotels Inns sort of luxury opulence accommodation for groups and so on so we click on the luxury and opulence you can see this takes us into another page where we've got a different similar set of filters different properties now that fit into that particular category or that particular taxonomy and this is what I'm going to show you how to create in this video [Music] so now we've seen what we're going to create let's take a quick look at the tools we're going to use to create it now don't worry if you're not using exactly the same tools as me there's still a lot you can take away from this to understand how Dynamic data Works inside WordPress itself so stick around this time stamps in the descriptions you can jump around should you need to and just check out the bits that you want otherwise let's take a look at the tools so first of all we're going to be using generate press for the theme of choice we're going to be using the pro version because I want to use the templating feature inside you we're also going to be using generate blocks again we're going to be using the pro version however you can do an awful lot of what I'm going to cover with the free version of Jerry blocks because that includes quite a lot of really cool Dynamic data sort of features including the loop build up so do check that out for yourself also going to be using Advanced custom Fields we're going to use the totally free version of this so again you can follow along to find out exactly how to get started using ACF and finally we're going to be using grid Builder to deal with the facets and the filtering side of things all the links for everything I've covered are in the description below as well for ease [Music] so the first thing we need to do is go ahead and set up the data structure that we're going to use using Advanced custom Fields like I said this is the free version so you can follow along without spending any cash so once you've installed all the plugins you're going to have a new entry on the left hand site called ACF so for this we're going to come into the post types now the post type allows us to create our own custom post type now we could if we wanted to use the inbuilt posts feature in WordPress itself but that kind of limits some of our flexibility so it's much easier to just create something totally unique now once we're in the post types all we're going to do is click on add new and this then opens up the options for us to create our new post time so for this we're going to call our plural label is accommodation and I was thinking enabled is accommodation as well and you'll find if we click underneath it'll automatically pre-fill out the post type key and this is what you'd use for your navigation and so on so if you want to change this now's a good time to change it but in this example accommodation works perfectly fine now underneath you'll see we've got some options for whether we want to make this public which we obviously do and where this is a hierarchical setup for this example we'll leave this as it is but you can at any point come back and make changes the only thing I would recommend you don't change that you do it right now before you actually save those changes is if you want to change the post key now's the best time to do it okay we could if we wanted to leave it at this point however we're going to go into the advanced configuration option now don't be scared this is something relatively simple and straightforward and we only need to make a couple of tweaks inside you so once you open this up you'll see this gives us a set of different tabs that we can access with various different pieces of information first of all we want to make sure that this has got supports now this is the default WordPress feature so when you create a post you'll find you've got things like titles you've got the editor you've got the featured image author excerpt and so on so we're going to leave the first three of these enabled so the title editor and featured image but if you wanted to add more in you could do that by checking any of these options and again you could come back at any time and add additional ones in if you want to add a description in you can do that here so we'll just say it's a list of properties for rent we want to make sure this is active we can come into the labels and this is where you can change what you'd normally see down the left hand side so for example when you come to posts you've got all posts add new academies and so on well we could customize that for any of our new custom post type so for example we've got accommodation all accommodation edit and so on and you can see all the different options you'd expect to see are inside you however we can and we will leave all of those at their default values but if you want to change them for whatever reason you could do that inside here visibility then just shows where and when we want to display the various different custom post types metaphors and so on inside the actual dashboard of Wordpress so if we take a look you can see if you've got things like show in UI so in other words we'll show it inside our user interface in the dashboard so we've got new for example it'll be included in there no you kind of get the picture if you want to customize various different options inside you you can do however if you're not sure leave it alone what we're going to do though is we're going to set a menu icon we can use the dash icons all you need to do is just copy the little link that you get from there and you can see you could jump over to any point and take a look at those Dash icons by clicking on this link and I will show you the dash icons and you can see there's the actual text that you're going to grab to Simply go ahead and drop inside this box here so once you set the dash icon you want to use you can change any other parameters we're going to leave everything as it is we're not going to exclude this from the search we're also going to come into the URLs and inside you we're going to leave most of this at the default however we are going to choose the option to have an archive we'll just select that and if you want to put the archive slug in you can do so we could put accommodation inside your but if you wanted to you could also just go ahead and leave this blank we'll leave all the other options as they are we don't need to change anything inside there we can come into permissions and inside here you can set any options you want but we're going to leave that as it is and the rest API we're not going to touch that so we'll hit save changes and that will then create our new custom post type so you can see on the left hand side we've got accommodation and inside there we've got all accommodation and add new so this is just the basic options now you notice that once we've created this we now get three additional options to add fields to accommodation to link existing field groups if we've created them previously or to create a new taxonomy so we want to group our accommodation by various different options and this is what's called a taxonomy and a taxonomy just allows you to group things together so if you come over from the standard WordPress you'll know that when you've got posts you've got categories and you've got tags they're simply taxonomies ways of grouping your information together into logical groups so for our example we want to create a new taxonomy what we're going to do is we're going to again give it the label so this is very similar to what we've seen creating the post types so we're going to do with this is we're going to say accommodation location I'll put in a plural on there accommodation locations and we'll put the singular underneath accommodation location and you'll see again it automatically creates that taxonomy key for us you'll see because we've chosen our little green option it says it automatically links it to our post type of accommodation but if it didn't you can simply click inside there and choose whatever post type or types you want to link this custom taxonomy to then we've got options for making it public or hierarchical and if you want to again you can leave it exactly at this point you don't need to go at the advanced configurations if you don't need to now for our example I'm going to use the hierarchical option now even though we're not using a hierarchy I just find this makes the whole interface inside WordPress just a little bit nicer and easier we can just simply just check the boxes for any of the different locations we want to associate things with if we jump into advanced configuration again you can see inside here we've got a range of different tabs we can go through General labels and so on so a lot of these are exactly the same as we've just seen we can go in if we want to set the labels we can come into visibility we can set options inside there we're going to say we want to show this in the admin column it just makes housekeeping just a little bit easier and again we can change the URLs if you want to we'll set this to be hierarchical and we're not going to touch the rest API so we're going to save our changes you can see now we've got slightly different options we've got add accommodation location Fields link existing field groups or create a new post type this time now we don't want another post type we do want to create another taxonomy though so we're going to click on taxonomies and we're going to add a second one in so the same kind of thing again we're going to do accommodation types again we'll copy that from there put our singular label in let that create the taxonomy automatically what post that you want to select and Link this to this can be linked to accommodation again we're going to use hierarchical coming to Advanced configuration come into labels come into visibility make changes to anything we bought in there so we're going to show this in the admin column and we're basically going to leave it at that save our changes and we've now done probably two-thirds of what we need to do so we now come over to accommodation you'll see we now have those two new taxonomies so accommodation location and accommodation types so first of all let's take a look at the all accommodation you can see there's our new custom taxonomies and because we've set these to show up in the UI you can see there's accommodation locations and accommodation types these now will be available to us and listed inside the accommodation section just makes kind of finding things a little easier if we come in now to accommodation locations we'll click on there and you can see now we can go ahead and start adding in any kind of information we want so let's add a couple of different locations in you simply go ahead type the name in we don't need to set anything else up inside here we're going to Simply leave it at that add a new location and I'm going to repeat this process for a couple more locations there we go there's our locations all set up I can repeat the process now for accommodation type so if we click on accommodation types you see this looks pretty much exactly the same so we need to do is give this a type so we're going to say this is a hotel we'll say add new accommodation type and there's our hotel so I'm going to again repeat this a couple of times for the various different sections and again there we go there's now all our accommodation types set up now before we move on let's go and take a look at adding a new accommodation in so you'll see if we come into adding a new accommodation we've got our title we've got our information our detail our content whatever you want to call it if we can all do a combination section then we've got our two custom taxonomies our location and our types and we've got featured image now you can ignore the layout options these are all to do with generate press so you may not see this if you're not using generate press and that's all we've got but if you want to put things like prices additional information contact details and so on we could put those into the content area but it's not really the nicest way so what we're going to do is we're going to add some custom meta fields to our custom post type so let's hop back out of here let's come back into ACF but this time we're going to choose the option for field groups now when we're in a field groups this is where we can go ahead and create custom meta Fields now meta fields are basically things like your title your content your description your excerpts and so on they're just normal standard metaphors as part of Wordpress and we can create our own custom ones and we can associate those with pretty much anything we want inside the WordPress dashboard itself so for this example let's go ahead and add a new one in we're going to give this a name of accommodation details now before we add those fields in let's just scroll down a little bit and just check our settings and make sure that everything is set up correctly before we add those fields in so you'll see first of all we've got location rules we open this up you can see there's an awful lot of different options inside you includes including things like your post status your format your categories and so on by default post type is selected then you've got your option two is equal to what's not equal to and then you've got basically whatever the option is so in this example post type is equal to your standard built-in WordPress posts and pages and so on you've also got our new custom post type which is our accommodation however if we change this to something like post template you'll see we get different options then in the third drop down again change this to something like post format and you'll get different options inside there for the normal WordPress formats we'll set this back to post type I'm going to say is equal to accommodation so what this does now is this will connect these new meta Fields up to our new custom post type accommodation but you could easily add additional rule groups in so if you want to have these fields associated with multiple different post types you could do that if you wanted to in this example doesn't make a lot of sense so okay we'll leave that as it is for now next up we're going to go ahead and start adding in some new custom Fields now the latest version of ACF makes this whole process really nice and simple you've got your field type and you can if you want to choose from any of the field types that you have access to on the free and or the pro account or you can click on the browse Fields option and this will give you just a little bit more information about what each of these fields actually does so you can see inside here we've got a range of different types of fields from the simple like text and numbers and so on right the way to more complex things like flexible content repeaters now these are pro features so we're not even attach those but you can if you want to filter things down just to go and grab exactly what you want so for this example we can come into basic we can choose text we can give this a name was put in address and we want to find out more information on the right hand side it gives us a little overview and if we want to access the documentation you can click on the documentation link and that will take you then over to ACF the documentation for that specific field type it's a nice simple way of jumping over to any additional information you want to find out if you need a little bit of help on what any of these custom fields or these custom meta Fields actually do so we've set up exactly what we want which is just a standard text field called address we'll hit select field and you'll see now that pre-fills out the basic information if we want to we can commit to validation we can make this a required field and we can drop in a character limits if you want to limit the amount of text we could put into any of these boxes you can do that here you've got presentation which allows you to drop things like instructions placeholder text you can prepend or you can append the information and certain circumstances that would make sense with this it doesn't really make a lot of sense so we can then go ahead and we can apply a wrapper width to this and we can also set a custom class or a custom ID and finally you've got conditional logic which allows you to to show and how it feels based upon the status of other fields inside your Custom Metal Field group so we're going to do is we're going to come back to General and we're going to just say close that we're going to add another Field in this time again we're going to browse the fields for this we're going to come into basic and we're going to say this is going to be a number we're going to set this to be telephone select our field we can come into validation again if you want to make this required you see we've got slightly different options for minimum value and maximum value presentation again is pretty much the same so let's set this to be 50 and we don't need to worry about conditional logic next up we're going to add another Field in this time we're going to just set this to be a URL field and we'll just say website what we're going to do in this though is we're going to come into the validation option set this to be required come into presentation so we say there we're going to drop some instructions to tell people they need to include the full link and we're going to put some placeholder text it'll have this inside the actual entry itself ready for people to type in we're going to set this again to be 50 and we're going to close that field down next we're going to add another one in so add another field in this time instead of going to the browse Fields let's just do it this way we're going to come in and choose the email option field label we're going to put in email field name email automatically fills out validation required presentation we'll set this to be 50 again add another field in for this this is going to be the starting price so again we're going to come in we're going to choose the option for a number or this starting price or starting yeah starting price pre-fills the next options out validation yep we want to make that required presentation we'll set that to be 50 finally we're going to add one more field in so we're going to add one final Field in this time we're going to set this to be a wysiwyg editor or what you see is what you get edit test because it's a nice sort of way of adding in bold and so italics and things like that so we'll put in contact information call it a presentation and inside there you can see we've now got slightly different options they do all context sensitive so you can see we can set the visual and text visual only or text only so for this we're going to say this is going to be visual only the editor we're going to set to be Basics which is really simple so we don't have sort of file upload options and we'll disable that we say delay initialization and we'll set this to be a hundred percent but now close this field down and just come down to our settings check our presentation if you want to customize the way this looks you can do that and you want group settings you can also set up options inside you for this we don't need any of that we can simply go ahead and say save changes and now let's go back to our accommodation and click on add new and now you see we've got all the things we had before we now have all these additional details underneath that are specific to working with our accommodation custom post type when I click to initialize your contact information you can see we get things like our bold italic and underline and so on inside here so we've now created an additional custom meta Fields Associated to those with our custom accommodation post time so we're pretty much almost done there's one more thing I want to do if we hop over to our Live Test website you can see when we come to the various different sort of types for example this luxury in opulence we've got this hero image however if we come into hotels and Inns we have a different image so this is using again a custom meta field so let me show you how easy it is to combine this with not just sort of post types but with other features as well so we're coming back into ACF back into our field groups we're going to add a new field Group in again we're going to give this a name I'm going to call this property type additional details so what we're going to do is we're simply going to create one single field we're going to change the type over to image and we're going to do is going to give this a name and we're going to call this header image field enabled by fill out then we can choose the return format in this all we want is the image URL so when we upload an image to our additional details in our property type we'll have a link saved in the database that we can then use to reference to dynamically display a header image based upon whatever of the property types they're actually looking at that you can see we can upload this to the post or we can upload it to the entire library for this example we'll leave it to the library validation we're going to set that to be required presentation we're going to leave that as it is and conditional logic again we don't need to set anything on there but we do need to do though is come down to the settings and inside there we're going to change this from post type we're going to scroll through until we find taxonomy and then we're going to just come over and we're going to choose the option for accommodation type so you've now Associated this with the accommodation type field save that and now if we come over into our accommodation and accommodation types we now have a new field that says add an image and this is where we can add in our custom header image I'm going to add some data in a moment so that kind of wraps up the ACF section we've set up the structure that we want to use we created our custom post type custom meta field Associated those with our custom post type and also our custom taxonomies for grouping everything together so that's all that ready now to start accepting data and then we can start to build up the templates and the design side of things foreign content to our new custom post type is pretty much exactly the same as adding content to Wordpress in general all we do is come into accommodation and click on add new now we can give this a name we can drop in a description and go to the accommodation option on the right hand side let me choose where this actually is we'll say this is Canada we'll say this is luxurious we'll give it an address we'll give it a fictitious telephone number I'll drop in the website address and again you can see there's our little note instructions how to use it and also the pre-filled information inside the actual lock itself we'll drop in an email address and we'll drop our starting price in and if we want to we can drop in some contact information and it's kind of like instructions for how you want to contact people for example I simply just grab a little bit of text from here pop that inside there finally let's go add our featured image I've already uploaded some so we're just going to select an image from here and now basically everything is set up for this first property this first accommodation now the nice thing with working this way is that we can still take advantage of all the features we have as part of Gutenberg so where for example we are using not just Gutenberg but also using generate blocks if I want to I can easily come in and I can use any of the generate blocks options so things like tabs grid the accordion buttons and so on or any of the Native standard WordPress options as well so we can customize the look and feel of this very easy for example we may want to drop in something like a gallery let's just choose the option for gallery we'll choose our media library we'll select a bunch of images from here and we'll create a new Gallery we'll insert that and now we've got our Gallery inserted into our page and we can use the options then to customize this over on the right hand side and any options you have associated with any of these elements you can easily go ahead and make changes to them to customize it so once we're happy we click on publish we'll choose to publish the article itself or the accommodation itself and let's go ahead and view this and you can see there's our new accommodation inside the standard default layout for Generate press so we'll customize that in a moment but you can see how easy it is to go ahead and start adding in your custom information using a combination of the standard Gutenberg features alongside the options we've added in for those custom meta Fields using ACF and how we're going to organize everything then by using the options for our accommodation location and our accommodation types so there's the first part of this step I'm going to go ahead and I'll add a few more properties in so we've got a bit more accommodation set up ready to go there we go we now have a couple of different accommodation entries in our database as you can see our accommodation locations and our accommodation types are also listed inside here as well we can click on any of these and jump straight over to that and we can filter the properties Down based upon that so it's pretty cool and pretty easy to see how to go ahead and set things up inside here so we've now added in some data we're now ready to move on to start building the actual design and pulling in that Dynamic data into a design creators and templates and fleshing out our overall website [Music] so now we've got the basic data all sorted out the next thing on our list is to go ahead and start building the actual design itself so the first thing we're going to need to do is set up some of our basic parameters in generate press itself and to do that we simply come into appearance and into the customize option now inside Joe you've got your normal standard customizer for WordPress with obviously a range of options geared towards generate press so we can come in and very easily handle things like the layout so for example the container we can set exactly how we want this to be the size of it and so on but I want to go through all of this step by step because let's be honest about if you're following along with a tool like working with ACF and dynamic data you're probably more than accustomed to dealing with this aspect of things and just for ease to make your life so much quicker and easier if you want to follow along with this tutorial I've already gone ahead and made the download for the settings that I've used available in the description down below so all we're going to do is hop out of this we're going to come into the options for appearance and down to generate press scroll to the bottom and we're going to choose the option to import so I'm going to choose my file this will be linked like I say in the description down below all we need to do is click on import click OK and that's now going to import the settings the color schemes and all those things for us [Music] foreign set up let's go in now and just create our menu structure just so we've got things laid out and we can start to build things out with the information in place let's all Mark into our dashboard let's hop over into our menu section let's create our main menu we'll set this to be primary it off canvas and we'll click create menu let's open up the screen options at the top and we're going to choose accommodation location and accommodation types close that down and now we can reference those inside our navigation so first of all let's come to our Pages say view all let's select our home page and add that into our structure there's our first page link so next up we need to go ahead and add in our locations and our types now what we want to do in this example is we want to have a drop down menu so easiest way to do that is first of all come into our custom links we'll put a no link inside this we'll just put little hash or pound if you're in the us and we're just going to put this as locations add to menu do the same again and we'll call this property type add to menu so now we can do is we can use the options underneath and we can add those in so we'll say view all for the locations we'll say select all and add to menu and all we need to do is just quickly go ahead and organize these we'll repeat the process now for the accommodation types again view all select all add to the menu and just quickly set these up to be a second level navigation there we go let's save our menu hop over to our test page refresh this and we now have our locations and we have our property types if we click on for example hotels you can see this will now use the default template to show us the hotels same for coming to Luxurious for example you can see this again then shows the basic template finally if you come into locations and we choose something like let's try Italy again this will now show us all of the different properties and we could leave it like that but that doesn't really look very interesting [Music] so the next thing we need to do is go ahead and start to create templates for the various different pages the various different layouts and so on to do that inside generate press we use what are called elements now elements are basically either full templates or template pieces we can access this in a couple of different ways if you've got the bar available on the front end of your site you can click on the elements option and as you create elements this will put inside brackets afterwards the number of elements that are being used on the page you're covered looking at the second way we can do this is come back into our dashboard under appearance we've got elements inside here or again at the top we've got elements at the top on the quick menu let's choose elements from whichever you prefer and this will now show us the add new element so this will list all the elements we have including the type the location exclusions users and data was created and so on let's click to add a new one and we've got four different elements we can choose from we've got blocks hooks layers and headers for most use cases blocks are what we're going to use and we're going to start off by creating a custom footer so we'll choose options we'll choose block and we'll click on create this will then take us into what looks like a standard page with some additional information available at the bottom and also on the right hand side so first of all let's give this a name we'll call this General footer we'll come over then to the right hand side under the block element you can see element type is set to hook but we can choose a range of different templates and options inside here so for this we want to set this to be the site footer so that now will become the global footer for our overall design unless we override it by using the display rules underneath so at the moment you've got location exclude and users and these in combination with each other can be very comprehensive but for this example we just want to set the location to the entire site and now we can go ahead and create our design for our footer now for ease in this example we're just going to use one of the pattern Library templates we set our category to be footer and we'll choose one other thing is in keeping with what we're trying to create for this example we'll choose this security eye and all we can do is we can customize the look of this to make sure whether it's all in keeping with the color scheme and so on that we're using once we finish styling everything we can go ahead click on publish hop back out of here and you see there's our general footer with all the information about the location and any exclusions and so on come on to our front end we'll refresh this page scroll to the bottom and there you can see it's our footer [Music] okay so the page that we're currently on is the kind of loop page you can see we've got multiple different sort of properties inside here so let's focus on that template first this is probably the most complex of the templates we're going to work on let's come back over to the dashboard to keep things nice and simple we're going to do is we're going to add a new template we'll choose our type and set that to be blocked and click on create we'll give this a title so what we need to do is change our element type from Hook and this time we're going to choose a loop template this now tells it that we're going to create this and use this for working with our Loops in this example the location template I'm going to connect our location options to set our rules up and you can scroll through and you see you've got all the standard options things like the search results and so on and posts but if you scroll further down you'll see there's our custom post our custom taxonomies and so on all listed inside you so we want to come down and we want to choose the accommodation location archive because we're going to set this to be an archive page let's choose that option and say all accommodation locations and for example let's just click on publish now before we make any changes hop back over to our page and refresh and you see now we have nothing on here because the template is working but we haven't actually created that Loop layout yet let's come back in we're going to open up our list view from the left hand side and we're going to go and add in our first element so we're going to add a container in this is using the latest version of generate blocks so we now have the inner container and full flexbox control so we can choose to insert an inner container and now what we have if we open this list up is we've got a container and we've got a container sitting inside it so the first container is full width the container that sits inside is whatever with we've set the editor up to be and now we can put whatever we want inside there so our container selected we'll click on the plus add a container go back to the container above click on the plus one more time and add another container in so we now have two containers sitting inside our inner container so we're going to do is we're going to choose the first container come over to the right hand side to our sizing and set this to be 20 percent choose our second container again go to the right hand side set this to be 80 percent currently nothing actually happens so we need to do is go back to our inner container the second container down in the stack we'll choose that come over to our layout and we're going to set this to be Flex and now we have our container sitting side by side we can also come in and set a column Gap so we're going to set this to be 50 pixels we have a nice gap between the left and the right hand sides and then if you want to you can control things like the alignment of the items and the spacing and so on all kinds of useful things so because we want these to be at the top of each of these we don't need to set anything because it defaults to the first value even if it's not selected so with that being said we've now got our basic element set up the left hand side we'll leave that for now until we go and start to create our facets and filters and then we'll come back and revisit those but let's go and select our second container our main container on the right hand side click on the plus we're going to search for Loop I'm going to choose the query Loop that's in blue which is the native function inside generate block so we'll choose that then it asks us what type of query Loop do you want to create and there's a range of different predefined layouts to choose from we'll choose this one with the thumbnail and you see that now fills everything out for us but what it's doing is this is currently pulling in the posts not necessarily what we want so what we need to do come on to the right hand side underneath the query Loop and we're going to say inherit query from template but you can see at the moment we've got post selected so if you wanted to make sure that you've got the right data inside you to style everything you can change this to accommodation that will then show your accommodation information and then if you choose the option for inherit query from template you can see that now retains the information inside you so what you can do is if we expand the query loop from the left hand side you can see it all sits inside a grid and this grid has one template inside and if we hover over that you can see we've got a blue outline around in this example dreams inside there you've got image post title post date and post exit and again as we hover over they highlight in an outline so what you do with this is you design the first template and then all of the other templates will pick up the exact same design styling so you only need to do it one time and then everything else inside your Loop will pick up that exact same style so we need to do now is customize The Styling to get the look and feel that we want so we need to do is select any of these items and start customizing things so we've grabbed the post template for example come over to the options on the right hand side you can see we've got our spacing options which we can go ahead remove those options from there so now we've removed the padding and everything else we can start to customize other aspects in the community of colors for example we're going to change our background and clear that I don't want the background on it at all so you kind of blank those out to get back to a blank starting point so we can do now is we can come into each of these different elements so choose our image for example come over to our spacing we can set our border radius we'll link those together we'll set that to be eight we get the nice rounded edges you can come underneath them you can start to customize any of these other text options now I'm not going to worry too much about styling those at this point in time we can worry about that a little later what we're going to do is going to come into the post date and we're going to remove that we'll select the option where it says post excerpt is not supported well it actually is so if we go ahead and update this take a look at our front end now and refresh you can see this actually pulls in the relevant data so we've got our image we've got our title and we've got our read more information underneath just come back in here choose our post excerpt come over to the right hand side and open up Dynamic data you can see everything is filled out and all we need to do is change the excerpt length and we'll set this for example to 25. this could be 25 words again if we update this pop back over refresh we now get a more succinct version so now we've got instead of creating our cards we've got our basic data in there we want to go ahead and add in our own custom information from our ACF meta Fields now to do that all we need to do is select any of these fields that we want we're going to click the three dots and we're going to say insert after this then pulls in the type to choose a block so we're going to just put the forward slash and we're going to choose the option for a headline which again is one of those native functions that we have as part of generate blocks we change this from H2 we're going to set this to be a div in this example come over to the right hand side and we're going to choose the option and the dynamic data to enable Dynamic data your current data source is set to current post by default which in this example is perfectly fine we'll leave that as current post then you've got select content source and you open that up and you look inside there and you can't see your ACF better Fields don't worry we have access to that we're going to do is we're going to choose the option for post meta because this is no custom meta information and you see that post meta Fields ah we're getting somewhere we can click on there and there's no options so how do we actually go about getting the information in here let me just show you it's very easy let's open up a new tab let's hop over into our ACF into our field groups open up our accommodation details and there's all the actual meta field names that have been created for us so for this example we want to grab the address we've got a nice simple quality of life we come over where it says address and the name we click on it that's now copied that to our clipboard come back over in the post meta field click inside there and all we're going to do is we're going to paste in that address and click on ADD address now obviously you don't know how to copy and paste it if you know what it is you can simply type it in and again do the same thing what we've done now is we've dropped in the actual information for that so we can do is we can come up to the icons I'm going to open up a general icon and we're going to add in a little map pin we're going to come to our icon colors and we'll set that to be our sort of coral color and we'll just click on update now it says meta value inside here so what exactly is going on well don't worry about that we come over to the actual live site and refresh you can see that's replaced by the proper full Dynamic information so it is being pulled in correctly for us it just doesn't do it in the dashboard we just need to bear that in mind it's going to kind of put the placeholders in there for us and next up we want to add the location in this example the country so we can do is we can simply select this we can duplicate it so we can just choose the option on three dots say duplicate and now we can just make some changes so we're going to disable the enable Dynamic data this time so we'll remove that from there now you may be wondering why it's because we kind of have a bit of a mishmash between using the dynamic data on the right hand side and in some instances we have to use the database icon that's part of the kind of the default options so we'll choose Dynamic options from here we can choose the option for a list of terms we can choose the terms and you can see there's our accommodation location and accommodation type we'll choose the combination location we can use the comments separated if it's in multiple locations which it can't really be and before text we can just say location Dynamic link we can say term archive so what this will do is it means that it'll add this make it a link in other words we can click on it we can look at the other ones that are in the same locations just a nice quality of life kind of update we'll put a space after that actually we'll put colon in as well if you want to change the icon you could do that very easily just come back onto your icon options come back in and choose something different so for this example we'll just choose an option for a little check mark and then we're going to add one more in underneath so we're going to do the same again we're going to duplicate this disable the options here so we're going to just change that set that to be choose I'm going to come back and use our option for dynamic data to enable our Dynamic data current post is perfectly fine post meta is fine we're going to clear the address come back over to our field groups and we're going to grab the website so we're going to just click on there go back in click paste that in and add it the link Source we're going to set this to be to be post meta and you can see you can choose the meta Fields you want so we can click on this again nothing is showing inside there so we're going to just paste in our website one more time and add that in there and you see it says link type let's use that and for this example we're going to leave it as default but if you were setting this up to be an email link or telephone link you can choose that from there and it will make it into a link with the relevant information the relevant HTML code beforehand to make that link clickable so you can automatically start to phone someone or you can open up your email client so it's pretty cool that's inside you which is default and we're going to say remove block if link is empty so we've got a little bit of kind of conditional logic being applied here so we've put in what we want into it let's choose our image and just make sure this is linked as well so you can see if we select it come over to our Dynamic data link source is set to be select we're going to choose that and we're going to say to go to single post so we've Now set this up to click the image to take us over to the single post we can click the title to take us over the single post we can click on terms to take a look at the different sort of locations and we can click on the better value to jump to the website click on update come back over to our page refresh that and see all our relevant info is inside there if you come to a different location for example we'll try Spain you can see that's now updated if we click on Spain on here that'll again show us Spain obviously we've only got one property showing on here but you can easily come in and sort things out by using that kind of same logic so we can do now is we can customize the look and feel of this just to make sure it looks a little bit nicer so I'm going to do that behind the scenes so you don't have to watch me doing this there we go after a little bit of styling we now end up with something that looks considerably nicer if we hop over you can see this is what we've got there's one final thing I want to do on this particular template I want to have the cost per day over on the right hand side next to the title itself what we're going to do is we need to kind of put this into a little block now there's multiple ways you could do this this is just one of simple ways of working so we're going to do is we're going to go up to our image we're going to choose the option for insert after and what we're going to do is we're going to search on there and we're going to just do a search for grid we'll insert that we'll choose a 50 50 grid and then all we need to do is open that up and expand it we'll grab the post title pop that into the first grid item which is a second and that's we're going to drop in our Dynamic data so now before we'll click on the option insert a headline we're going to set this to be a div we're going to set this to float over to the right hand side and we're going to go ahead and add in some Dynamic data so for this we're going to be using the starting price so we're just going to copy that come back over and inside shoot we're going to come into enable Dynamic data current post select our source type is going to be post meta post meta field we're going to paste that inside there and click on ADD starting price and we're not going to worry about link source that doesn't actually have any relevance and finally we're going to come up to our colors and we're going to set our text color to be this kind of coral color and we're going to change the weight and the size of this so we're going to come to our typography we'll make this a little bit heavier we'll say this would be 500 and we'll set this to be something like 14 pixels doesn't really matter too much actually just go up 115. okay so we'll click on update hop over and take a quick look so as you can see now we have our prices starting but we have a real lack of information going what is this 229 and 179 even mean to anybody well we need to address that we need to put something before and possibly after depending upon what information you have so we come back over into our design you'll see if we click on that entry we can't actually add anything else in so how do we deal with this well we can use a little Nifty CSS trick so what we're going to do is we're going to close all of these down we're going to come down to the advanced option so we're going to do is we're going to give this a class I'm going to call this prices start and that's all we need to do so we're going to click on update and we've now applied a custom CSS class to that specific entry how about if you go back into a customizer inside the customizer we're going to come over to our locations and we're going to open up Italy and there you can see our values going to come into our additional CSS and we're going to Simply paste in this little bit of code which we listed down below so you can use exactly what we've got let me just quickly explain what's actually happening here the first thing we have is the prices start CSS class so this is targeting that CSS class we've just applied to the price per day then we've got a pseudo class in this example after and then we've got content and it's telling us that we want to after this particular class we want to put some content in and this example is the slash day and then we've got prices start before so it's basically the same thing we just says the content goes before and then we've got from and in this example pounds so you can see this gives us now from 229 pounds per day we'll click on publish and we've now added in some custom CSS to give us the ability to put some text before and some text after so we can address that issue come over to our live site and refresh you can see there's our from 229 per day coming to Spain you can see we've got from 299 we're coming to Canada you can see from 279 a day so we've addressed that issue inside you by using a little bit of CSS code trickery so pretty cool to see how you can do that and we have pretty much finished with this accommodation Loop template so we can update make sure everything is saved and everything is in place and that's the first of our templates created with some trickery involved in some CSS so let's move on start working on the next set of templates [Music] thank you so now we need to address the property type so if we come in for example into the luxurious as you can see we basically just ended up with the same template the default template now you may think we could just simply go ahead and duplicate the template or go and add in some additional conditions to basically use it inside your but we can't because we want to have slightly different facets being used on these two different templates but we can speed up our lives let's come back over what we're going to do is we're going to expand things out we're going to just copy this container so we're going to select it and we're going to do a control or command C to copy it that tells us that's going to be copied to the clipboard we're going to come out of here we're going to create a new template we again choose this to be a block click on create and now we're going to do is we're going to set this to be the accommodation type template come over to the element type again we're going to set this to be a loop template we can just easily come in to control or command V that will insert things into here for us retaining everything we've just seen on the previous layout all we need to do now is come down to the location and we're going to choose a different set of location options so scrolling down until we get to the accommodation options and you can see we've got accommodation type archive we'll select that say all accommodation types hit publish come back over and now if we refresh that's Now using our new template and now if we just test things out we'll go over to for example Hotel there's our hotel go over to bed and breakfast you can see this old bed and breakfast so we've now created a second template assign a different set of location conditions to it and we're now pretty much halfway through creating the templates for this particular design [Music] so now that we've finished creating the basic template structure for the archive Pages the next thing you want to do is create the template components for the individual property or accommodation design so the easiest way to deal with this is to go ahead open up one of our accommodation and you can see this is still using that default standard layout that we have from generate press so you go to elements we're going to add a new element we'll set this to be a block and we'll click on create we'll give it a name we'll call this accommodation hero commercial block element change this from Hook and we'll set this to be page hero I'm going to come down to the location and we'll scroll right the way through until we find our accommodation not The Archives this is just the accommodation we'll select that you see it says all accommodation we'll hit publish just to make sure we save those changes so now we can go ahead and start to create the overall design so like we've done before let's click the plus let's go and add in the option for a container we'll choose an inner container as well we'll open up our structure and we've got the basics now for our content if we take a look at one of our examples we've got the accommodation type then we've got the name of the accommodation and then we've got the actual featured image for the accommodation itself so this is what we're going to create inside this hero section so like we've done before we're going to click to add in a new item so we click the plus we'll choose our headline like we've done before we'll set this to be something like H3 click our database icon and we're going to do is we're going to open this up we're going to choose the option for list of terms our taxonomy is going to be accommodation type separate is fine and we're just going to put in accommodation type and we'll set a direct link to either terms archive so this will just put in that kind of placeholder now obviously we want to change the size of this we're going to come into our typography we'll set our weight on this to be something like 400 and we're going to set our size to 1.1 amps that looks pretty good hit update again now I'm going to come underneath I'm going to add another head like this we'll duplicate this one we'll set this to be H1 because this is the primary heading on the page we'll change our sizing and we'll set this to be something like let's try three M's that looks pretty good we'll change this to be extra light as well I like the look of that and we're going to do is we're going to change this so we're going to change this from list of terms and we're going to drop in title remove anything else and we don't want any kind of dynamic link because this doesn't need to link to anything so there's the first two parts of this we're going to change the color of this as well I don't want this to pick up the kind of like highlighting color so we'll set our text so links will set this to be a dark color and we'll have no hover color so we'll just set that to be the same color as well so then we've set up the majority of our header the next thing we need to do is go and insert that featured image below the text we've just inserted so let's do that the first thing we want to do is insert a new container to contain it that sits inside the parent container itself with that selected we're going to click the plus one more time we'll choose the image option and you can see this now allows us to upload an image and so on however what we're going to do is we're going to come up to the dynamic data on the right hand side enable Dynamic data data source of current post is perfectly fine image source is going to be featured image and the link source is going to be left as it is we're also going to make sure the image is selected come onto our border radius underneath the spacing and set that to be 8 on all four sides that's going to give us a nice kind of round Edge the final thing I want to do is make sure I've got the container that's got the image selected come over to our spacing and we're going to set the margins on the left and right to be Auto just to make sure this is actually centered we'll pop over to our test page refresh and see what's going on so we take a look at it now you can see it's okay but there's a little bit of refinements needed we need to put some spacing in and control the size of some various different aspects so I'm not going to bore you by taking you through and explaining exactly what I'm going to do here I'm just going to apply some spacing set some widths and so on and there we go we now have everything laid out the way that I want so the next thing we need to do is go ahead now and deal with the second part of our template which is going to be the content area that's underneath I'm going to add a new template again we're going to choose the option for a block click on create we'll call this accommodation content go the element type click and we're going to choose content template come down to our location and again choose accommodation and apply to all accommodation so now we can do is we can start to flesh things out now what I've done with my example is I've used the option inside generate blocks to give us a nice simple tabbed kind of layout so you can see description on the left hand side with all our content and then we've got the contact information so all this is being pulled dynamically from our database from those custom meta fields and information we've created and we just wrap them up in a nice looking layout it's coming back over into our template what we need to do first of all is go ahead and insert a container and insert a inner container inside it open up our options and you can see this everything laid out so what we're going to do now is inside that inner container we're going to click the Plus to search for tab I'm going to use the tab option inside Jerry blocks for this example we're going to use the button tabs but you could use any of these three different predefined kind of layouts so let's use the button tabs now if we take a look on the left hand side this is one of the things I really like about working with generate blocks is even though we've got these tabs and the same thing goes with the recordian it's still all using the default basic containers and button groups and so on we've always had with generate blocks so it's very very nicely laid out and created and expansion is super easy for this example though we just simply want to work with the two options so we can choose our tab buttons we can select it and we can then just use our Flex options to align that to the left hand side we can simply double click inside here like we would with any of the normal buttons inside Gutenberg and we can just change this we set that to description we'll set the second one then to be contact information so that's the basics of our tab buttons so we need to do now is come down into the tab items container and inside there we've got two containers for the first and second tabs we'll click on the first tab item click where it's got paragraph and what we can do is we can simply go ahead delete that from there so we need to do it is click on the plus and what we're going to do now is we're going to search for dynamic and we've got Dynamic content which is a generate pressed feature we'll select that we can choose the post content and that will put a kind of placeholder in its place and that now is basically whatever we put into the content of our individual accommodation post will be filled out inside there so now what we need to do is come over to the second one the second tab item we can click we can remove what's from there click to remove it simply click on the plus what we're going to do is we're going to insert a headline we'll set this in this example to be a paragraph I'm going to come over to our Dynamic data on the right hand side and enable it current post is perfectly fine our content source is going to be post meta and then we need to put in what better field we want to use so we come back over to our list of meta Fields contact information is what we want we'll click to copy that head back over so you click inside there paste it and click add we don't want any link Source you can leave that as it is so there's the first part of this done let's just check this is all working now so click on publish head back over and refresh and you see there's our tabs there's our description there's our contact information and we can switch back and forth between those easily so let's come back in and we just need to add in a couple more bits of information so this is going to be like we did with the card Loop design this is going to be the same kind of thing let's go ahead and insert a new item underneath we'll click the Plus again we're going to choose headline but this time we're going to choose the option for a div come over to our Dynamic data open that up current post is fine select I'm going to choose post meta and again like we've done before we need to choose the post meta field so we can come back over to our list of meta fields we can copy for example the address come back over click and paste that in add it then if you want to we can set an icon like we did before we'll use the map pin we'll set the color to our kind of coral color now we need to do is go ahead and duplicate that in this example you can see it's not in the right place so I'm going to Simply drag that into the right location so I need to do is just simply go ahead I can duplicate this a couple of times and duplicate it we'll come over to the options we'll clear our icon we'll change our post meta so we're going to do this time it's going to come into telephone we'll copy it come back over clear that from there drop in the telephone add a telephone we are going to set a link Source in this example so we're going to click the link Source we're going to choose the option for post meta like we've just done we're going to Simply drop in the same information which is ADD telephone scroll down link type is going to be telephone and we'll remove this if it's empty so that will proceed that with the relevant HTML code so it knows the browser knows if you click that link it's going to know it's going to be a telephone number and ask you to dial that number so finally we're going to go ahead we're going to add in an icon so we've got the channel we'll find the phone icon and we'll just carry on doing the same thing again so I'm going to add the additional meta fields in now and then we're going to move on there we go so there's the additional field has now been added in so again if we just jump over refresh take a look at the contact information there's all the contact details you can see if we hover over this is going to be a telephone number this is going to be a website link and this is going to be an email link with all the relevant info attached to it so we need to do now is go ahead and apply a little bit of style into this to make it all look nice neat and tidy and again I'm going to do that behind the scenes so you don't have to watch me doing the whole kind of design process side of things there we go there's the final result you can see everything is styled up our content is sitting inside there and we can switch back and forth easily between the two different design layouts so that's the overall kind of template in structure pretty much done if you want to go even further with this you've seen exactly how to set up your conditions how to set up your designs how to then reference them and those kinds of things so you should be pretty good to go now to move on and start creating your own designs and expanding above what I've covered now in the next section we're take a look at how we add the facets or filters into the initial listing sections [Music] we're now ready to start dealing with the facets for our overall design so we're going to be using grid Builder WP for this and the first thing I want to do is hop over into the settings and make sure everything is configured correctly so first of all I'd like to make sure that the delete data on and install is enabled so if we remove something it'll delete everything we're going to leave the display term options and we're going to set everything else as you can see I've got here we're going to set the filter custom content just in case further on down the line you want to filter Things based upon additional custom content over what I'm going to demonstrate in this video that being said go ahead save your changes if you made any and then we're going to head over to all facets now facets is where we create the filters themselves so we're going to do is we're going to click on create a facet we're going to give this a name call it location and we're going to Simply put location down in the facet title as well you can ignore the next two boxes because they'll Auto generate once we've created and saved the facet so head over to behavior inside there we've got five different types of facets your filters your load Source apply and reset depending on which one you choose will give you different options down below so for this example we're going to use filter we're going to use it as the filter based upon the location of the different properties or accommodation properties so we could use something like check boxes we could use a drop down we could use a range of different types of filter types for this we're going to leave it set to check boxes come underneath that we've got filter by we've got three different data sources taxonomies WordPress fields and custom Fields And if you choose any of these you'll see you get different options underneath and then you're going to drop down to pick exactly what you want now for our examples we're going to be using the taxonomies that we created for location and type so this time we're going to choose categories we're going to drop that down and choose accommodation locations we'll select that and we can leave everything else in that section as it is you can adjust the filter logic if you wanted to choose between and or or and if you want to set things up for how you display things whether things are hierarchical and so on you can set that inside you so configure this how you want I'm going to leave this as it is and I'm going to hit save changes once I've done that that's now committed those changes and if we come back to the naming tab you'll see those two empty elements those two empty boxes have now been filled out so what we're going to do is we're going to grab this generated shortcode and copy that from here now we can head back over into our elements so come over into elements open our templates up and for this one we're going to choose the accommodation type template because inside the type this is where we can filter based upon location so we'll choose that from the options you can see this brings everything back up and what we're going to do now is open up our list view expand things out so we can see exactly what we've got on screen and then we're going to choose our left hand container click on the plus and from there we're going to use the shortcode now even though there's a block for facets it doesn't work in the way that you expect because we're not using native built-in grid feature we can't actually tag it onto anything so we're not going to use that we're simply going to go back to that simple shortcode so we'll click the plus we'll do a search for short code we'll click the option and then we're simply going to paste in that shortcut we just copied now at the moment this won't actually work because at the moment you can see it says grid equals zero now it doesn't know what grid that is it references nothing on our page so we need to rectify that so we're going to do is we're going to choose the grid which contains our query loop we're going to come over to Advanced and inside there we're going to put in a custom CSS class and we're going to use that to reference based upon the shortcode let me show you what I mean for example we're going to be using wpgb-content-1 this references or this creates a CSS class for this grid and what we need to do now is come over to our short code and take this one out and replace it with what I've just copied in which is the wpgb content dash one so this now connects the facet to the grid that we've got that's got the loop of the properties and that now is going to set things up and work now if you had multiple different grids on here and you wanted the facet to Target the correct grid you just need to make sure that where you've got their CSS class name you just increment it by one each time so if you had three different grids on you your first one would be wpgb Dash content-1 the second one dash two the third one dash three and then your facet would Target that relevant CSS class hope that makes sense this is a really simple example of how things work if you want to find out a lot more about how this all works there's a great video by Jonathan from over at Perma slug which I'll link in the description below so you can go through that check it out and kind of get and even even deeper understanding of how things work this is a relatively simple setup that we're going to be using in this particular video so let's go ahead and click on the update and now we can hop over and we can test this out so you can see when we're in any of our property types in this example we're in luxurious we've got one in Spain one in Canada and now if we want to we can filter those based upon this simple option which is Canada and you can see that one now pull up the relevant property or relevant accommodation so that's how easy it is to create these kinds of facets so we're going to do now is we're going to come back over and create another one so this time we're going to create all facets again we're going to choose to create the facet and this time we're going to say sort by price and this is then going to sort by the information that we've got set in one of those custom meta Fields so again we'll give it a title we'll hit the option for Behavior this time we're going to come into the sort option and now we can enter a label so we can say order by and we're going to scroll right the way down at the bottom until we get a numeric custom field this is one of those custom fields we created and then our field name we need to just insert at least something so we're going to say price and you can see there's our starting price we'll select that we'll add another option and we'll say this is highest lowest again choose the numeric field again set price inside there all we need to do now is set our Direction so this is going to be ascending and that one's going to be descending it save changes and come back to naming and we can copy our little short code from there so again we can head back into our template and we can now insert this second one so we're going to do the same again this time we'll duplicate our shortcode all we need to do is change our facet number so what we can do is we can change this to four and everything else is perfectly fine so we'll update this come back over and refresh you can see this our lowest the highest highest to lowest and you see that now updates accordingly so you can see there's our lowest price one if you do any other way or highest price one and if we want to we can then filter that on a second kind of filter so you can see how we can start to stack these filters on top of each other to create quite comprehensive sets of filtering for our different kinds of layouts so we've got one third and final one I want to show you because if we hop over to locations for example we'll go to uh we'll go to Italy which we know we have two different locations in we can go ahead now we want to set up the same kind of facet or filter for the pricing but we want to set this up because there's no point actually saying we want this to go on location because these are just in Italy so this time we want to change this to property types so come back into our facets like we've done before we'll create a new facet we'll give this a name we'll call it property type again we'll name the facet we'll come over to our Behavior filter is fine checkbox is fine and we're going to do taxonomy again is fine this time we're going to choose accommodation types and again we can leave everything else as it is because this is basically pretty much exactly the same as the first method I've shown you so we'll hit save changes come back over to our naming you can see there's our facet so we can just copy that from there we'll come back into our templates hop out of this one and go back into our new template which is going to be our location and we'll do the same again open things up expand things out choose our grid coming to Advanced and inside they will give it that same name so WP GB Dash content dash one click to add in our short code we'll paste a short code inside there and we'll just change that to WP GB Dash content dash one we'll also duplicate this we'll change this to four which is going to be our sorting and we'll just click on update we'll hop over now refresh our page you can see then we've got property type bed and breakfast or hotel and again we can do the lowest the highest or highest to lowest whichever way we want to do it you see that updates and then we can save better breakfast so you can see everything is being filtered Down based upon those different facets that we've just set up and like I said this is just a really simple example but repeating the same process and expanding the way in which you set things up the additional information how you want to filter things you can create a really comprehensive site using the simple techniques that I've covered in this entire video [Music] there's a couple things I want to cover off before we wrap things up now if you remember about what we set up our ACF fields we also created one for the hero section when it comes to the different types of accommodation so how do we go and create that and insert that in let's take a look so we're going to do is we're going to create a new element so again add new we're going to choose the option for a block and click on create we're going to call this property type hero you'll come to our element type and choose the option for page hero like we did previously and then we're going to come down to the location for this we're going to open things up and scroll down until we find the property type archive choose that option choose all accommodation types and click on publish so now we can do is we can go and insert our layouts we're going to go ahead again like we've done before insert a container insert an inner container open up our list view all we can do is we can go ahead and just configure how we want this to look so let's select our first container we'll select that we'll come over onto the options for sizing and we're going to set the height of this we're going to use the option vote viewport height and we're going to set this to be 40 or 40 of our viewport height we'll send a background color even though we're not actually going to be using that just so we can see what's going on and then we're going to come back up right to the top we're going to set this display to be Flex we're going to set this to be Center aligned or the horizontal and the vertical and then inside that container we're going to come in and we're going to click the plus we're going to choose the option for a headline we'll set this to be H1 and what we're going to do is we're going to click on the database icon we're going to click and choose the option for title that's it we're not gonna do anything else we're going to leave it as it is there so we can do this we can come over to our typography we can set our size on here we'll set this to be something like 5 M's and we'll set the weight to about 600 there we go that's pretty good let's cut another text and set that to be white so there we go you can now see exactly what we're doing okay so there's our basic kind of section set up now we need to go ahead and set the background image because currently there is no background image we make sure we select the parent container and we're going to come over to our little database icon click you can see Dynamic background image and we can't actually set anything at this point it's a little kind of weird Quirk so we've got a little workaround so we need to do is come over to our backgrounds choose an image doesn't really matter what image we use we'll select that image from there and now what we can do is we can come back to that database icon you can see now we can select it this time we're going to choose the option for term meta because we're working with taxonomies we'll choose the term meta we'll drop in the field name so if we don't know what that is come back over open up our when you type additional details copy the link from there or copy the name I should say and then we can simply paste that inside and if you want to use a fallback image you can do we don't want any Dynamic link that's perfectly fine so we'll click update now we can go over to our test page and chest is out and there we go you can see there's our luxurious and we've got our background image set inside there if we call it something like hotel where there isn't one set if we come back over into our site come over into our accommodation types and this time we'll choose Hotel we can set our header image let's use this one hit select and update come back over and refresh and you see they you know how that hero image at the top of our design so that's basically how we can set everything up we've kind of covered most of the basics and ticked all of those off there's so much further you could take this if you want to but the key skills that I've demonstrated in this tutorial should set you on a good road or good path moving forward to be able to expand upon this kind of content and create really truly unique designs for yourself as always all the links to everything I've talked about are in the description below if you've got any comments questions or feedback please do leave those in the comment section and as always my name is Paul C this is wp10 until next time ticket [Music]

Channel: WPTuts

Views: 23,346

Keywords: WPTuts, GeneratePress Theme Customization, GeneratePress, GenerateBlocks, ACF, Advanced Custom Fields Tutorial, grid builder wp, listing website wordpress, advanced custom fields, acf, generatepress, generateblocks, generatepress theme customization, generatepress tutorial, generatepress theme, generatepress tutorials, generatepress pro, generateblocks & generatepress, generateblocks dynamic content, generateblocks pro, generateblocks tutorial, generateblocks dynamic data

Id: 84Y32ZtF6UE

Length: 72min 36sec (4356 seconds)

Published: Wed Apr 19 2023