Custom Post Types and Theme Builders - Part 9 Using Meta Box to Create a Custom Post Type

hi this is david mccann for webtng in this tutorial i'm going to look at creating custom post types using metabox wordpress has several options for creating custom fields and custom post types metabox is the second most popular option with more than five hundred thousand active installs and the base plugin is available for free from the wordpress plugin directory this is the ninth tutorial in the series looking at custom post types and theme builders in the first tutorial in the series i looked at creating a custom post type and adding custom fields using advanced custom fields in this one i will walk through the same process but we'll be using metabox i'll use this tutorial as a starting point for others that also use metabox metabox is different from the other main alternatives advanced custom fields pods or tool set because metabox is a wordpress custom fields framework the base plugin that's available for free in the wordpress plugin directory has no user interface instead it includes the basic programming functions that you can leverage using php code or with the mini metabox extensions metabox is designed to be very modular and each type of functionality is separated into its own extension this way you only have to install what you need also many of the metabox features can be accomplished with code and the modularity and support for code makes metabox a favorite with developers as we will see however while the free version is light on user interface options those are available in the premium extensions we can see by looking at the metabox plugin on wordpress that it's regularly kept up to date it has more than 500 000 active installs that has a large number of five star reviews and that the support team is active when we look at the extensions here on the metabox website i've chosen free and you can see that the free extensions include integration with elementor and beaver themer providing relationships between custom post types the rest api comment meta yoast seo and a custom post type and custom taxonomies extension used for creating custom post types and we'll be using this in our tutorial when we look at the premium extensions we see there's meta box views and metabox blocks the views extension lets you create content templates using html css javascript and twig and the blocks extension uses the same tools to help you create blocks for gutenberg there are a large number of premium extensions some of them are pretty powerful and useful such as the ability to use a custom table create a front-end form for submission geo-location and conditional logic many of these premium extensions add a user interface some of the premium extensions can be purchased separately or they can be purchased in bundles for example there's a core bundle with 12 extensions and there is a developer bundle with all extensions these are one year subscription bundles there's also available a lifetime bundle in addition to the regular premium extensions when you purchase the developer bundle or the lifetime bundle you also get a meta box all in one plugin which gives you access to all of the extensions from within the wordpress admin meta box has an extensive document library here you can see each of the extensions is documented and there's also documentation for the online tools here there's an online generator for custom fields that we'll look at and there's one for custom post type and taxonomies i have here a test site using the free cadence theme and i've added some posts and i have wp reset pro and wp vivid backup plugins installed for resetting the site in between test sessions so you install metabox just like any other wordpress plugin and when you activate it there is an information screen it points you to the online generator to go and generate your custom fields and custom post types and then it also has some sales information they list the extensions here and we're going to use this meta box custom post type extension so let's go and install that next and when we install that now we do get a menu this is the screen we looked at previously but now we have the option to create custom post types and create custom taxonomies so let's start and create our custom post type the screen to create the custom post types organized by tabs so i'm going to start we'll create a custom post type called books and then these are all the labels that wordpress uses and we're just going to leave those at their default and then these are the advanced settings and you have options whether it's going to be public but it's going to be hierarchical like pages exclude from search publicly queryable show in the user interface then you have an option for where in the menu you want to show it you can show it as a top level menu item which i want to do but you also have the option to not show an admin menu or to place it as a submenu so that's a nice feature whether you want to show it in nav menus in the admin bar expose it to the rest api and then the menu position so we'll put it in after comments these are the dash icons that come with wordpress and you can click one for your custom post type so i'll click this book icon i want to have an archive and that looks good oh i don't want to be deleted if the user is deleted then we go to the supports tab and these are the features of posts and so what title editor will have excerpt and author thumbnails and revisions then the last tab is for taxonomies we can apply it to one of the built-in ones but i want to create a custom one we haven't done that yet before i publish this note that there is the option here to output everything that we've chosen in the user interface as php code if you wanted to add it to your own plugin for example so let's publish this and here's our book custom post type see it shows up there now let's go back and let's create our custom taxonomy again we have a tabbed interface we call it genres and the slug by the way this is the name in the database again we're going to just accept the defaults for the labels and then in advanced and you have the same type of variables if it's going to be public and publicly queryable it's going to be hierarchical show in the ui show in the menu expose it to navigation menus show it on the edit page expose it to the rest api show in the tag cloud showing quick edit and here's an option to show in the admin column so i want to add that and now we'll go with those and look at post types and now we can assign it to the book custom post type again we have the option to get the php code so i'll publish that here is our books custom post type that was pretty easy to create and here's our genres categories but if we look here we have our regular edit screen for title and content we have the place where we can enter the genre and the featured image but we have no custom fields and the free version of metabox doesn't come with a user interface with a gui for adding custom fields if we look at the dashboard it tells you to use the online generator so let's go to the online generator on the meta box site it's this menu link here so we have a number of different types of fields metabox has a large number of fields there are more than 30 field types available here and i think there may be even more field types that metabox supports here are the basic fields the advanced fields like embeds and google maps and date time color picker autocomplete and whatnot then here's some wordpress fields post taxonomy user uploads like image which we'll use or video and then these are just layouts like dividers and headings okay so let's start by creating a text field and when we do that we see it gives it kind of a random name and it says it must be unique and it recommends using only lowercase letters numbers and underscores so i'm going to call this book author okay you can add a description you can add default value a placeholder text you can limit the size of the input box and you can check here to make it cloneable which is a repeater field there's the option up here to delete it or duplicate the field then there's an advanced tab and here you can add custom html displayed before the field output or after the field output and you can give the field a css class and then there's the option to create custom attributes and when you do that that's basically key value pairs like name value so if you want to have those for your custom field you can add that there next let's go and add an image field and this will be book author photo upload author photo we can add a description i just wanted them to upload one photo this is deleting files from the media library when you delete them from the post meta and again the option to make it cloneable and the same options here in the advanced tab and now i want to add a url field and this is going to be book author website have the same options here the same options here okay so those are the three custom fields i want to add now to finish you go to the settings tab this is the name for our metabox group so we're going to call it book fields and give it an id now this is for our post type books but has no way of knowing that so the option of post or page and then the priority is if there are several different groups of custom fields or information there whether show it first or later an auto save option and then a prefix if you want to add a prefix to the field ids so since i prefixed everything with the word book i'm just going to leave that off and then text domain this is used if you want to have translations so i'm going to call this book as well and now there's the option to generate code and so here is all the code that corresponds to the choices we made i'm going to copy that but what do i do with it before before we leave this page i want to point something out and that is that although we have these little tooltips here there's not really any on-page help so if you have questions about this process there's not really any on-page help to show you how to use for example this code now going back to our website there are three ways that you can add custom code like this you can create a child theme and put the code in the child themes functions php file you can create a custom plugin or you can use a plugin like code snippets to add the code in the wordpress admin so that's what we're going to do here we're going to go we're going to search for code snippets and i did a tutorial on this so there's a text version and a video activate it so now we get a new admin menu item here i'm going to add new and i'm going to paste the code in and we're going to call it adding custom fields to the book custom [Music] post type there's the option here to run it everywhere only in the admin only on the front or run only once i want to run everywhere because i want those fields available in the editor on the back end but also to be able to show them on the front end you can add a description here and give it a tag so i'll call it php and then you could save but before we save we've got some problems here so we've copied this code and we can see that the code snippet plugin already adds a php tag so i need to delete that and then we say add filter your prefix register meta boxes so we'll call it books register meta boxes and we'll put that here so that fixes those two but then we say here it says meta box for post type post and we know that that's book so we need to change that and so now i think we're ready to go let's save changes and activate the snippet now if we've done everything correctly when we go in to add new we should see our books custom fields here so here's our field for adding the book author for adding a photo for adding a link to the author's website here's our place for our genre and the regular wordpress post fields so great at this point we've used the free version of metabox and the online generator and we've created a custom post type custom taxonomy and we've added custom fields so this is how to do it with the free version of metabox after all this work you may think i'm crazy but i'm going to reset the site and start over again but this time i'm going to show you how to do the same process using the premium version of metabox so we can see that experience and how that works as well so i've got the wp reset pro plugin installed and i made a snapshot starting which was before adding and creating a custom post type with meta box and this is when i was doing the written version i stepped through this using the premium version so you can see i saved these in case i needed them but i'm going to use this one here and go back to before all of the things we've done in the video the only thing it's done here is it's kept these three things it doesn't delete those so i'm going to remove them now all right so we're starting over here's our home page cadence theme with some posts here are the plugins that we have installed there's no meta box here all right now as i said metabox has this extension all in one so i'm going to pause the video and install that okay so here we install it activate it and here's the metabox all-in-one plug-in but up here there's a notice that says that metabox is required and gives us the option to begin installing the plugin so we need to install that base version the framework from wordpress.org so i'm going to install that and now activate it and here now we have metabox and the metabox all in one plugin both of them installed and now we have this menu item we have this dashboard like we had before but we have a menu item for post types for taxonomies for views for custom fields for templates this is where you can create custom fields using yaml syntax this is a list of all of the extensions so here are all of the extensions and you can see they're enabled by default some of them require a third party add-on because they add meta box support for those anyway here they all are and it's in one plugin so that's nice it doesn't overwhelm the plugin list can you imagine if you had a plugin for each of these in the plug-in list all right so now let's go through the same process again and see what's different when we use the premium version we go to create a new custom post type and these screens are going to be the exact same because it's the same as the free extension but let's just run through it quickly we're going to accept all the labels we go to advanced and we choose that we want it to show after the dashboard we choose the book icon we want to have archives okay so now we go to supports and we want to support excerpt and author and revisions taxonomies again we haven't created our taxonomy yet so we publish that now we go to taxonomies and we add one i'm going to go with the label defaults we'll go to advanced and we want to show this as a column in the admin and we'll go to post types and again now we can choose the book custom post type so we'll publish that now here's where things are different we have a menu item here now to add custom fields and a gui within wordpress to do that so this looks kind of familiar we have the same fields listed here so let's go ahead and our field group is going to be called book fields notice it fills in the id automatically so we add our text field for book author but now we have some additional options here we can make it a required field we can make it read-only or it can be disabled and it can also be cloneable to make it a repeater field when we look at appearance this is similar to what we had before and then under advanced there's all these custom attributes again but there's also the option to add conditional logic visibility options so that's pretty cool that's an advanced feature that's not available from the online generator now let's go ahead and add the image here again you have a required option and you have the option for conditional logic and now let's add our url okay so we have these same things here and there's also conditional logic option so here are our custom fields now we go to the settings menu and you can show it for posts taxonomies pages whatever but our post type now we can choose book so that's another thing we weren't able to do in the online generator because it didn't know of course couldn't look up what our custom post types were always show always visible we can have conditional logic rules so only show this group of fields under certain conditions the position again and i'll leave this blank since we prefixed everything with the word book give it a text name a book you can add custom attributes now to the field group now as well and there's the option to save the data in a custom table this also wasn't available in the online generator and depending on your project this can be a useful and powerful feature okay so i'm going to save changes now if we've done everything correctly when we go to the book custom post type and add a new book here's our genre and here are our custom fields you can see this was quite a bit easier than when using the free version and it has some additional features right i'm going to pause the video now and add some book records okay so you can see i've added some book records here we see our genre listed in admin column let's go take a look at one on the front end wow the featured image is huge here's the title the author post meta content comments but none of the custom fields show that's a limitation of wordpress that custom fields don't show by default so we're going to need some kind of theme template or some builder tool that has the ability to do some theming so that we can adjust the size of the featured image and so that we can output the custom fields discussion and conclusions i found meta box to be very capable for creating the book custom post type the genre taxonomy and adding the custom fields the modular nature and the reliance on the code generators with the free version means it definitely is more of a developer tool developers who are used to doing things with code and who put lean performance above convenience will appreciate and prefer the modular and code output options average users however could get lost especially with the online generator where there's no on-screen help tutorials also average users aren't going to know what to do with the php code once it's generated i guess the addition of a user interface for creating custom fields is one of the value added features to encourage users to buy a premium version using the premium version with the user interface was much easier from an end user perspective installing the all-in-one plugin makes the process more straightforward the user interface for creating the custom post types was nicer in my opinion than the custom post type ui plugin that's often used with advanced custom fields the meta box tabbed interface breaks up the long list of options while the other tool just lists all of those things in one long page also there were nice little touches like the ability to pick an icon right on screen or to pick the place in the admin where the custom post type menu would appear the premium version also had extra options for example the user interface for adding custom fields had conditional logic required and read only options that were not shown with the online generator when saving the field group there was also the option to specify a separate table these are powerful features not available via the online generator the ease of use and additional options means that most people would be happier with the premium version i was pleased with the premium version of metabox the project has good documentation and there is a lifetime version available it's a good choice for adding custom post types in custom fields especially for power users and developers so what comes next the fact that wordpress does not output custom fields on the front end means that to show the author's name photo and links to the author's website is going to require the creation of a content template or some theming tool metabox has a views extension for this purpose and we'll look at that in the next tutorial so that's a tutorial looking at creating custom post types with meta box there's a text version of the video available on the web tng website along with other tutorials and resources i hope you found this video useful thank you for watching

Channel: David McCan

Views: 2,239

Keywords: WordPress tutorial, Custom Post Types, Meta Box tutorial, Metabox tutorial, WebTNG, custom fields

Id: 6YIGk7445E8

Length: 27min 47sec (1667 seconds)

Published: Mon Dec 14 2020