GeneratePress Theme Customization | Post Loop Update (Beta)

anybody that knows me knows that I've become a bit of a fan of generic press and generate blocks and there's a new beta available for Generate press the premium version and the free version that has one key new feature that I'm excited about the way ability to customize the whole Loop layout now I know we could do this previously but it was kind of convoluted and you had to separate your card design from your Loop design it was just a bit of a pain in the butt this new version when it's released is going to change all that and become a much more logical way of working so let me show you first of all what we're going to look at creating and then we're going to go through step by step how the changes make the whole process so simple so this is our demo site I've knocked this up really quickly just to see how it all works and if we come down underneath you can see we have these individual cards if we hover over we get this nice 3D hover effect we've also got the view recipe option we've got some normal inflation images links to the actual post itself some custom information being pulled in from ACF so you could use this for all manner of things this is a really simple example but if you want to get super comprehensive with tons of information you could do it really easily so let me show you how this all works as always when you want to create these kinds of designs we're going to come into one of the features that you need to make sure is enabled and if you haven't got enabled you just need to come into appearance and generate press and inside there make sure you have the elements and the disabled elements options selected with that being done you can see under appearance we have the elements section let's go in there and this is where we can add in all manner of different really cool things so we can hook into the whole layout and do things like custom headers on the home page custom blog Loops all my other different things and that's what we're going to do I've already created a custom Loop but we're going to ignore that I've wiped out any kind of locations we're going to recreate it so let's go click add new element for this we need to choose from the element type and set this to be a block once we choose that and click on create all we need to do then is tell it that we want this to be using that new Loop feature to do that come over to the block element on the right hand side currently it says element type hook select that and we're going to come down and choose Loop template you see nothing really changes on there and the next thing we need to do is set the location or locations we want this to apply to let's do that exactly that we're going to say we want this to be on the front page of the site and we're going to add a second location rule that we're going to say we want this to be all archives but you can set up whatever rules you want you can get really specific okay so now let's go ahead and start building things out first of all let's come up to the plus and let's go and add in a simple container set us to full width contained width and the inner container in my example is going to be 1400 pixels wide but set it so whatever you want once we've done that we're going to go ahead and insert the query Loop now this is an integrated tool inside generate blocks but you don't need to use that you can if you want to use the native query option inside WordPress itself so if you do a search for query you'll see we've got the query Loop which is the native WordPress option and we've got the query Loop which is the custom generate blocks version now generate blocks has this in the free and the premium or pro version the premium or pro version adds in some extra functions but if you just want to create something for example like laying out your normal posts and so on free version is going to do everything you want and probably lots more for this example though we're going to use the query Loop option which is the generate blocks version we'll choose the two column featured image version now when we use the query Loop Builder and the new query Loop option inside generate press premium we don't have the option inside the normal settings of the customizer to make changes so we do everything inside the actual element itself so you can see over on the right hand side the key thing we need to change now to get this to work the way that we want is to enable this to be working with the inherit query loop from template once we select that there are no other options available so now what we've done is we've said whatever query is going to be passed inside WordPress if we've set up this to actually work within that particular section of our site default to the way we're going to set things up inside generate press premium don't be using standard WordPress features or anything else we have no full control over that aspect so now we've done that we can go ahead and start building things let's expand our list view right and inside there you can see we've got a grid which is locked inside the grid we've got a post template which is also locked and inside the post template we have four different blocks or elements we've got the image post title date and excerpt and if we scroll down you can see they don't look right because the styling is being picked up from various different parts of my design but we can override that anyway so these are the standard things it thinks you're probably going to want to use inside a typical query look and they're perfectly fine so let's go ahead and customize a few aspects of this for ourselves first of all let's come over and select the actual grid and the post template and this is now going to select the first template and design and any changes you make on there reflect through every single card that's going to be used inside this Loop so for example if we come in and we come down to the colors and we set our background color and we'll use this darker color you can see now all of them pick that up simple as that nothing complex or comprehensive about it so we can come back out of there so we can come into things like spacing and we can remove any spacing that we've got so let's just link those together delete all those just we get it flush to the edge pretty cool now we can come in and do things like border radius so we've got our post template let's go and set this to be linked to each other set 16 pixels inside there that now rounds off the top and bottom corners and to make everything work the way you want let's come into our image come into our spacing inside there set our border radius to 16 for the top left and the top right and that now gives us this nice rounded corners so we're already on our way to creating something a little bit more unique now we can come down into any of the elements inside here so for example the post title that's picking up the styling we've got as part of the theme setup but you can override this if you want to Simply come over to the typography settings on the right hand side make whatever changes you want I'll leave those as they are all we're going to do though is going to add a little bit of spacing around this so we're going to come to spacing and we're going to say that we want to add in a little bit of margin to the right and the left so we'll say 30 and 30. there we go that tidy things that nicely there and we do the same thing underneath so post date we're gonna come into that set 30 margin on the right and left so everything lines up if you want to adjust the bottom spacing we could do that we'll do the same thing now for our post excerpt and again we'll do the same thing so we're coming to a margins 30 and we'll say 30 on the left and right and there we go and now we're going to come into a typography and inside there we're just going to set the font that I want to use in this in case we're going to use open Sans you go that now picks everything up we're going to add in a little bit of spacing underneath there as well so we'll say we want to put a little bit of spacing and we'll see at the bottom of that let's go for 20 for now we could adjust and tweak as we need to so we published this and confirm we want to publish it now we head over to our actual front page we'll refresh this and see that now picks up the design that we've just created so it's similar but there's obviously some differences inside here okay so next let's go back into this now the images as you can see are not necessarily all the same size and we also want to put this into three columns so we may want to adjust the spacing in between so how do we do that well for that we're going to select the grid and this is where we can control the grid layout independent of the actual cars this is going to control the layout of that and whatever sits inside sits inside so we can say we want to put more horizontal or vertical gaps let's say 40 and 40 on there if you come back into our post template now you can see we've got our container width currently this is set to 50 but we can override that we can put a custom value in or we can use one of the pre-defined let's choose 33 and you see that now gives us our three columns so we're all ready create this anymore customized okay so let's go ahead add a button in now that we're going to use to actually click and go and take a look at the item or the article itself and we're also going to make sure the image is a clickable element these are the kinds of things from a UI and ux point of view people are kind of used to so if you select the image all we need to do is come down to our Dynamic data scroll down you can see everything is pre-filled for us current post featured image but no link source so we need to do is Select link source and say we want this to go to single post boom done job done so it is if you want to you can also do things like remove block if the link is empty yeah some kind of cool things you can do there if you want to let's go ahead though and add a button in so let's come over to our first card let's click the Plus at the bottom let's do a search for button we'll choose the generate blocks option and from there now we have our button set up so let's go and select our button container you can see we do things like fill horizontal space if we want to as you can see that now fills at the bottom of our overall card and again we can do things like adjust the spacing and so on and there so for this example let's come into the button itself we'll select that we're going to change our background color we'll come in and we'll set something like this lighter gray I'll just go for something like let's try this and let's make it a little bit lighter let's just adjust that color on there there we go same thing along the lines of that like that okay when we hover over you see we get the hover effect so we're going to change the background on this we're going to set that to our accent color we'll set our typography and everything our Point here as well so we'll say we want the text to be black there we go we also want to make sure that we've got our border set up correctly so again let's come into our options for spacing and I'm going to come to a border radius this time I'm going to go to the bottom left and bottom right set those to be 16 pixels each that matches up around the corners off and the final thing we want to do with our button selected is simply come into our typography and set the thought that we want inside here so we're gonna go for Barlow in this example which is what I'm using for my headings and we'll come for something like 500 and we'll say let's change the value on here we'll set this to be M's and we'll say so like 1.2 M's there we go so you've now got a button we'll double click inside there and we'll say and as you can see we can edit any of these and it'll update across all of our cards so it's very very flexible so final thing we need to do with that button selected is simply come down to our Dynamic data enable that and come down to our link source and set that to be single Post in exactly the same as it did with the image okay so we're looking pretty close let's again update this to save our changes hop over to our front page refresh as you can see we're on the road to getting something a little bit more kin to what you just saw right next thing we need to do we need to sort out the fact these images are not all the same size so let's deal with that next to do that let's select our image come over change the size in this example large will be perfectly fine we're going to set the height to be 600 pixels and the object fit we're just going to set to none and you see that now just sets the height and the image will just sit inside it and it matches them all up perfectly across the board so now all our images are the same height taking up the same space inside each of our cards okay so there's the basics all covered off let's go ahead and add our our drop shadow inside here and then we're going to deal with the actual Dynamic data pulled in from ACF next let's select our card post template I'm going to come down and this is a feature that's only available in generate blocks premium or Pro so if you have the free version you won't be able to do this if you come into effect we can come into block Shadow enable that select a little wrench icon we're going to come into our colors we're going to set this to be our black color maybe a little darker and we're going to do is set this to normal set of vertical offset to be 10 and I will blow it to be 20. this gives us quite a nice effect you can see that now shows us a kind of drop shadow which is a little bit heavy-handed so let's come into our colors and let's drop that right the way down just so we get a slight sense of height to the overall design and I'm going to say add an effect you can see now we've got two duplicate effects pretty much so we're going to set the second one to hover we're going to set all the values to be pretty much the exact same coming to our color and we're going to set that dark color and we're going to drop the opacity not as much as we did with the normal state so now when we hover over we get a sense of raising off the screen finally let's add a transition in and we are pretty much done that's automatically added a transition we can click to open it up adjust that if we want to but let's just close it update head back over and refresh so now we have a slight 3d effect and we hover over it looks like these Rays off the page ever so slightly we could probably come back in and actually edit that a little bit more so let's come back into a box Shadow and we're going to come into our hover effect select that and go with just a little bit darker there we go close that out and update there we go so now we get in just a subtle effect but enough to kind of give some user feedback we've got the hover effects on our buttons and everything else all in place okay so now let's just head back in so what I've done is I've created two simple Advanced custom Fields Fields one for Preparation time and one for the number of people that it feeds so I'm going to show you how you can insert one of those into your design now let's shrink up our buttons let's go ahead and click the plus to add something in and for this example we're going to go ahead and add in a headline we're going to set this to be a div reposition it where we want we're going to set this under our post excerpt and we're just going to quickly add a little bit of spacing and styling to that so typography like we've seen before we're going to come in for this example we're going to use open Sans it matches our body text and we'll leave the sizing and everything else that's all perfectly fine for this example and we're going to come into our set spacing and we know that we want 30 on the left and right and we're going to add 30 at the bottom to separator from that button as well okay so now we need to drop in some actual content to do that we're going to come over to our Dynamic data and enable it covered post is perfectly fine select our source we're going to say post meta and now you may be thinking well there's nothing available inside you and this kind of threw me off at the beginning as well so cheers to count on doosan for actually giving me the heads up on how the hell this worked because really was scratching my head for a while all we need to do is drop in the actual meta field name so let me show you where you can find that if you're new to working with ACF or tools like that so looking at my field Group for advanced custom fields and this is the free version if we open this up you'll see inside there any of the ACF fields that we create will have this name so preparation underscore time serving underscore size and so on we just simply need to copy that so we're going to select it we'll copy it and we'll head back over into our design so all we need to do now is come down into that post meta field on the right hand side I'm going to click inside there and we're going to do control or command V and that'll say do you want to add preparation time into the post meta field and we're going to say exactly that's what we want to do now all that happens is this kind of just drops in the title or the text or the field it doesn't really give you the data to do that we have to be on the front end of the site what we are going to do though is going to add an icon it's going to say General I'm going to drop in this little time one and we're going to come back up to our options for our colors and in there we're going to come into our icon and we're going to set this to match in so we're going to set that to our little gold kind of color so now if we update this and head back over and refresh you can see there's our custom meta field so we've now dropped in the time now people might not understand is this hours minutes days what the heck does this even mean so let's go and rectify that next we'll come back in we're going to make sure that this is selected and we're going to come over and we're going to set this to be inline width which is underneath the spacing option this sets this to be an inline item which means we can have multiple different items all taking up the same line space let me demonstrate what I mean we need to go ahead now we're going to duplicate this so we'll just say duplicate by right clicking and we're going to just select it we're going to disable any of the options inside here for things like Dynamic data and icons and so on so let's go ahead and do just that let's come over and we're going to clear everything from here disable Dynamic data and you can see now that just gives us this headline so we're going to type in mins we want this to be minutes so you can see now we have these two items sharing the same line because they're both set as inline items again I hope that makes sense if we come back into our spacing you see this is using inline width and so is our post meta both using inline width so now they sit on the same space same line let's go ahead and select our first one and get rid of that spacing on the right hand side let's set that up to something like three and actually let's just remove that completely is it and I come to our headline and we're going to do the same thing now on our left hand side we'll just delete that from there we'll adjust if we need to we'll update this and you can see now we've got our minutes so we come back over but we have a little problem you can see the minute sits just a little bit below and that's because we've got this icon and the icon kind of messes with the spacing that we have so there's an easy way of dealing with that code will be down below for you to see this what we're going to do we're going to select our headline which is the mins in this example close all these up we're going to come into the advanced section and we're going to give this a class so we're going to call this archive underscore mins we're going to copy that from there we're going to save and update our page and we're going to head back out of here into the customizer inside the customizer we're going to come into additional CSS and inside there we're going to put in just a little single line of code so I'm going to just paste this in and what this is basically doing is saying that the archive underscore means which is the custom style we just applied to that specific little element vertical align it to the top and that adjusts the spacing to make sure that everything sits on the same line so Quirk is kind of frustrating but it's one of those little things that we have to work around we hit publish on there head back over refresh and you see now that just pushes things up and everything is now sitting on the same line so now we have a totally customized way of working creating our Loops without having to mess about with different templates all over the place everything is done in a much more logical fashion being able to Simply and easily tie in advanced custom Fields into normal meta information inside Custom Designs is super useful and the fact we can use this on multiple different parts of our site and having different designs wherever we want to just by using those conditions inside our template really really powerful but that's what I wanted to demonstrate today this isn't out at the time of recording this but hopefully it won't be too long and if you have a premium version of generate press you can download and install this beta version for yourself so you can follow along with exactly what I've shown you but please only do that on a test or demo site not on a live production site as always all applicable links in the description below my name is Paul C this is WP tats until next time take care [Music]

Channel: WPTuts

Views: 12,965

Keywords: WPTuts, GeneratePress Theme Customization, generatepress, GenerateBlocks, GeneratePress tutorial, generate blocks tutorial, generateblocks blog, WordPress post loop, custom wordpress post loop, generatepress tutorial, generatepress wordpress tutorial, generatepress demo, generatepress theme customization, generateblocks, generatepress tutorials, generatepress theme, generatepress theme wordpress, generatepress theme tutorial, wordpress no coding

Id: nBus9Z4UmI0

Length: 19min 36sec (1176 seconds)

Published: Tue Oct 18 2022