Kadence Blocks + Toolset Dynamic Content

hey what's going on guys this is john at matchless web and this is a video rundown of a client site that uh recently recently launched the mvp the minimum viable product of this site so i've got the base functionality needed for this project more content coming later but i just wanted to put out a video showing just what can be pulled off using the dynamic content capabilities of tool set plugged in with the cadence theme um i don't see enough content out there about this so hopefully i can just throw my hat into the ring and show people uh what can be done so on this client website essentially i'm going to run down how i created a custom post type with tool set how i created a filterable grid this is done with essential grid by the way how using essential grid you get some filtering capabilities for those custom post types and then how the individual display of the post types is configured using a template and dynamic data so that all of the different projects that are added for this client are displayed funky css happening here i think i do still need to exclude either some css or javascript from my wp rocket deferral settings but that's neither here nor there so let's just get into how this is pulled off so if you're not familiar with tool set um it is um there are a number of products within tool set but the ones that i'm using on this site are tool set types which is their custom post type um creating plugin as well as tool set blocks which is their gutenberg friendly block editor that allows you to use dynamic data works well with the cadence theme and i'm going to show you how those all work together but when you when you first look at the tool set dashboard for what i've created my custom post type here called portfolio is just the grouping of all this clients um it's a landscape architect and so this is just the custom post type the layout and all for his projects so what makes up a custom post type um has a lot to do with the fields the custom fields that are assigned to it as well as the taxonomies or the the things that can be used to filter or identify these projects in the grid that i use for essential grid the filtering was done by both the tags and categories that custom taxonomy for that and then the single layout for all of those projects is made through a template and the archive setup i'm not actually using tool set blocks to make the archive i'm using a central grid but i'll show you what all that looks like so just to make sure i keep all my ducks in a row yeah let's look at cadence settings first so the cadence theme i am using the pro version and i'm on version 1.0.23 for those that are interested and the only pro setting i've got turned on um is the archive custom page title backgrounds that is what allows you to on the archive page for this custom post type it's what allows you to use the native theme customizer settings like using your customizer to drop in a background image here and style this out the way that you want to on the free version of cadence you can't do that but that's just one of the wonderful add-ons that comes with pro letting you put in that kind of background and the let's see while i'm at it the only take this off as i'm going through the only thing that i also wanted to mention regarding the cadence configuration is that so on on my filterable grid here the custom taxonomy used for filtering if you click on any of these links it links out to the taxonomy page for that particular tag or category and this grid is not really all that customizable within cadence yet you can customize custom post type grids just out of the box which is phenomenal there are not many themes that do that and cadence does it really well but right now the editing capabilities don't really extend into the taxonomy pages beyond letting you change maybe the text on the read more button but given that taxonomy pages may not be all that much visited i chose to mostly leave those alone so just style-wise just know that the cadence theme at least as of this version doesn't let you edit the the layout of the taxonomy pages so um yes tool set and cadence custom post type let's go into the custom post type itself so um and if you're not familiar with what custom post types are within wordpress posts and pages are technically both a post type so even a page is technically a post it's just that posts are generally something that have an archive something that's got some organization feature where you can you know maybe have a list of or a grid of you know certain kinds of listings whether it's you know real estate listings or blog posts anything where you think hey there's a grid or there's a series of posts those usually have an archive pages are usually standalone items where there's not generally going to be an archive it is doable but it's just rare that you need that most things rely on posts so really this is a custom layout custom post type is really just a custom layout much like you would think of creating like a custom layout for your blog post so like whether you're talking about a custom design for your blog grid or your individual blog posts you might use custom post types to do that so the first thing you have to do with the custom post type is register it and toolset is the plugin that i've used for that you could also use something like custom post type ui cpt ui is a great plugin for that other free things out there too but this is a paid product just so you know um so you give it you give your post type a name the singular name in this case i just i wanted to use portfolio there but it is recommended that you don't use um both the you that you don't use the singular you know and plural version using the same thing i wouldn't say like portfolios that wouldn't be the plural thing i could have called this projects so i would have you know projects and then project would be the singular it's just for naming purposes and keeping some things separate as well as the url slug and the url slug there is just what you see whenever you are looking at let's see let's back out uh whenever you're in a um in an archive of some posts uh portfolio is gonna be in the slug of the url for any of the you know so you get you know slash portfolio slash um you know the name of the specific project so that's what those settings are you can give it your own little icon which i've got over here in the left-hand side and i've told it to go under this specific menu item uh the wpmu dev one you can put it anywhere down this list i just kept it up high so i could find it and you can also assign any custom taxonomies you've created which i have instead of using the native wordpress taxonomies categories and tags i created custom ones there just so that when filtering things in the grid i'm not i'm keeping things separate so that if this client uses blog posts down the road and wants and we need to you know categorize things there's a set of taxonomies specific to the use case in question um the some of these other things we're just going to skip over um settings to display when editing that's just what you're going to see in the admin menu when you're actually editing this uh a post that is in this custom post type so for example if i'm in the back end of this is what the custom fields look like once they're in the back end of a post but basically all those different options that you have to select from you know do you want a featured image to be associated with this post type do you want to be able to set an excerpt do you want the native wordpress custom fields to be in there if you untick any of these boxes they won't show up so i've only got the ones ticked that i need and then options main thing in here is making sure that you allow your custom post types you have an archive and i don't have anything listed in here but the default value is essentially going to be your your slug that you put in is there anything else with this that's really it um the post type itself so what do i need now i need yes we've talked about our custom post type let's talk about the fields all right so again custom fields is the next thing so if we go back to the toolset dashboard i'm just going through each of these just so you see how it's all put together the specific fields the custom fields so you can either select those here or custom fields in the sidebar it takes you to the same thing so this is uh where our templating power for dynamic data comes in so uh this group of fields is you call it whatever you want but i've just got to call field group for projects or you know four portfolio might be the more accurate name all right and these are all collapsed but all of these items are actually what you see if you're looking in the back end of a project so i've got a blank project or portfolio item here where uh you see field group for projects so that's my heading that's my the name for the whole group of them and then you have your project title description before and after images and that is all those are all the things you see here so these fields are then assigned to that custom post type so that when you open up any fresh custom post type you can have all of these fields accessible and then then everything gets supplied to a template so that on the front end all of your you know certain items that are in that category are all displayed the same so all the all the projects will have the same layout so it's just like creating your own custom layout for a blog so that all of your single blog posts inherit the same styling and i've got some conditional logic um going on in my layout too but let's i just want to show you first on a blank project this is what the template looks like uh so before any of the dynamic data has been filled in that's what it looks like and let's see again i'll just grab this link when content is filled in you get this which in this example this is a case where before and after images were provided so you've got a column of text and you've got a column of images i've got a conditional logic setting in here so that whenever there are not before and after pictures you just have a a wider width text section and then you scroll down and then there's also a piece of conditional logic in there for if there is a testimonial provided you'll get an extra section added in here between here and the gallery so fun conditional logic there so again for templating purposes keeps everything uniform even when some posts don't contain all of the fields that others contain and it's like a set it and forget it kind of thing once your template is in place then your dynamic content is always going to fill in the way that you need it and if you ever needed to in bulk add across many different posts you all of a sudden need to add one specific thing to all of your posts well you can insert it into your template and then it's immediately put everywhere very much like a hook would work if you're familiar with wordpress hooks so let us now and i keep pulling up this is a little plugin called docket wp it's phenomenal for just a little dashboard um we're talking about our template now so allow me to oh actually if i just expand some of these so you do have to for your custom fields you give them all a name and a description you select the type of field that it is going to be and so this is the description for the user interface so this text right here hey this text will be displayed in big bold text at the top of the page that is what you know if the client is entering in their own content and close that if the client's entering in their own content they're going to see those prompts see so that's like your descriptor of what the field is so the client knows hey when i type this in that's going to be the big text at the top of the page so if you're doing this for clients really handy that you can you know drop in your own little labels and messages to make it as clear as possible what kind of data needs to be put in here if you have a character limit you can assign a character limit like hey i don't want the i don't want the client to enter in you know thousand words in some little section that really only needs a max of you know 50. um you can set those kind of caps and if you have images that you want the client to be able to upload for instance in this example said hey let's let just a single image get put in you can probably hear my dog's toenails tippy tapping on the floor in the background there but whenever you select an image you can have some restrictions on file size or dimensions say say it's the big hero image at the top of the page you could say hey let's let that not be any bigger than whatever your number is 1500 pixels whatever um that way the field won't accept an image that is too large there so again it's a way you can maybe help clients not uh drop in an image that is unnecessarily large that could slow down their page it's just one way to kind of maybe put some guardrails up to save them from maybe just put an image in that's too large and on and on uh some of the conditional logic uh let me mention that these uh so there are radio buttons in the back end of the post for the conditional logic stuff so if i go to the back end here uh you see here show before or after photos um if i say no then there's not going to be an option to show before and after photos the the default in this case is no but if there are before and after photos select yes and all of a sudden you reveal the fields that allow you to drop in a before and after image so conditional logic there and they're they're in the template or conditions for you know displaying those or not um for example let me just show you one item i know some of the commercial projects for portfolio items for this client did not have before after images so for instance um this one there was just a lengthy description provided so the lengthier description goes in this full width text section so there are no before and after images and the way those field groups work is that if they select yes there's a value assigned in this case one and if the value is selected no then there's a number two so basically once you get into your conditional logic settings a value of one or two for that toggle is recognized to mean yes show that dynamic content or show you know that layout with the images or do not show the layout with those images so that's how the you know same thing works for the testimonials in this case yes show a testimonial or no don't show a testimonial okay so those are the fields and i'm going to close that out now and making sure okay we now go to our template i'm trying to stay on track here thank you docket great little product loving it so our content template so tool set settings i can go to content templates the only template that i have laid out is for the portfolio single items and this will start making a little more sense of oh a critical error oh no what has happened this is a staging copy of the live site so there could be something funky happening here let me dog is sneezing bless you bless you again i'm gonna reload this see if it'll work for me the hamster wheel's running he's going i think it's going to work there we go okay so this is what the template looks like and you can see that even though i'm in the template view there's already data filled in so the this this listing is showing one of the custom post types already filling in the data just so you get an idea of hey what does this template look like with some at least some placeholder values or use the actual data from all right let's do this one for example fusion apartments so if i select fusion apartments my little loady wheel is turning and it's going to dynamically pull in you know the title for that project the featured image the taxonomies and interestingly what you'll see is all right so if we look at that listing this will show you some some of the dynamic uh uh some of the conditional logic functionality so if we select that project from the grid on the front end this is one that did not have before and after images so um on the front end you just get displayed this big block and the way the content template is set up when you first look down here you see this is a conditional block and in the conditional block you see lightweight there are images here that look like they're not having anything to do with this post and you're right those are just placeholders because this is a conditional block that gets displayed if there are if there are before and after images to show so if i go to my conditions remember i mentioned the number one and the number two referencing a yes or no so if the field group show before after photos is marked uh yes then they get that layout block number one okay so this would be block that conditional block number one if it is marked no so a number two is assigned to that radio button they get this layout where there's only the um the image block so that is why in this template the output on the front end is just the block so you don't see those unrelated images displayed um that's just part of the templating all right now scrolling on down again this is placeholder stuff this is what the template for the testimonial looks like so if there were a testimonial on a project then this is kind of the background image and the little quotation marks that are shown but then the person's name as well as their testimonial content goes here and then any images selected for the gallery are dropped in there but just to look at how the dynamic fields are actually set up in here so it's like what is making these dynamic fields display so if you select i mean you don't have to like select all the text but if i'm clicked into this specific this is the cadence advanced heading block you can either click the little dynamic content little lightning bolt thing there to select sources at least i built this a while back and so there have been a few releases since then but initially when i was trying to use the the inline tool there to select the dynamic contents it wasn't always lining up but if you come over to dynamic sources and then turn on dynamic content that allows you to you see i've actually got all these drop downs selected whereas if i click it here it doesn't have any selections made yet so i have the most success it seems doing this but you select your post source which is in this instance the portfolio for the client the field group is and this is where you can select from any of your custom fields that are assigned to do that project so in the back end of the project whatever is selected for some of these different things goes here if instead of project title i said put the description right there okay well there's a lot of text that's obviously not what should be going there but based on the templated design title goes there boom it fits uh you'll notice the background image here changes okay so the header image is a dynamic source too so if i have that block select selected that's the advanced heading uh sorry the advanced it's not advanced it's just the roadblock it is advanced in its functionality it does cool things go cadence uh but if you say the current portfolio item and then the source featured image that's just the default wordpress featured image that you would set you know in the back end of this is like the back end of the demo post so if i said you know hey give me a featured image here and i'm just going to grab something random to display how this is going to come out on the front end if it will load okay so if i grab that image and just say hey that's my featured image that's gonna load in and then notice so i'm in i'm not in the template here so i'm in the back of a post type so i added the image here it doesn't automatically pull it up you know in that area because i'm not in the template editor within tool set i'm just in the back end of a post but if i say update and right now you know this area is blank because i haven't resaved that yet but now when the post is updated we'll see our the title is actually not going to be there so this is a good thing to point out so with with my specific um let's just refresh with the specific way i've got the template put out the page title doesn't necessarily have to be what is displayed here because your page title sometimes you want uh what's actually displayed to be something else right so this just lets you maybe have a different title of the project this could be you know fancy houses that way what's displayed at the top doesn't have to be your page title so if i change that refresh the text for that specific custom field is going to be pulled in rather than using the page title um and that's pretty nifty and then if you just go down the list and fill in these things we will start to see everything populated so if this is making sense if i um come into my text description which is needing i don't know why it's not letting me type let me refresh this really quickly now it's not letting me get my inputs here but if i get my my cursor clicked into that area um i can drop in some dummy text i'm going to minimize these little guys there we go so just use my little text expander say oh that's my description that i want displayed um let's say i do want before and after photos which i can select from my media library and this is just going to be a single image for a before single image for an after and the way the template is set up is that these are just um contained to certain dimensions um i want to say these are just the standard um is it the standard image block it might be the tool set image block we'll look back on the template um looking in the template what kind of block are they yeah so this is the tool set uh image block which allows it to have that dynamic image source so this is pulling in that uh source for the before image and that kind of thing so um hopefully this is making sense how things are all coming together here um and for my gallery you know if i want multiple images from my gallery let's just say i come to that specific project um or i won't you know let's just say i want these four images just to make this quick those are all pulled in and you can you know just rearrange drag and drop these if you want to and let's say that i do want a testimonial on this joe really loved his project so he left this testimonial so again that was some of that conditional logic that now our you know post that looked like this refresh it and that template is going to apply all of the dynamic content filled in here so now we have that short little story block um we have our before and after images again for uniformity you might say like hey let's make sure that the images are the same dimensions what have you we see our testimonial dynamically pulled in and the gallery with lightbox um again i think i need to defer some of that of the tool set the tool set um like any of the javascript stuff needs to not be deferred or there might even be some css that needs to be excluded from i'm not combining css files i'm not doing any concatenation of css or javascript but i did find that this is called just by some in my wp rocket settings i'm in trying to speed up the page i've got some things deferred and just there's some stuff that needs to not be deferred to make that cleaner but that is most of what i wanted to show you the content templates and let's now hit the the grid on the front end because that's one other dynamic thing so i'm not using tool sets let's go back here i'm not using tool sets archive um you can build your archive using um okay i'm back sorry privacy mode is enabled on this staging site and it timed out so like i said i'm not using the tool set uh archive um if we go to either the toolset dashboard i can select portfolio archive here or from down here wordpress archives either one takes you to the same place if i select this portfolio archive now i just said i'm not using tool sets archive you know features so why am i clicking on this now well it's just because i'm showing you how i've got the essential grid inserted in here so close these things so you can either use tool sets blocks or you can use cadence blocks generate blocks and whatever your block plug-in is that you prefer to use there are some things that have to stay here like the wordpress archive loop is just something that is part of an archive this little box at least has to be here if you um if you like try to delete it it'll actually come back it's required by the wordpress archive so the archive for me this is what my archive page looks like in the front end you've already seen it i'm just bringing it back the archive is literally all right so the the image and this title is inserted by the cadence um customizer settings so my archive is literally my essential grid along with this little divider line and then there's just a little empty space before you hit the footer and that is reflected here so there's my essential grid where i've selected my grid that i want displayed just you could do the same thing with just dropping in the shortcode but i use their block all of these things are tool set options where you can insert a tool set search field button sorting that kind of thing that all none of that is being displayed on the front end i don't need any of that there you know is the you know ability to delete some things maybe but some stuff just pops back like i showed you with the archive but the point is none of that's really being displayed on the front end um it is easy to end up with like a blank you know like a blank paragraph block so you might have to like hit backspace or maybe use like the you know block navigation plug-in to make sure there's nothing extra in here so you don't end up with weird extra space at the bottom but i've literally just got the essential grid and i've got that little divider that's all the tool set archive is displaying um it's just dropping in my filterable grid and like i said the central grid is set up to filter by my categories so the categories the the portfolio categories so specific to this post type are commercial and residential those are the two types of projects this client does and so um it's filtering by the category which you don't necessarily see on the front end of this grid but you do see their tags so everything else you see here is the tag and you know the client can add more tags if they want but anything that matches multiple criterion you know if you have multiple filters selected you can you know filter that way and that's pretty neat this you know this image is not the same size as this because anything in the grids really need to all have the same dimensions on their featured image because the featured image is what's used for that dynamic content and just for fun because the video is already really long why not make it longer um if we go to essential grid i'll just show you the the skin that's being used for this if you're not familiar with a central grid and skins your settings kind of tell you you know what all the functionality is going to be your skin is the design of it all and when you're editing your grid you see a preview of it down here in the bottom so you kind of see what you're working with but the source of all the content i've got selected as the post type it's pulling from is the portfolio for the client and then i've got selected all the taxonomies that i want to be used for filtering so it'll show you the taxonomy specific to the post type you have selected so excuse me if i just said post it's like oh wait there's no taxonomy there i'm not using any of the default taxonomy right now like there's not any blog posts that have any taxonomy so um that's blank when you click it but if you click the portfolio selects everything um or it displays everything here if you like you know select sorry i just turned off my screen with a keyboard shortcut that i didn't realize that i had but if you were to do like command all while selected in here um yeah portfolio click into this tab command all so now everything is filterable if i didn't want the categories i just leave those off obviously featured image is a media source and then all of the grid settings how many columns you want what kind of navigation and filtering do you want um that's what's giving you know these little filter bars um and then as far as editing the skin this is the skin that's being used i just mod it slightly modified one of the native skins that comes with essential grid um but the the image so if you're selected on like the the image featured image is what pulls that in the taxonomy post the post source is already portfolio so the taxonomy being used if i put taxonomy list as being what is going to be displayed here and specifically the portfolio tags if i wanted just portfolio categories if i had that selected then on the front end instead of within the portfolio seeing the tags these would only say commercial or residential depending on the kind of setup here just to show you some variability with that and i've got those set to be you know linkable these link to um yeah that's trying to just pick my nose on camera if you click on any anything in the taxonomy then you get a link to the category page so yeah link is selected there and it takes you to the taxonomy page for that so all right long video sorry about that but i hope that it just gives you an idea close this out gives you an idea of how something like custom post types whatever plugin you use to make it and um and how your your custom post type custom fields can work along with the cadence theme to help you make some pretty nifty layouts and do some fun stuff um how many times am i going to try to end this video i keep thinking of something extra to show um i did just want to pull up and show you in the cadence uh customizer the the theme customizer here that uh the ability to add this image okay into that header section so uh custom post types if i go to archive this is what gives me the ability to add in the image so this is where you make your image selection or if you just wanted to make it a certain color or do a gradient you could do that but i've got my image selection made there you can do an overlay color of some kind all kinds of fun things not saving any of this but that is one of those pro features if you don't have cadence pro then it's not going to let you do that so i love tool set i love the cadence theme if you don't already have these tools and you're interested in checking them out i am an affiliate for them both because i love them um so either do your boy a favor click my link below if you want to check these out otherwise just google them we can still be friends just kidding but really we can be friends um let me know if you have any questions about this setup and if you're working on any product project right now using dynamic data i'd be interested to see what you're doing because i'm still learning to do more and more of this myself but i hope this just adds to the body of knowledge out there on cadence and on tool set so let me know if there's anything i can do for you and have a good one

Channel: Matchless Web

Views: 1,720

Keywords: kadence theme, toolset, dynamic content, wordpress

Id: HN5vefSJTVA

Length: 34min 12sec (2052 seconds)

Published: Thu May 27 2021