WordPress Custom Fields for Custom Post Type

hey what's going on guys my name is victor and in this video i'm going to build a wordpress plugin which is going to generate a custom post type and it's going to have custom fields assigned to this custom post type so here's a quick demo i don't have any you know it's not style but like if i will go to my plugins right now on the dashboard i'm gonna i have here a plugin which is events plugin uh this is the plugin i'm gonna build in this video so uh this plugin generates this events post type so if i click here i see here two events so if i click edit on board meeting for example there is the title you know like like regular gutenberg editor here but if i click on event here tab and if i scroll down all the way down i'm going to have here i'm going to see an event date meta box and this has a custom field here so i can pick a date for example this is for this is going to be the event that is in april on april 19th so if i go on the home page i have a short code here so if i refresh it um i'm going to see these two events right so i can click on them this is a custom template for these events also generating generated by my plugin i don't have any styling though but um this is gonna adjust depending on the team's css styles so um another cool feature is here that it's being sorted by the event date so the next event is you know it's like the next one is going to be on the on the on march 31st and then april 19th and if for example one of these events pass for example let's say today is march 20th so if i will update this board meeting that will say that this event was on the march 17th if i click update and i'll refresh this page they will sort but if i refresh one more time the event is going to disappear and if i will go to my events now i won't see it here it's going to be in the trash section so while this plugin it's gonna is gonna charge the events automatically depending on it's gonna compare all the time you know the dates plug-in date and today's date and if this uh it's an old event it's gonna just trash it all right so uh that's the functionality there's gonna be a link in the description from where you can grab the source code uh in case you want to follow along with me i'm going to write everything from scratch here so that being said let's go ahead and get started all right so my home page is empty um this is my home page so i'm just going to close this tab here's my plugin section i don't have any plugins so what i did is in my so this is my main folder in wp content and then plugins i created a folder which is uh wp hyphen events and i open this folder in my vs code in the following way so here i'm going to start with the first file which is going to be the main file of this plugin and i'm going to call it event dot php and here i'm going to paste a php comment uh this comment is necessary for the for wordpress to know which i mean the the plugins information like for example plugin name description plugin uri author version uh and then here below i put a uh this is a predefined variable which detects if this file is being accessed directly so i don't want to allow anybody to access this file directly except you know that just wordpress so um below here i'm gonna start to uh so so for example if i save this file now when i'm going back to the dashboard refresh the page i'm gonna see this plugin here so i click activate i'm gonna activate the plugin nothing's gonna happen yet because i don't have any functionality in it but um i'm gonna make changes and save them along the way so whenever i'll save them i'll be able to see them live here okay so i'm gonna start with creating a custom post type so i'm going to paste this comment here create custom post type and i'm going to have a function here and i'll call it event post type so i'm going to have vm that's from vycode media i need a pref uh unique prefix just to make sure i don't have any other plugins using the same function name so i'm gonna have errors and stuff so this is gonna be underscore event post type i'm not going to have any parameters so i'm going to open this function like this and then here i'm going to add an action which is going to fire this function on init hook like this and i'm gonna use the register post type this is a wordpress function register post oops post type and the first parameter is the actual uh post type so it's gonna be event in my case and the second parameter is um are the labels the labels and other parameters for this post type so here i'm gonna have an array and i'm gonna open it like this and here i'm gonna have labels and the labels is gonna be another array and here we'll start with the name so i'm going to have the name underscore underscore first parameter events second parameter is going to is going to be vi code media this this vicod media world is like a domain for whenever you decide to translate your website in different languages you can use this domain it's kind of like a unique domain to for translation so i'm not gonna translate it in this case but i'm gonna i'm gonna use it in this way just to follow the um standard wordpress standard okay so the next one is the singular name on the singular singular name and this is going to be event vicod media and the next one so you know what guys i'm just gonna you can pause the video but i'm just gonna paste them all for the second time and i'll just go over all of them so so here we go there's the singular name event and then add new whenever you click on the add new button this is the text that's gonna show up on the add new button add new item it's gonna it's gonna say add new event edit item edit event new item new event you know view item view event view items view events search items search events not found not no events found uh no found in trash no events found in chash for example uh yeah i'll show you where all this stuff is gonna be displayed uh all items all events archives event archives insert into item insert into events uh upload it to this item upload it to this event so whenever you upload files to these events discuss the post type filter items list filter events list that's whenever you have a list in the dashboard on the dashboard and then you can sort them or filter them items list navigation event list navigation items list events list item published event published that's whenever you click on the publish button you you know you write your event and then click on the publish button and there's a small pop-up which is saying the left side that event published or item published here privately event published privately whenever you change the status you private from publish item are reverted to draft event reverted to draft whenever you save it as draft item scheduled event scheduled item updated event updated okay and then below here i'm gonna have a few more parameters and they look like this has archive because we want it to be archived as well and then public true which is going to allow us to publish them publicly queryable true show ui true showing menu that's true whenever you want to add this you can add this stuff on menus showing rest which means in rest api this is true and then supports here is also very important what we have here um it's going to support the title it's going to have an editor thumbnail revisions custom fields this is very important to include it because if you want to include this we won't be able to add the custom fields uh and revisions and then can export this is also true okay so this is the basic uh i'm gonna save it and i'll go back here and i will if i refresh this page on the dashboard i'm gonna see events here right below comments so if i click here i'm gonna have this events from the from the demo so what i'm gonna do i'll just trash them all just go to trash empty trash okay so here's your no events found add new uh if i click add new this is saying add title it has a title it has content here on the left side it has revisions but we didn't save anything it has a featured image you know that's the thumbnail and everything we added here revision custom fields but so for example here i can add this post type but i don't have the custom the the custom field for this post type which is the event date so that's what i want to add next now next here i'm going to uh create another function so i'm going to leave a comment and i will say add event event date field field to events post type so i'm gonna have a function it's gonna say add post meta box meta boxes here we can add also vm from y code media and in this function i'm going to use the add meta box wordpress function it's a hook or how can call it whatever however you want and then here i'm gonna have id container for this meta box so i'm gonna say post underscore metadata underscore events underscore post comma i'm going to put here du id containing containing rendered fields i'm gonna have to create this and then here i'm gonna have event date that's gonna be the title section heading heading on displayed as text and then here below i'm going to have the callback function so this is going to be post meta box events post and the comment is going to be callback function to render fields like this and then the next uh here is the cost the custom post type where i want to assign this uh custom box to you so in my case i just created event so i'm gonna copy just to make sure i don't misspell it and i will paste it here and this is gonna be name of post post type on on which to render fields let's do like this and then below here is going to be the place where i want to to uh place this event meta box so this is going to be on the sidebar and here i'm gonna say location on the screen and then below here is gonna be the priority so i'll just put low because it's gonna be um the last meta box so placement priority okay and then i'm gonna have to add action so i'll add this in admin underscore init hook and the function is going to be this one okay so if i save it and go back i should probably be able to see it here on the right side below the featured image yeah refresh yeah so i see it here call user function func accepts parameter this is because i have callbacks here and i didn't create these functions yet so i'm going to do that in a second now here i want to first of all i want to create another function which is going to save the data whenever i will click on pub on the publish button where update button you know i want to store this data in the database so i'm going to leave a comment here save field value and i'm going to have a function and it's going to say vm underscore save post meta boxes and i won't get any parameters for this function but i'm going to have a global variable which is posed so i'm going to grab the data and i'm going to have an if statement which is going to check if the so defined doing autosave and just and just doing auto save like this i'll just return nothing and then here i'm gonna have the um so basically here though i don't want it to i'll say because sometimes whenever you're typing in start typing in stuff here [Music] it's saving it it makes it as an auto save so whenever you go back you have it like draft oh it's it's not working now because i didn't save it yet but for example if i trash it delete permanently go back so if i save this now here click add and if i add some stuff in here and here is also important um because this stuff from here is also i'm writing these functions mostly for this stuff for for things from here but for example now if i leave this page and go back here i don't have the i don't see that draft you know it's it's not out of saving so that's why i had to add this line here okay now here after after this line i'm going to have a update post update post meta and here i'm going to grab the post id from the global post i grab the post id and then i grab the data from the event date event date this is the field name and then i'm going to use the sanitize underscore text underscore field and here i'm gonna grab the post uh the data from the event date field from the post method okay and it's gonna be like this i will save it like this here now this function i'm gonna i'm gonna call this see um this function needs to match this function from here this is the callback function uh to render render uh fields no actually no it's not that one sorry but guys this is staying like this um this is just saving so this is just gonna save the data and we're gonna call this using an add action and this add action is going to be fired this function is going to be fired whenever the save post hook is going to be uh called so i'm going to do add action save post and here i'm gonna have these this function here like this so even though if i save it now i won't be able to use it because it's not i still have this error here in order for me to fix this error i have to create this function uh which is the call it's the call by function to render fields so this function is also going to have the html for my field because i don't have any html to add it to this field yet so basically this should be the last step but i just posted it here just um to have it you know in advance so i'm gonna have function like this call back oh i can actually do this uh where's that just copy this comment so you know that this is the function from here and uh here i'm going to have a global variable and i'll grab the post data globally and i'm going to have a custom custom variable and i will assign the data from the field so i'll have get post custom and here i'm going to put post id so i'm grabbing the custom custom data the data from the custom field from the database um right and then here i'm going to have another variable and this variable is going to be the field field data and here i'm going to get data from custom and the field is event date all right and zero and then after this one i'm just gonna output i need this stuff whenever whenever i update the state whenever i update the the event because i'm grabbing first of all first of all i'm grabbing the data if there's any data in the database i'm grabbing it and assign it to the custom variable and then from here i just grab the data from the event date which is our field and now here i'm going to have an echo here's where the input goes so i'm going to have input type input type and the type is date and then the name so the name is this name from here now it's gonna make sense what i'm doing here uh i hope so and then the valley you know the value and the value is this one is the field data so i'm gonna concatenate it like this and then there's a placeholder and the placeholder is going to say event date like this and i will close it and semicolons close it semicolon so if i save it now everything should work fine here unless i misspelled something okay so we see the event date you know this is the type date input type data field there's this data picker here calendar so so how how this works all right first of all i'm adding this uh don't fire this functional first of all we generate the custom post type and then we fire this function in the admin init and this function adds metabox and the metal box uh with the following parameters and then here is the actual metabox because we have this callback function to render fields so this is the function that outputs the field all right um so now for example if i will insert a title let's say test one and here i'm gonna just add some dumb stuff i will click on the event and i will choose the march 31st if i click publish and publish this is gonna publish i see here event published right so if i refresh so if i go back to my events i'm gonna see it here okay now if i click on test one uh here i have the date you know everything it stays here that's why um i put this stuff from here uh i grabbed the data from the post type post id assign it to custom and then from here i grab the event date data and assign it to field data and i have it as a value in my field because if i wouldn't have that i wouldn't be able to see the event date here whenever i will try to add it and uh so and then this function is uh we fire this function whenever we click on the publish or update button from here so this is storing the data first of all it doesn't allow auto saving to how to save the the post and then just uh update post meta you know the field our field stores it in a database and it assigns it to our post id okay so um everything is fine until now now uh the next step is to display our to generate a short code and to display our events so generate short code and here we will have a function it's going to be vm underscore events and we're not going to get any parameters but here i'm going to add add shortcode first parameter is going to be the actual shortcode so i'm going to name it events list and the second parameter is the function name from here so paste it here and here i'm gonna start with a global i'm gonna grab the uh global data from the global post variable like this and then here i'm gonna have a few arguments so i'm going to have a few arguments and a query so here's uh what arguments i'm going to have first of all i'm going to have args variable and i assign an array of arguments post type i want to grab just the event post type i want to grab the posts that are published posts per page so i'm going to grab just the first the late the last the latest 50 posts uh you can play around i'm not going to have pagination in this case so this stuff for me is hard-coded you can you can now just expand this code if you you know cheat just for your needs you can do whatever you want uh and then order by meta value and the meta value key is the event date which is the data from my field this is the way it's been stored in the database as well and then word aasti okay and then here i'm gonna assign a new wordpress query with these arguments and i will assign all the data to the query variable and then below here i'm just gonna have to output all these data in the following way i'm gonna have a variable which is content and first thing i'm gonna assign a list like this and this is going to i'm gonna have to close it to you so i'm gonna put a dot here and i will close this ul tag now in between these two tags i'm gonna have items list items so first of all but first of all i have to check if there are any if there are any posts in the database so i'll have if if query have posts okay and here i'm gonna have yells and here i'm gonna have uh and if like this okay so if if i have posts then here i'm gonna get a while using a while i'm gonna grab all the posts one by one so i'm gonna have query have posts so as long as i have posts i'm gonna grab the post so i'm gonna have here query the post okay the post and [Music] here i'm gonna have and i will assign all the content to a to the content variable so i'm gonna have content dot equal which means i assign to the current value i assign to l i l i and here i'm gonna have a um it's gonna be a link i'll just do like this and i'll break it down here so i'm gonna have l i okay like this like this like this and that's that's it i'm just gonna do like this okay so what i did here i have an li open li close li i have a link so a href and i assign the uh get the permalink here i grab the events permalink and then i grabbed the title so the link links uh text is the title is the post title and then i have a hyphen and here i grab date date format this is the event date so that's how i filter it in this case date format and then date create and then get post meta so i get the post mail using the post id current post id and i grab the event date and this is true as the third parameter um and this is the the date format i'm just grabbing the the day and the month without the year without time okay so after this i'm gonna have end while and while this is else in here that's in case that's in case i don't have posts so i don't have any events so i'm gonna have i will say here sorry nothing to display sorry nothing to display and the domain is going to be vicod media like this and then below here i'm gonna actually i already closed it close the ul and i'll return the content return the content and okay return this content and i'll click save click save and now i'll try to use this event event uh shortcut so if i'm going back to my pages and the front page i'll click edit and i will paste here the shortcode i'll paste the shortcode click update so if i refresh here i'm gonna see the first event which is test1 one so here bear with me guys this is a link here whenever i click on this link it works this this page works in my case in your case it may not work so what you want to try is the following just go to your settings and then click on the permalinks and don't change anything here you all you need to do is just save changes because this is going to update your hd docs on your server so you click save and now this link should be working because um this is this is sometimes i would say most of the time i develop plugins using the custom post types i get this issue i get this problem but now the next step i'm going to create a separate uh i'm going to create a separate team player for this post types because right now it's using the teams default single dot php file so um but before i do that um i want to make this post to expire so i'm gonna add new a new event here this is gonna be let's say uh business after hours business after hours and this is going to be happening march okay 18 okay so i click publish publish on the home page i'm going to have it here so i want to make it so if this is an old event i want to chash it so in order for me to do that i should go here right below the while so where i have my wall here and i have the post now here i'm going to add a few so let's say here trash event if old so here i'm going to grab the data from the database first this the post this custom post event date so i'm gonna have exp date which means the expiration date and i will assign get post meta and here i'm gonna have get the id get id and here i'm going to get event [Music] event date and then true all right so now here set the current i'm going to set current time zone and to set the current time zone i'm going to use this function i want to assign the new york time zone so day default time zone set and then here i'm gonna grab today's date so i'm gonna have today and i will assign a new object which is date time and then here i'm going to have an if statement so i'm going to check these dates this one from the database from the post event date with the today's date okay so i have this in place here and if so if expiration date if the expiration date is not greater than today's date and i'm gonna use a format here and the format is going to be um let's do like this it's gonna be year month day and hour minute oops oops hour minute seconds like this so if this condition is true then we update post so here i'm going to get the current post and i will grab get post and i'll have i'm going to have here get the id in here array underscore a because i want to grab the data and just make it an array and assign it to the current post and then here current post and i'll grab this post status post status and i'll update it to be trash to make it trash and then after that i'll have the wp update underscore post and here i'm gonna put the current post okay so if i save it and i didn't misspell anything here but uh i probably misspelled something i'm not sure it's uh guys it's it's seven in the morning and i i didn't sleep all night so excuse my misspellings if i'm doing some errors or mistakes here okay so i saved it i'm gonna go back here if i refresh the page okay so it works the post disappeared you know first time whenever you run the first time it doesn't disappear just because it has to run the posts first and then it grabs the data and it has the data whenever you refresh the second time that's when it updates it so if i go back now to my events i have just the test one because the morning schmooze or the business after hours is in trash because it's an old event already so this works perfectly fine now what i want to do is i want to create a custom template for this uh post for this post type so i will open my vs code and i'll create a new file here and this new file is going to be named single single hyphen event dot php and then in this file i just have a few lines of code so i'll just paste them here for the sake of time um but you can just pause the video and copy all this stuff i'm just going to go over it so i'm i'm grabbing the the wordpress header and then here i check if i have posts then i will grab one by one and i will output the post you know using while here then here i'm going to have an h2 class post title i shouldn't have this but i just leave it like this just for you to see that you can use it for your title the h2 tag and then here's the content that's the event content and then end while and there is an else in case i don't have posts here i'll output sorry nothing to display and i have this html5 blank but you can put vicod media where the domain you used in this plugin of the whole this whole lines and then if and the if and then get the footer that's the team play the team for so if i save this team play now i go back i have to to set it so i have to tell wordpress that i have a custom template for this events custom post type so in order for me to do that i have to create another function so here i'm going to say assign custom team player team player t event post type and here i'm going to have a function and this function is going to be load event template and i'm going to grab the team plot so here i'm going to have a global variable and i'll grab the post space okay grab the post i'm gonna have an if statement so i check if event event equals post post type so if the current post if the current post type is event and the hell function which is locate underscore template array here single event dot php so if it finds this file okay and it's different than template i'm going to return the uh template location the single event.php um location so so i think this was so this is checking the team directory because like you know in your team directory let's go to wordpress content themes this is the theme i'm using here there's a single dot php file so if you don't want to use a custom template in your plugin you can just create another file here which is going to be single and then hyphen and then here this is a must you have to use this structure single hyphen it's it's a must and then your post type goes here the next word so in my case it's event so it would be like this event so if you or if you have any other post type but in my case i will use uh the single event i have in my plugin folder so basically this checks if it if he didn't find this uh template in the team directory locate template you know okay template checks this if you didn't find it in my theme directory then i then here it's gonna return the template i have in my plugin directory so i'm going to have plugin underscore deer underscore path so i have file here and i will have concatenation and i'll say single hyphen event dot php like this and then below here i'll just return the template because this template is also a global like a global variable and then below here i have to add the filter so add filter and the filter is going to be single template and here i have the function name which is load event template i'll paste it right here okay single template so i will save it and this news this should look a little different than it is now so if i refresh it it disappear those lines disappear and i have all this stuff here so it loads so again if it doesn't load your template just make sure you go under your settings permalinks and just click just hit on save changes don't have to update here anything just hit save changes and this is going to overwrite your hd access file on your server all right so that's it guys for this video i hope you enjoyed it if you have any questions leave them in the comments if you like the video give it a thumbs up subscribe for my channel and i will see you guys in the next video

Channel: Vicode Media

Views: 2,778

Keywords: how to create custom post types in wordpress, wordpress custom post types and custom fields, advanced custom fields wordpress, wordpress custom post types, wordpress custom post types and taxonomies, custom post types ui and advanced custom fields, advance custom field wordpress plugin

Id: vMXeI0ej8sI

Length: 42min 11sec (2531 seconds)

Published: Sat Mar 20 2021