Introduction and Case Studies About All The Field Types of Meta Box

hi guys welcome to metabox tutorial today we're going to walk you through every 40 meter box field types in their applications people usually know that the total number of field types is 40 but actually we have more than 50 field types first thing first remember that there is a demo site on metabox.io visit here to see how the fields are shown and used with different settings this page has almost every field types for you to test and try inputting your data this also lets you see how to use and combine the extensions to display or arrange the fields or put the fields into tabs even put them into columns we will show you how to create the above layouts at the end of this video later now let's dig into each field we put 50 fields into nine categories based on their functions and features so you can easily follow them [Music] to start with take a look at the text field the most basic and popular field it's used for short texts like a person's name place and so on like the fields i created here because this is the most basic field type it has every setting in the basic display you can set up prepend and append text like this and this they're helpful when you require your employees to fill in their information like an account id or facebook url next choosing placeholder text is optional but if you want users to enter the information easily and correctly you should use it like in this example users know that their facebook url should be like this on the field editor just type the placeholder and prepend append text here if you want to suggest some information or the frequently entered information for the field you can use predefined values enter these values in the predefined values section like this and remember to write each value in one line then they will be shown in a drop-down list your users just need to type some characters to find and select the desired value or typing their own new value is okay when allowing users to enter many values just use the cloneable feature a text field's length can be limited so that its data can be displayed shortly adjust the length by typing a number you want 25 means the length of 25 characters 100 means the length of 100 characters here is how they look you can enter longer texts but they will be hidden partially obviously we just briefly mentioned some basic field settings including the required section in the how to create custom fields video tutorial it's available for every field type such as the text field and you can disable the text field so that users can't enter the value this is helpful for the fields with default values or when the values are automatically created for example when user select gender in one field the title field will automatically display mister or misses you disable the title field so that users don't need to touch it or like in my case here when users enter their address to this field the state and country field will be autofilled thus you can leave this field read only finally with the text field you can select the type of data that users can enter like the alphabet number or anything else if you allow only alphabetical data for the email set it up in the custom html5 attributes like this or allow numbers only like this this plus is to let users enter an array of characters otherwise users can enter just one character the url field is similar to the text field the only difference is the value must be a url if you enter the wrong format it will show the error message like this so remember to enter the right format like i'm doing here similarly the email field requires you to enter the email address correctly [Music] the password field settings are the same with the text field except that it doesn't have a predefined value it also looks like the text field but the entered values are transformed into dots the number field only allows you to enter numbers this field can be used for prices weight or ordinal numbers and so on this field also has a similar display in settings like the text field but it has these arrows so instead of entering the number directly users use them to change the value visit here to set up the changes of the number after each time users click the arrows unlike the text field you can set up both minimum and maximum values for the number field [Music] and the range field is just like the number field however you will have a slider like this it's highly recommended for a review blog they will help you give the score in an intuitive and convenient way [Music] phone number has the same display and settings as the text field but its display is supported by the browser for example we're using computer so we can enter numbers or event letters but if you're using mobile devices the keyboard will automatically switch to this number keyboard compared with the text field you can see that the keyboard is the qwerty right you can still enter letters even when i already set the custom html5 attributes for this phone number text field but invalid message like this will be shown only after saving the post so we suggest you use the phone number field so that you don't need any further configuration and have a better user experience [Music] this text area field is like the text field but the input box is larger and you can adjust it there are extra options for row and column to set up the input boxes width and height you can use it for a long paragraph like product description biography and so on this embedded field of course when you enter a youtube video url it will show the video next the date time local month and week fields are to select the time however they're supported by the browser and the value displays differently depending on users browsers or the computer setup besides the value will be saved in the form of texts not time and date we will tell more about it in this video later now move to the field types that give you choices and selections first we have the checkbox field you just can check or uncheck only one box [Music] the radio field allows choosing only one option like a brand of a product but instead of boxes you have the circles here next is the check box list field unlike the check box field this field allows you to select multiple options in the settings part you can choose to inline or not plus you can't set up default values here the select field type is shown as a drop down list you can set up to choose only one option or multiple options to select multiple options you have to press ctrl or shift while clicking the options if you want a better ui and more advanced settings try the field select advanced here you have the search tool for users to quickly look for the needed options moreover you can add more display options by using the select to library in the select to option [Music] move on to the button field it shows you a button like this [Music] while the button group field is a group of buttons it also gives user selections but in the form of buttons this is the image select field it's really helpful when users have to select a layout or banner and we have the switch field to turn on or off something it gives you two styles round or square for the button besides you can also set up an icon for it [Music] finally the autocomplete field it's still the selection type but it has a different way to display we recommend that you should use the select advanced field instead and use this field less [Music] we have only one field in this category the hidden field like its name it is hidden it's often used when you need to input or set a default data for posts so users can't change it there are eight field types in the advanced fields category the first is color picker besides the options for colors you have the opacity option and many others the most frequent application of color picker is to change the palette of the suggested colors secondly the background field type allows you to select some options like color image and more developers will take the values from here to output them thirdly custom html you can display anything like an announcement or you can open a div tag for many fields to style them [Music] this is the set text field it groups text fields into one layout like this [Music] the text list field is similar to the set text field but it has a different display we suggest that you should use the group field instead of the set text and text list field the key value field is suitable for e-commerce sites to show the information about products like ram resolution screen type and so on the jquery slider is similar to the range field but it has a different way to display moreover it has the prefix and suffix options in the settings and more options to customize the slider click the slider option there are different types of slider you can use the last one is w-i-s-i-w-y-g editor it will give users a default editor of wordpress like this object's fields include post sidebar and taxonomy they're quite similar to each other to start we have the post field interestingly this field type option allows you to make this field look like one of these field types select select advanced select tree with the hierarchical structure it's like when you select the parent post the child post will appear check box list just like a normal check box check box tree also has a hierarchical structure finally radio list when you select one of the fields above it will inherit all the options of that field tick this set as parent to make the selected post become the parent post instead of just saving the value in the custom field if you want users to select some specific posts for example they just can choose posts in a category use query arguments enter the key value using the parameters on this page for instance if you want to use the category parameter enter cat for the key value and enter the id of this category in the next box next the ajax loading is auto-enabled although you see nothing about it here by default it queries 10 posts each time not all the posts on the site so if a website has a lot of posts this will help release the burden of the server remember that you just can use this feature when you select the field type as select advanced other types don't have it how about disabling ajax just go to custom settings and set ajax as false so easy i use this post field for related products like this and here the taxonomy field it's just like the post field but it has this remove default meta box option this helps you use your own meta boxes and remove the wordpress default ones importantly the taxonomy field doesn't save the value in the database it just sets up taxonomies for posts the taxonomy advanced field is similar to the taxonomy field but on the other hand can save the value in the database this is used for pages like user pages settings pages are you clear about the difference between the taxonomy and the taxonomy advanced field in short the taxonomy field doesn't save the values in the database while the taxonomy advance does i use the taxonomy field for the user capabilities so each user can access a certain kind of information the user field is similar to these fields above besides you can save the user's ids to custom fields the last one sidebar you can use it to show featured products or apply a banner to a sidebar it doesn't have ajax feature because one website often has a few sidebars not many so it can load all with the file field one of the most basic fields you can upload any kind of file that wordpress supports the ui is the default style supported by the browser so you can't change it honestly we think that this ui doesn't look good however this field is the strongest in this group because there are quite many good options [Music] here you can limit the number of files and if you choose force delete when you delete the value of the field the file uploaded into the library will be deleted that means the same values input to the fields in other places will be deleted as well otherwise you will just delete the value saved in custom fields this custom upload folder is a strong feature it allows you to choose any place to save files not just the media library this callback lets you rename the file after uploading and the file input field you can both upload files and enter the files url remember that whatever you choose upload a file or paste in url it just saves the link because it's essentially the url field the uploading just helps you save time getting links it's very useful when you want to save images sources for your post with the file advanced you can limit the file types to upload in the mime type section just need to enter the mime type name [Music] moreover it shows the uploading status so that you can know the number of uploaded files if you want to create a gallery use image advanced it allows you to upload multiple images there are some options like in the file advanced field and the image size option in addition file upload and image upload fields also have the options like the file advanced and image advanced users can drag and drop files in the upload area or choose files in the traditional way but not that it's impossible to choose files from the media library this is the single image field it's like the image advanced field but you just can upload one image only [Music] next the image field allows uploading only images and this ui is decided by the browsers last but not least the video field it's also like the file advanced and image advanced field but it helps you upload videos instead [Music] now we will take a look at the field types about date and time we have three ones which are date picker [Music] time picker and date time picker they have an option to inline or not also they allow you to choose the saved data format as a timestamp to query moreover it's possible to use jquery to customize the display of the field like this [Music] we have google maps an openstreetmap [Music] with these fields users just need to fill in the address then their location will appear on the maps immediately like what i'm doing with the google maps here they support choosing different languages to display for the map moreover with the region option you can set up a default region for the address that users look for for example there are many cities named new york but when you set the region as the us this field will display new york city in the u.s not in the uk or south africa to use google maps you will need an api key but as for the openstreetmap you don't need to use the api key then we have the layout category they help you organize the fields as well as make them look nicer if you want to divide in separate fields use divider it gives you a horizontal line the heading field has the label and description which are displayed in this place [Music] with the group field you can add subfields inside [Music] and arrange their position as you want you can make it collapsible and cloneable to add the group title each time users clone the group you can use this code as i check the boxes cloneable and collapsible i have the add more option here and can collapse the group and the last field in this video is tabs it's available when you install the metabox tabs extension each tab is a field to put fields into a tab you just need to arrange them right under the tab field then all of them will be arranged into the corresponding tab like this moreover in the settings tab of the whole field group you will have the tab style you can choose the way to display tabs here there are three ways to display here are examples of these styles [Music] that's all for the overview today are you clear about our 50 field types if you have any questions feel free to leave a comment and don't forget to like share and subscribe to our channel bye

Channel: Meta Box

Views: 770

Keywords: wordpress, meta box, wpmetabox, metabox, custom field, custom fields, field types, case studies, applications, plugin

Id: WWeaM5vIAwM

Length: 21min 7sec (1267 seconds)

Published: Tue Nov 09 2021