Custom Post Types and Theme Builders – Part 5 Toolset Blocks

hi this is David McCann for web TNG in this video i want to look at custom post types and tool set blocks this video is part 5 in a series looking at custom post types and the theming functionality of page builders by theming I mean the ability to create content templates for custom post types premium page builders now have that ability but there are a lot of differences between them this series provides a walkthrough of options so you can see what's involved in part one I created a custom post type using CPT UI and advanced custom fields part two looked at how to create the single template and archive template for that custom post type using Divi four part 3 showed the process using beaver builder and beaver themer part 4 looked at how to create theme templates using element or for this the fifth installment is a bit different instead of starting with a custom post type created with CP T UI and advanced custom fields we're going to be using toolset types and the new toolset blocks plug-in to create the custom post type and content templates tool set was one of the first plugins to introduce the ability to create content templates for custom post types now this is a common feature of premium page builders many site builders have wondered how toolset blocks measure up to the theming abilities of page builders and this post we'll find out and have a walk through that provides a direct comparison with the page builders we've already examined in the series I have here a test site that I use for testing tool set using the free Astro WordPress theme I've got several plugins installed all in one WP migration I use for backup and restore of the site during testing sequences I also have WP database reset installed and I use that to clear out the site and reset it to the WordPress default between tests and then there are various tool set plugins installed for this video I have toolset types and tool set blocks types is the plugin that you use to create the custom post types and custom fields as well as custom taxonomies tool set blocks is the again I'll be using to create the content templates in the Gutenberg editor I was surprised when I discovered that tool set blocks and toolset views are actually the same plug-in just branded differently tool set blocks has the default to use the Gutenberg editor to create content templates while toolset views has a default to use the old views editor when you look at the toolset menu there is a Settings item here and if you look at the bottom setting editing experience toolset blocks has show only the blocks interface whereas toolset views by default has show the legacy interface you also have the option to have both and pick between them as you go so to begin I'm going to create the same custom post type I've used in other videos with the same custom fields that's a books custom post types and I'll change the icon to a book icon toolset has this nice ability to pick where on the menu you want your custom post type to show so I'm going to save it there and then make some changes labels will leave the same and we're going to create our own taxonomy so let's go down and choose which features we want to have available for the book custom post type what comments and revisions what featured image let's take a quick look at the options the defaults are looking pretty good so let's save that again now let's create the custom fields we'll start by adding a new field group we'll call it book info once you save it you can choose which custom post type to attach it to and now let's add our two fields the first field is a link to the authors website so we need a URL field and we'll have it it won't be required but we'll have validation that what's been entered is a URL field and then the second one we want to add is a picture of the author and that's it now let's create our custom taxonomy our category I'm gonna call it genres we'll go with all of the defaults and we'll add it to the books custom post type now let's take a look at the book custom post type in the editor we have our two custom fields and we have our genre area so I'm going to go ahead and pause the video and enter a few books so that we can continue with some data ok I've entered a few book records here let's take a look at one here we have the title our content the genre the featured image the link to the authors website and the author's photo let's take a look on the front-end and see what they look like this is what the default archive looks like using the Astra theme so you can see that the archive needs some help let's take a look at the single template that also needs some help the image is huge we've got this padding around here plus we don't have any of the meta showing or any of the custom fields so now let's do some themeing we'll go back to the wordpress dashboard to the toolset menu and we'll click on content templates we're going to create the single template first so we'll click add new say that we want it to apply to books and we'll call it single book template and we're taken into the Gutenberg editor so what I want to do is have a two column layout with the featured image on the left and the title and meta and content on the right so I'm going to start with the tool set container block and then I'm going to add a row with two columns this looks good now let's add the tool set image and you can see here these are the tool set blocks that come with the tool set blocks plug-in there's the container and image single field heading button a block for fields with text intermixed as opposed to just a single field a Content template a view audio file a conditional countdown progress indicator repeating field the gallery social share star rating and video so I'm going to put in though a tool set image and it asked do you want to use a dynamic source and we want yes and our source is going to be the featured image and it pulls in a featured image from the book custom post type if we wanted to use a different record for preview we could choose it up here and having a preview of your data as you're creating your template as we've seen in the other videos is a big help when doing the layout let's align this Center and then over here let's enter the heading and this is going to actually be an h1 and you can't choose that here but over here we can say that we want the h1 heading and we can choose whether it's a dynamic heading or going to be static text now as you saw with the image you made the selection over here in the block with headings and many of the other fields you make it over here so we'll say that it's going to be dynamic comes from the turret we want the post title so there's that now let's enter the meta and to do the meadow we're going to do fields and text so the meta is the author and date and comment information so we're going to put reviewed by and then enter the post author's name so here's post author the name that's good has my name we'll put a separator and they'll put on and now we want to enter the post date so here we'll go with this default format the date when it was created and now you see it's entered the date in the front even though we had the cursor here it appended the date to the front so that's a little glitch there it might be a Guttenberg limitation but that's a good Lich though we had to copy that and you can see that that could potentially be a source of error if you copy and paste that wrong now let's add the comments so let's go find the number of comments and it has options for what to show if they're no comments if there's one comment or if there's more than one comment that looks good again it gets pasted in before hands which we don't want alright so let's select all this and then in the typography settings let's make this a little smaller and let's make this a grayish color and maybe let's see if we can add a little bit of a margin to the bottom we'll say 10 pixels all right now let's add the post content so that will be a single field we want it to be a standard field I think and post content the body yes okay good now when we looked at the list of blocks for this there is no block for the comments there isn't the option to choose where to place the comments so tool set is leaving that to the theme now let's add in our custom fields so on this side let's add another image for the author's photo yes we want to use an image and we want to use this book info was the field group and it's the author's photo good let's Center that so there's the author's photo that was easy to do now let's add a button for a link to the author's website let's change the text and let's add the dynamic link so again we've got it split here to the photo it's in this block but for the button it's over here it's going to be book info and we want the link to the author's website we might as well open in a new window let's Center that button and you can see it's pretty huge so let's see if we can change that a bit there's an option for an icon let's try style settings we'll go with a blue button and let's change the padding here we'll have 10 pixels right and left in five top and bottom so I think maybe we're done here so let's save that and now go to the front-end take a look at our book single here's what we created but we see we still have all this padding and we have this huge image and title from the theme so let's go back to the settings and take a look here on the document level Astra is one of the themes that has an integration with toolset so I think we can change these settings right here within the editor where we create the content template and it will apply to all of the book single records we want to use right now it's content boxed we want to use full width contained and then we want to turn off the featured image and the post meta information because they're being supplied by toolset let's see we also need I guess to disable the post title because that was showing twice so let's save that and now go look again at a single record on the front end and there we go let's test this out and the button works to go to the author's website let's take a look at another book record and that one works as well so you can see that was pretty darn easy to create the theme templates for the single now let's go create the archive template go back to the toolset menu it's time to go to WordPress archives click add new we want to be for our books custom post type will name this book archive and again we're taken in to the Gutenberg editor now this view looks a little confusing there's a lot going on here and what we see here is it's it's inviting us to add a block and it's going to output it in the WordPress archive loop now the idea here is that you create a single record and then in the archive WordPress loops over that to create the full page so I'm going to click here and check this out here we have loop style so toolset is giving us four different layouts to choose from we have our grid we have an unordered list an ordered list and then we have rows of unformatted data and this is what I want just one column with a row for each book in the archive I'm gonna do the same thing I did before start with a container block and then add a column block do the same type of layout let's put in the featured image yes it's a tool set and we want the featured image there we go that was easy we'll align that Center now here we'll enter the heading this time h2 makes sense and it is a dynamic field this time you want post title with link so that looks good we'll add our post meta again probably should have made that other one a reusable block because I'm going to need to do the same process again reviewed by and author name separator odd I'll choose the field post eight go with the default there again we have that glitch where it's pasted in at the beginning instead of at the point of the cursor and now we'll enter the number of comments okay and we'll make it go into the typography we'll make it smaller we'll make it a lighter color and we'll add a little bit of margin here at the bottom whoops that's padding let's take that out go with margin okay now we'll add in our exxor so I guess it's a single field and that's a standard field I guess yup here's post excerpt we can select the link so tool set is going to create the excerpt on the fly because we didn't create manual excerpts so that's nice and we have an ellipsis text that looks good so let's add a block a button block change this to read more and it'll be a dynamic button URL the current posts the post URL you don't want it to go into a new window in this case typography is okay let's do the style lets go with that blue button and then for the padding again let's make it's in on the sides and five on the top and bottom let's save this and take a look at what we have oh one thing we need to do here is take a look at the preview we can see we've got a problem with the various image sizes so okay it's going with full size image let's try a medium here and see if that standardized is it so that looks better and then we should have pagination and let's Center that choose the style from over here okay I've only got five records so pagination probably isn't going to be triggered but let's save this now and go to the front and see what we've got that's looking pretty nice there's our archive we click here we go - we should probably have made this a link we have the read more button or the title let's see we make it to the single so that's nice let's go back to the archive here I don't really like that title on the top I'd rather say book reviews or something like that so let's change that and we can go here and edit the book archive this is here's my container with the loop let's add something above that getting kind of a weird thing they're having trouble entering that so let's add it above it and see if we can drag it there we go so I'll be h1 and we'll say book reviews and then on the document level let's go down because Astra is a supported theme that has toolset integration we have this theme options for Astra here and we will use again the full width contained and we want to change to turn off the archived title so let's update go back and take a look and there we go so creating the archive template was also very easy to do now one little test that I've done is to see when creating the archive templates is to see is it possible to include a custom field in the archive some of the solutions like Divi and element or pro don't give you that option by default you would have to do some custom coding or in the case an element or you can use some third-party plugins so let's try that also and I'm just going to add another button here let's put in two columns okay so let's drag this block into here there's our read more button now let's add another button for going to the authors website and this is going to have a dynamic source book info authors website will go into the style settings blue will change the padding options to match the style we have on the other button so now let's save that go back to the front-end take a look at our archive that works so there are two buttons one with the custom field so we were able to include that does it really look nice I don't think you'd do that really but just to prove the point that you can't include custom fields in your archives in summary and conclusion I've used tool set and projects in the past and have appreciated its power and flexibility however tool set views came to feel awkward and heavy when compared to using a premium page builder I extensively tested the beta version of tool set blocks and was disappointed the beta did not provide a very smooth solution however the release version of tool set blocks is greatly improved and as you saw it was easy to create the single and archive templates there were a couple of small glitches when adding fields to the post meta they were inserted the beginning of the content and not where the cursor was and I had difficulty inserting a block above the toolset container these were small problems that didn't stop me overall the process seemed easier to me than with the new Divi 4 theme builder and as easy as beaver themer or Elementor Pro check out the previous videos to see the process when using those solutions neither Divi nor Elementor Pro provided a way to add custom fields to the archived template although you can do that with element or pro using third-party extensions adding custom fields to the archived template was possible with beaver themer and also with toolset blocks though it's much easier to accomplish with toolset subjectively using toolset blocks to create the templates felt light and easy I think that the toolset team has done a good job of leveraging the Gutenberg editor to create a streamlined experience and I was happy with how easy the process was so that's it for this review of toolset blocks I hope you found the video useful be sure to check out the other tutorials in the series on the web TNG website thank you for watching

Channel: David McCan

Views: 1,605

Keywords: wordpress custom post types, toolset, toolset blocks plugin, wordpress tutorial, custom fields, webtng, toolset review

Id: 0Az7E7BOdn8

Length: 22min 49sec (1369 seconds)

Published: Wed Jan 08 2020