Creating WordPress Custom Post Types - Live Coding With Jesse

freeCodeCamp.org · Beginner ·📅 Project Management ·9y ago

Key Takeaways

Creating custom post types in WordPress using PHP and integrating with React, demonstrated through live coding by Jesse from freeCodeCamp.org

Full Transcript

hey everybody it's Jesse and uh today I haven't even done anything yet and I already have one thumbs down on this video so so I'm not mad about it I just wonder why what did I do why do I have a thumbs down it was already there like 10 minutes ago so um if you do uh dislike one of my videos let me know why I don't even care if you're mean about it uh I'll only cry a little bit but let me know why and if you don't want to call me out like in front of other people because you're afraid uh you know you people will get mad about it or whatever uh just direct message me I won't call you out if you direct message me and and uh are critical or whatever because I want to make this stream better so I really really appreciate all the positive feedback that I get and lately I've been getting a lot of positive feedback I've had some direct messages on Twitter and emails and uh you all have been you know just really awesome and encouraging and uh I I really appreciate that uh but if you don't like what I'm doing I you know if if you have you know two minutes to explain why that would really help me out um all right so I want to do two things today one thing obviously is make these custom post types like like the title of this this stream says the other thing though is I want to show you an error that I inadvertently caused when I set up the load balancer and that Sebastian caught so uh hey so Sebastian he's he's often in the live chat um I don't I don't even remember the last time he missed the live chat but uh last night Sebastian uh direct messaged me on Twitter and sent me a screenshot of some errors that he was seeing and I had not seen these errors before and uh once I did a little bit of research I found out what the problem is and so I think this is a problem that would be easy to have if you're doing load balancing I mean I've been working with next for a while now uh probably at least six months I've been working with next maybe longer what month is it yeah probably about six months uh and I've read through a lot of their documentation and I never saw this before so what's happening is this let me show you is it not going to show up now manifest I might have to show you on the yeah it's not going to show up here it will show up on the server so let me bring in my um oops actually I think I could have done it here yep let me bring this in and I'll go to one of these servers and let me let me change the color real quick because I know I had some uh I think it's there we go uh if you're using iterm and you press command and I it'll bring this up and you can change your your colors uh I just I haven't figured out how to get it to persist and change everything at once I haven't really taken that much time to try to figure it out though colors there we go um maybe a week or two ago I had somebody that said that uh this black background was was just killing their eyes so I want to lighten it up a bit and so basically I'm going to go into one of the servers so if you haven't seen the other videos where I set up load balancing right now uh this this site uh which I'll show you here in a second so this site that we've been working on for a while I'm doing this for anybody who's new um is a react site and it's running nextjs which basically lets you like scaffold your react um app and it provides ID server side rendering and routing right off the bat so it does a lot of cool stuff for you so you don't have to worry about that and you can just get started in you'll get to work it on your app and I guess I had it right here too I didn't have to bring that one over so once I I split it onto two different droplets on digital ocean so there's two instances of this app running and then I set up a load balancer uh I kind of use easy mode I I set up the digital ocean load balancer it's like 20 bucks a month and it makes it really easy to do load balancing so at some point I would love to do like a live stream of setting up a load balancer maybe like from scratch and uh but for now that was a good first step for me into uh the world of load balancing but what happened that I didn't expect was this uh actually just go so I'm going to open up this file okay so when you build your next app so when you run you know npm run build or yarn build or what however you want to run it I think it's next build so however you run it it creates a unique ID a unique build ID so so my my deployment process for this is that I develop locally I push all the changes to a GitHub repo and then I log onto the server I pull down the changes from GitHub I build and then I start the app so on the server on one server there's one build ID and then you switch to the other one this is you the other one I'm not logged in right now but I could log in the other one I have another build ID so there're two different different IDs so then what would happen is I would I would come in here and I would click around and react would detect that the build ID was not the ID that it expected so this error wouldn't happen all the time it would only happen from what I could tell from what I read I think it was happening because sometimes part of the site was loading from one server and part from another server so like you know not every page has to load every resource right so you might get you know one request would get sent to one uh server one droplet and then a request you make a little bit later when you go to a different page might get sent to another one that's what seemed like was happening and then uh next detected like hey there's there's a difference in these uh I build ID numbers and it was giving me lots of errors okay so I wonder if I can show I'd like to show you what the errors look like in case you get them so you know let me uh let me look here at the screenshot that Sebastian sent so let me bring this over it's kind of small try to zoom in okay so I can make this bigger so these are the errors that I was getting see invalid build ID basically it there were actually like two forms of this error there was it was displaying sometimes like this and sometimes it was displaying another way but basically both both times it was saying something about a build a build error build ID error okay so now we've got rid of those and here's how I fixed it so I was a little bit proud of myself when I thought about this so I didn't come up with it completely on my own I found um I found this issue so somebody had had a similar issue and um they reported it here in the GitHub repo for next and then after some possible solutions and suggestions um down here at some point maybe right around here okay so here's the suggestion to use a different build ID so make manually add a build ID that's the same okay the solution number one was well just build once and then copy that over and run that on two different servers but that's not uh that wasn't going to work with my deploy process right so I didn't want to change my deployment process I wanted to find a different solution so the solution was just add something in add a step in to your build process that changes that ID to whatever you want it to be and make sure it's the same so the suggestion somewhere in the documentation for next it also suggested you could use the ID uh for the commit for for the latest commit uh to uh to like the head to the master branch in GitHub I thought that's really cool so that's exactly what I did so check out my package Json here and here's what I added just this part so in the build process now I add this so This command get rev parse head just gives you the ID and I know some of you probably know all this and this is old news for you but uh for there's a lot of people who are just starting out who might not be confident in their command line skills so um I'm going to just kind of explain what this does so I'm going to copy this command in here and if you see this it just Returns the ID of the latest commit so that's what we want we want this kind of unique ID but we want it to be different for each build but the same on both on both servers okay uh and then we're just automatically putting this into this file so if you're not familiar with this basically you know you put this sign in here what is this the greater than sign and then we specify the file and so whatever this returns becomes the contents of this file so it worked I now have uh those errors are gone the build IDs uh are now the same so anyway I thought that was uh I mean that was a tricky problem for me when I first saw that uh last night I thought what is going on I have no idea you know what this is but um not too bad after a little search so anyway I definitely wanted to point that out because I feel like if anybody had been following what I did with load balancing they probably got a similar error if they were using next as well and I didn't want to leave leave anyone hanging uh without you know bringing that up and and explaining what I did so I mean this is all on GitHub now you could check it out you know and add this to your project if you need to if you're having the same error I'm going to check the live chat really quickly because I have some some comments in here uh before we get into the custom post types oh man Martin says two hours way too much this a very good topic I like the video before where press API but really 2 hours is way too much um yeah I kind of agree with you I don't I don't know let me know do you all like when I have the long streams like two hours or do you like it when I used to have a half hour streams so when I first started streaming I tried to set a half hour limit so I would code for like 25 minutes and then I would answer questions for five minutes and then I'd be done because I thought the same way like hey nobody's going to watch a recording of a 2hour video but a half hour is more doable uh so let me know what you think it's just some of the more like detailed things that I had to do the more complicated things there was no way I could get it done in 25 minutes so I just kind of kept going so that we could do the whole thing um I didn't want to break it up and have you know one thing take like three or 4 days so let me know I can definitely change it up if uh if you all think it should be shorter fine uh otherwise I'll kind of keep it going how I am I am doing I would kind of like to cut it back so it's more like an hour not not the two hours because that is a lot uh and I found like honestly like after I I'm talking for two hours uh my voice starts to go so I think if I did that every day I would lose my voice by the end of the week uh so I mean it's not the end of the world if if my throat hurts a little bit from this but uh I think it would be better if I still had a voice by the end of the week all right um a lot of people saying hi hey everybody thanks for watching okay you yugan not sure how to pronounce that hope I pronounced it right yugan says please start the technology from scratch that would help beginners and then increase up their level that everyone up the level that would help everyone thanks you rock oh awesome thank thank you for the uh for the positive feedback there um I really would like to start from scratch and I probably will end up starting from scratch soon when I move to my next project uh so this stream in particular is just what I have to do at work anyway I try to pick the most interesting thing that I'm going to do each day and save it for this live stream time and I get a lot of the more boring like copy and paste typee of things out of the way uh early on in the day um so sometimes we're doing more complex stuff and sometimes we'll be doing beginner stuff it's just it depends on what I have to work on that day uh but I know I've been saying this and promising this for a while but I am going to do some tutorial videos that'll be pre-recorded and in those videos I will go over basic stuff and uh they'll be really targeted um you know some of them will be targeted just at people who are really at the beginning stages uh so that is coming I have some outlines already ready for those videos I just need some quiet time to do the videos I started to do one and then um uh all my kids came home and it was just way too noisy and uh I don't have an office at home I need I need like to make a little office space where I could do this so anyway um let me okay so Jordan says uh 30 to 60 minutes okay that that's reasonable that's kind of the range that I think is probably best for me uh Rohan says I actually love these two 2.5 hour stream uh but some topics can certainly be half or one hour okay cool I yeah I I do I kind of agree with that it it does depend on what we're doing as to the length um let's see best to make sure topics are covered completely but an hour max we okay so an hour max an hour one and a half hours break it up okay so it seems like right around the 1 hour range seems to be kind of like the median of what people are saying uh so I'm going to try to keep things like an hour or less I will say um a a lot of the time at the end does come like we kind of get into a discussion about things so the actual coding time sometimes isn't that much but maybe um maybe we can break it up maybe there can actually be a scheduled like question and answer time so that we can split up and have videos that are just coding and then videos that are more Q&A I don't know I have to think about that and see you know when that would be good to do um I do I do like the idea Jordan says break it up into different streams uh multiple streams per day so like instead of making one long stream that's two hours I could do four half hour streams so yeah that would be a little bit more work uh just to set all this times up and to make like video thumbnails for that but I guess I could use the same thumbnail and just change part one part two part three so that's that's that's a good idea I'll think about that one as well sometimes I don't know ahead of time how long a certain thing will take Rohan says spontaneous Q&A is better yeah that's what I was thinking um the scheduled Q&A might not work out the you know if we do get questions they just kind of flow out of what we're doing um Danny says will you be doing a WordPress development stream yeah so I'm doing I'm I'm going to do that right now um sometimes I I'm not going to do a dedicated stream for WordPress like every you know every so often but every day but occasionally I will need to do WordPress stuff because I work with WordPress websites uh sometimes so we I will be incorporating that so let me get to it it's already been I'm talking here about you know cutting down my stream time and I've already spent the first almost 20 minutes on you know kind of beside the the topic I mean now it we haven't it was important we were trying to break down and troubleshoot an error so um you know that was valuable but I do want to get to it uh in case somebody's joining and expecting WordPress I don't want them to be disappointed so here I have let me move this over and just to show you how we're going to do some of these so I already have some some custom post types running and I'm going to bring over my WordPress site as well to show you what post types I have running and what it kind of looks like here so I don't know how familiar you all are with WordPress it's a Content management system that's built on PHP uh and normally the way you use WordPress is you have a theme and that's you know it's you know PHP templates and it's all tied in here uh with this admin panel and that's how normal WordPress website works you know normally like you know you click a link it's a page refresh and everything everything's rendered on the server using PHP what I'm using Wordpress as is I'm using the API so all the content still goes in here and basically it's still running PHP behind the scenes but I don't use PHP to render anything okay the the display portion of it what people see with the what the client sees you know for instance this is built with react and it lives on a different server than this so when this page loads a request is sent to Wordpress saying I want this certain data and then it comes back in Json format and then I handle on this end sorting it out and rendering it all so WordPress now is in I think the term people use is headless so we're using it as a headless CMS so WordPress isn't usually a headless CMS but we're using it in that way here is that all we care about is content going in here and we don't care about display here we do all the display stuff here so that's just a quick overview in case you're wondering what you know how WordPress ties in with with react and and what we're doing um I will I'm not going to go into a lot of the why of doing it like this because I've covered it before in videos and in the comments to some of the videos um early on uh but just to to say a little I found that when I make sites like this they are much faster than traditional WordPress sites that I've done uh and I'm able to do different things like yesterday we set up it's it's not live yet but yesterday we set up a like a live search that just automatically gave us search results and it was really cool uh not that you that's not possible with a normal WordPress site but um this gives me a lot of freedom to use the build tools that I want and be able to do everything in JavaScript you know using react instead of having to do a lot of the templating in PHP okay now if someone was really good with PHP maybe they'd like to do it a different way but I'm not great with PHP but I know enough to do custom post types so let me show you what a custom post type is in case you're not in case you're not sure so this is one custom post type it's called nearby events so this isn't default in WordPress I just made this name up nearby events we'll go to add one okay and I've also added some custom fields and we'll probably add some of these today I did not code these custom fields in PHP so what we'll do is I'll show you how to code in PHP the custom post types but then I'll show you the plugin I use as well to do all these fields for me since I'm not really a PHP guy the custom post types are pretty easy to do but all the custom Fields were just it was just too much work for me it made more sense to go with a plugin um and also if you're not familiar with WordPress plugins we'll we'll cover it you know in in a little while uh so it'll make more sense but basically I can just set out here's what I want here's all the fields that I want this gets put in here and then the data I get the data basically like this this isn't the same this is data for different custom post type but it gives you the same idea is that this is how I get the data that gets put into here and then I can do whatever I want with this and react okay so does that make sense I'll check the live stream if if this is like um completely confusing to you let me know in the live chat and uh I can let me know what's confusing and I can't explain it otherwise I'm going to keep keep going and show you uh how how we set up these post types so there's probably a little delay so I'm going to wait just uh you know a few more seconds here to see if anybody has a question at this point because if if you're lost at this point I'd rather like try to catch you up a little bit than uh then you stay lost uh let's see okay Rohan says you you just request content on API it's probably is maybe Overkill though but better than learning a new CMS just I'm not sure if that was in response was that in response to Danny or what uh also yeah it probably is overkill but um in this particular case I didn't just need to make a site I need to make a site that was very impressive is there because of the circumstances surrounding why I got this project and everything uh I needed to make it in a very impressive site that did more than a normal site would so um that's part of the reason why I went with this as opposed to just the normal WordPress site there are some other really good reasons why and I think I I went over those in previous video so I'll not go over them again here but if you are thinking like like Rohan that maybe this is overkill for just a normal website I I don't completely disagree with that um but if you can make something better uh and you have the time to do it and the ability you know why not do it um all right so I'm going to continue I didn't have anybody say okay so that Rohan said that was in response to Danny so that's what I thought just wanted to CL uh just clarification um okay Jake says Overkill maybe it depends on whether or not you're doing uh edits or passing the site off to clients yeah okay Jake I'm glad that you um I'm glad that you said that Jordan also mentions building custom CMS is a lot of work definitely a lot of work um and and Jake says WordPress really easy to understand for non- Tey people good I'm glad that that you both brought up those points uh because this this is exactly why uh I chose WordPress as the CMS because it's so easy for non-tech people to use I'm not going to be maintaining this site in terms of content which is great I don't I don't ever want to maintain content on a site I just want to build new sites and make them better um so other people so grad students who are getting their degree here uh I work at a university who are getting their you know their master's degree here and are trying to make a little bit extra money you know while they're in school so they can pay their rent and everything they're going to be up updating the content so the people updating this are constantly going to change it's probably going to be a new person every year or every two years they may or may not have any experience okay so they're they're not getting their degree in anything computer related so um they need something that's as simple as possible so the idea is I make pretty much everything that that makes sense uh editable through WordPress and then I make some tutorial videos so that the new person would just be able to watch you know a playlist of tutorials and they would be able to go in here and make any edits so I'm trying to make it as easy as possible and make kind of restrictions so I have restrictions on some post types like if you upload an image that's you know a certain size if it's not at least let's say 600 pixels wide then it won't display because I don't want pixelated looking images on the site so even if somebody were to upload you know a really small image because they they don't realize you know the quality of images and and how that works on websites then there's some protection that that won't make the site look bad okay so some of the fields don't allow HTML it strips it out so there's some Protections in there like that so setting it up like this definitely makes it easier for people to enter content and then it also gives me a lot of control over how that content's displayed and it takes that control away from the WordPress editor which in this case we want uh because it would be very easy for someone who didn't didn't really know anything about websites uh to kind of make it look make it look bad I mean not that they would mean to but it would be easy you know if they could just go in and put a bunch of HTML in and and change the theme and everything like you normally could do on a WordPress site that wouldn't be great so all right let's see there's some questions I'm going to come back to the questions in the live chat so I see uh there's some discussion going on there but I want to get to this I'll come back at the end and kind of join in the discussion a bit uh let me show you now now that we've seen the custom post types what it's going to look like I'm going to show you how we make them I know I've I briefly went through this maybe last week at some point I just kind of showed it now we're actually going to make some things with this and then we're going to add the fields to it and then we're going to see what it looks like uh when it comes in the API so right here I've just been making a list I've been going through the site and making a list of all the sections that right now you can't edit through WordPress that need to be added I have two ideas for how to do this some of the sections would probably work well if I just make them a page because if it's a section that won't be repeated uh so for instance like this section here is going to be an intro section I always want this section to just be about a paragraph okay so I can make this section just be a page and not even necessarily a custom post type it would just be a page with the name resources intro okay we could give it that name and then I could pull that page based on the the slug which is uh an I kind of like a a string version of an ID WordPress gives every page and post an ID that's a number but then they also give it a slug which is always a string that is a unique identifier so in this case I would search for this name of this page okay so I'm going to do that I'm not going to do the pages though right now because I don't have to custom code those so that's not as as nice I think to do on on the video but for sections that are going to repeat so like in is it events no sorry uh courses okay so courses some of these sections will be static pretty much and so we could just make them a page but some of them like these are basically the same thing repeated over and over again right so it's just just text I did have a request to um add some images in here but I'm not 100% sure how I'm going to change how this looks to fit with that so so that's that's coming but for now at least these are all just going to be repetitive sections so that's perfect candidate for a custom post type so that we can set okay uh you know use we just need a title and then we need text just very simple now some of these like have a little bit of more custom formatting like this has you know this quote here so there are going to be some that if somebody knows what they're doing they could throw some HTML in here and it it could work I'll have to make sure that I have the style set properly on on this end for it to work but you know that's so I want to leave this whatever um we make as the input for this we want to make it so that HTML is is able to be put in so we'll make that like a wizzywig editor so I think this is a good candidate to do first so let's do that and and I've already had it to the list I think I'm just going to call it Ministry tracks so I see I I know there's some stuff going on in the live chat so I will get to it uh I just want to kind of push ahead with this now so that I can try to keep to uh keep this to about an hour total for the live stream so what I'm going to do basically this makes um a new custom post type this this portion here is basically the thing that you need to change there's one portion at the bottom which basically initializes everything okay so this you only need to add one time this section down here I'm just going to move down so we're very clear that this is a new section and these are custom taxonomies I'm not going to do custom taxonomies today I don't think I need these for anything on the site at this point so as long as you add this one time time at the bottom here to init everything you can just put you know all of your post types in one big um one big object I guess that's what I'm not sure what this is in PHP this okay so one big function so this Creator create new type function so yeah all right so it all has to go in that function sorry I'm just like uh trying to make sure that I know what's going on uh in the PHP and can explain it as best I can I am not PHP developer so um if you know more about PHP than I do which is likely uh just bear with me here I know enough PHP to make things change in WordPress and upload files on a small website that's about it so I'm going to take this I just copied this and I'm going to paste it below and I'm going to do some kind of batch editing here uh so you see basically in this point I I'll go through them all oops I don't want to so some of these are going to be uh singular and some plural so what I found is it's easiest to um just select the singular and then the S on the end will come in so if you uh shoot I don't have this in a repo maybe I'll I'll make like a gist or something and make this available uh in case you want to add this uh to Wordpress and make your own post type so uh I'll make a note of that right now and make that available uh if you want because I imagine it would be super hard to try to like look at this on the video and type it all out as I'm moving it around okay I may already have this somewhere in GitHub and just have forgotten about it but in case I don't I I'll add it and then I'll add a link in this video so basically at this point I'm just going to type in the name that I want for this ministry tracks oops okay so now I'll go through this so we're giving it the official name right Ministry tracks these names up here these are going to be the ones that like you usually see displayed in the admin panel that's why like you know this this looks like normal text okay it's not um you know we're not doing like camel casing or um or anything like that uh because we want this to display you know in a in a manner that's intelligible to people who don't know anything about code in the admin side so this is the singular name and this is let me bring this over here so I can it'll be easier if I give you like a side by side to show you what these mean okay so the name Sho I need to get this big enough there we go all right so your name is going to display here right your add new all right it's going to see like add new whatever you want to say here so you could change this if you wanted you don't have to keep the defaults right when you go to you know edit the item do this so you you get the idea of all these are going to show up somewhere in the admin panel now down here these are going to be the names that like you'll use when you make a request to the API or if you were going to do other things like make another PHP plugin to do something else or even if you're making a traditional WordPress site and you were going to render these in PHP templates and things these are what you'll use to reference that so we just need to change Ministry and do I do I don't remember if I usually do um hyphens or underscores or camel case let's see what I did here okay I did a hyphen great um I'm not sure what's the convention in PHP is it usually underscores or it hyphens I see some underscores here at this point it's I I've already done it differently so I don't really want to change it uh because then I'll have to change code in other places um but just know this may not be the conventional way to do it in PHP um just in terms of style so this is actually you know this is registering the post type we we're giving it uh the options here okay so these options some of these it just depends on what you want to do so you might not need all of these um but they're pretty some of them are pretty like self-explanatory other ones you might want to check out the documentation there's so much documentation for WordPress stuff so you you'll be able to find exactly how to do this um you know has archive true right this this means is this post type going to have that archive function if you see like on a lot of blogs you can go back the archive to like you know go back to the post from October 2016 right so do we want it to do that yes Sor we want it to do that I don't really know if I'll use that function but uh in case I do I'm just adding that uh is this public okay so you can have post types that aren't meant to be public they just um you know you're tracking data in the admin panel you don't want people to see it you got to be logged in and stuff so uh we want this to be public and then we say supports and these are going to be the fields in here so I have actually taken these out for this post type but normally let me show you a post so by default this is kind of the fields that you have I actually added some up here but by default you'd have right your title so that's what this is talking about you have your editor here you have and decide I may have disabled excerpt so excerpt is just a smaller text uh input area uh where you could put in a custom excerpt for your post um otherwise I think usually it's set to just take like the first so many characters and use that if you don't set it and then the the thumbnail so you can set you can add or take away these you know whatever you want it to have I think some of these have are probably like mandatory like I think every every post has to have a title so you may not be able to take all of this out but you could certainly you know add things and um but I have a kind of an easier way to add and and take away things so I usually don't mess with this part in the PHP um exclude from search false capability type so this is the type of it's a post so we're going to rewrite the slug right so to Ministry tracks and we're going to this is the important thing for the rest API do we want this to show up and be accessible from the rest API yes and do we want this to show in the menu yes I'm pretty sure that I it's been a long time since I messed with this to check it but I'm pretty sure this is like show in the in the admin menu uh so like here in the menu so yes we obviously want it to be here uh so that's that's it that's all it takes to do a custom uh post type so I'm going to save this unfortunately I am not able to get into the server right now um so I was hoping that I could just kind of edit this like not that this would be a great idea but I was going to kind of just Cowboy code this and edit it live since it's like it's really basic there's very little chance of me breaking anything since it's it's just a really repetitive task copy and paste so normally you wouldn't want to edit things live but um in any case I'm actually going to have to copy and paste this and then add this in so if you've never added a plugin to Wordpress kind of the the weird way to do it is actually go into the plugin section and I find my plugin which is here and you can edit it now I think you have to be an administrator so not every user can do this which is a good thing so all those people who I talked about that are going to be editing this they won't be able to do this so if you're making a WordPress site for a client definitely block stuff like this out uh for them so they can't come in and mess with these because they can definitely break your site so I'm just going to paste in everything that we did which this like I I can't stand like having to copy and paste stuff when I'm working on a thing but um Mo well uh we will check here and look now we have Ministry tracks so if we go here we can add a Ministry track right now I haven't set any of of the stuff that we need I may not actually have to set anything custom here because we um if you see the uh site what do we need here we need a title and we just need content here that's all we need for right now at some point later on we might need to add an image somewhere but by default this comes with a featured image so we can just use that but for right now I don't want there to be an excerpt and I don't want some of these other fields to show that that don't really make any sense uh in a headless CMS so there's going to be a field like if I were to put something here and save it there'd be a field to preview and um it would show like what what the URL is going to be I don't want that because if you click it it's not going to show this site it's going to show what it would look like if we were actually using a WordPress theme usually I don't even have a theme I um I just block everything so if you try to go click that it will show you a blank page occasionally I have it redirect to um the Rick Ashley video for fun but but not on a uh an important site not on a client site so um all right before I I show you how to add custom fields and take them away I'm just going to check the live chat briefly just to make sure that you all are with me um let me scroll a little bit see what I've missed uh a few questions I'll answer a couple of them while I'm while I'm here there's not a lot um Andre uh I'm not sure make I'm pronouncing that right It's A and D RI let me know how to pronounce that and I will make sure I pronounce it correctly um it says why why would someone pay a developer to code him a website when he can make his own with WordPress that's a good point to be honest with you for some people in businesses it does make more sense for them to try to just do some type of simple site with WordPress or with you know there are there are other things like what is it Squarespace or you know there are a lot of different uh Services where you can go and and just kind of drag and drop build a website honestly if you're just going to do a personal blog and you're not really making money off it then no don't pay a developer and I mean I'm I'm a developer so I mean I want I want people to pay me to make sites but realistically it doesn't make sense if you're very like a small business and you need something very simple um let's say you're you're from an area where like for instance the area where I live is predominantly elderly so the the population uh demographics here are just like really really skewed in favor of people over 60 uh it's just the economy is really bad where I live so most of the people when they Gra graduate uh from high school they leave because they can't find a job here uh so that's how it is so when I talk to people like a small local business and they want to know about a website my advice is sometimes you know you you don't want me to do a website for you because you're not really going to make that money back that much you know your your clients aren't your clients aren't going to be using your website that much if you have a presence on on you know Google Maps that's what you need so I'm only talking about really small clients they don't have a lot of money so I mean obviously bigger companies should have a website it should be a good website it should not just be you know regular default site and they should have somebody that's a professional working on it so that said uh for this site in particular um it it needed to be better um I think I mentioned it earlier so this site needed to be more than just a normal WordPress site uh so that's why I did it like this and there's some other uh you know good answers as well that other people added to that uh uniqueness is one I mean yeah the if you have a unique site that's well done it definitely just adds at least in my mind if I go to somebody's site site a company's site if it's just basic WordPress site I don't think badly of them but if I go somewhere and they have a site that's like wow how did they do this site you know and I want to inspect the the code and see like this is really cool um for me like it's just impressive I'm impressed with a company that takes the puts the thought into a site and has put the resources into doing something like that so not everybody's probably like that but it makes a big impact on me you know and your site I mean consider your website like the the online home of your business the online uh location so uh for some companies they could do with just a generic looking you know um building to do their business in right but for some businesses they want to stand out they want to have nice architecture nice decorations right that that's kind of the difference is between you know I just have a little shop that looks like all the other little shops on the street or I have a place that people look at and are like wow you know they walk in and it just attracts people because of how nice it is so that's kind of the difference and if you want that you need to hire an architect that's you know that knows what they're doing and has you know some creative ability and an interior designer you know and decorator so uh hopefully that answer your question I probably spent too much time on that so sorry if I kind of kind of over anwered that um let's see so I'm just I'm just getting through I'm almost to the end here of what's on the uh live chat all right so here's a question so so Daft derp says is it better to have a main parent component and render that to the Dom or is it just the same to have many parents all separately rendered to the Dom um [Music] comp I'm not like 100% sure how to answer the question um let me just show you I I haven't showed you any of the react stuff uh yet so let me just briefly kind of show you how a page works and it doesn't have to work like this this is kind of how things work in next when you're using next to build react stuff but like this is my index So within this index file and uh like I said may maybe I'm not really answering your question here but I'll give it a shot um you know within my index this is actually this is not a good example because I'm not pulling in anything any other components really uh let's let's go to resources that's a better example so I'm importing all these other components these child components and I'm pulling them in so um you know the sticky nav components here the title components here uh all these all the cards that I have on the page we're just iterating over this data and then adding these these cards to the page and that's a separate component uh so that's that's how I've been doing things I'm sure other way ways to do things hopefully that clarified a little bit um let me know if it didn't and I'll try later on maybe to give you a better explanation um I had asked a few minutes ago about the diff like using the hyphen or the underscore for PHP and it seems like the underscore was kind of the way I should have gone um and Jake says um the underscore is the way to go but then you have an underscore in the URL and you don't want that so actually now that you say that I remember that is the reason that is the reason why I did it like this uh and not on this site but I like months ago when I first started working with this uh I had used underscore and then it I didn't like then I ended up having to use underscores later on uh in other places and I didn't want to use underscores everywhere so that's why I did go with the hyphen so um thank you thank you Jake uh reminded me of of that and uh uh Patrick says Rick Rolling client Priceless in yeah it is pretty funny uh I actually got my I think I got my boss with that before um yeah it's funny but I yeah I normally I don't do that for client sites uh but I I think I may still have some WordPress installs where if you try to go to like the admin page you get Rick Roll because I've changed the uh I changed the URL for the login for the admin just to mess with somebody who might be trying to like get into my site and they're not supposed to be in there um all right so let's get to I don't want to get completely off track here uh where we going here we go let me show you how we're going to customize this for editing so I have a plugin called Advanced custom fields and it gives me this extra menu item there's a pro version of advanced custom Fields but there's a free version in this case the free version does everything that I need it to do so it's fine I have used the pro version and other sites and um it has some functionality that if you need it it definitely saves you time and it's worth the money I think it was like $25 per site or you could pay $100 and use it on as many sites as you wanted I think it was in Australian dollars too so I'm not sure what that what that came out to in US Dollars I think it ended up being cheaper in US dollars but at least at the time uh so let's go into we're going to add new and you get title uh let's go Ministry tracks info um I will say this you everything I'm about to do with this plug-in you can do in PHP and just code it yourself I found that that was kind of would take too much time for me just because of my lack of experience with PHP if you're good with PHP give it a shot and that's one less plugin you have to worry about um but I kind of this is nice this this works it's free um it's a well-maintained plug-in it consistently updated so uh I I definitely recommend it and I I get no um I I'm not sponsored by these this plugin so this is an honest recommendation I get nothing for that so what we're going to do here is we're going to say when the post type equals right so when it equals Ministry track okay then all this stuff that we're about to do will apply okay so we we're going to apply it to just that one and we have some options as to where this is going to display it's not really a big deal it's your preference usually if the field is like really important and I don't want people to miss it I put it high right after the title uh but you can put it anywhere you want uh this like display style is um totally up to you in terms of your preferences uh I found the uh this the seamless kind of looks cooler but the standard fits better with uh WordPress so it's like it looks more like it's supposed to be there uh and then here's a place the place where we can actually hide a lot of stuff that we don't need so I'm just going to hide everything for now because we're only going to show a few things so we don't want the peral link as I said because that'll take you it'll take them to the wrong place and it'll be misleading we do want the content editor for this post I don't always add this in but we want that we don't want the excerpt uh we don't want any of the normal custom Fields um because we're going to add our own custom Fields here uh we don't want discussion comments because we're not going to have people be commenting on this custom post type uh we do want revisions so that they could go back and see what's been changed we do want the slug in case I need to double check what the slug is you know if I'm trying to troubleshoot something um we're going to keep the the author and that way people can see who's worked on that post before we don't need format because that has to do with the layout of a WordPress theme and we're not using the WordPress theme we're going to keep featured image because at some point I think we're going to add images to that section so I'm just going to leave it in there for now even though right now if you put an image in there it wouldn't display at all uh on our site in fact we haven't linked this up to our site at all so it has it is actually not going to display depending on on we're not going to have time in this stream but maybe in a future stream we can link this up I know I've already showed how to do that in a previous stream but maybe it would be cool to do have like the whole thing in order now uh we'll see let me know if you're interested in that uh we are not going to add any categories or tags at this point we could always add it in later but I don't really see any need for this because of what we're going to be using this for we don't need that if this were more like a Blog style thing we we would leave these and we don't need the track backs so we've got rid of a lot of the stuff on the page if I wanted to do a custom field which I don't need for this one but let's just say I go here to add a field I can add a label so I'm just going to do some nonsense here um it gives it this field name this is the name of the field that uh will show up in the uh in the Json so let me show you I think I had it here so like anything that you put here will show up under this ACF uh section in your Json and this is the name so so you'll need to use this name in your API call and then uh no not in the API call you need to use this name when you're rendering out the contents of this so you can choose a field type so a lot of different things you can choose from um and then if you get the pro version there's even more you can have some instructions so this is really important if you're making it for clients you know really spell out exactly what you want in that field and how it how you want it to be formatted you can make it required or not you can give it a default value placeholder text right so um you can even set okay where do I want this this text to go so really kind of nitpicky things as to how you want to align this but you know might be important this I almost always choose no formatting unless there's some really good reason why I want people to be able to use HTML uh in in whatever text area that is okay so normally no I don't use that and occasionally you do want a character limit uh so for these I don't need a character limit because if you remember on the page we're just showing and hiding them so it's really really not going to be a big deal to have them be super long because they won't be immediately displayed to the user it won't make the page really long so we're not going to have a character limit there but I would recommend this for for things that you don't want to make super long because it would look bad put the character limit in there uh and then usually people who don't know about websites have a tendency to write way too much text and in General on a website you want less text um you know unless you're writing a blog post or something then that's understandable but you know if it's on like your homepage if you know just skip out people never read all the text anyway so uh try to keep it short and to the point so that's basically it I would add this field and I'm I don't really want to keep it but I'll just add it just for demonstration purposes and I'm going to publish this now when I go back up here to Ministry tracks and I go to add new we can see it looks a bit different we don't have the excerpt anymore um actually there's no option to get rid of these sharing buttons I um this is not going to hurt anything but actually if I can figure out how to get rid of this I might as well because um it's kind of pointless and it might just be distracting uh so basically we have our all we have is just what we want to to include our title our content our main content editor and then here's our field so we added one field here and then we just added another one and just left it blank uh but that's where they would go like if we wanted to we could have this display up here uh but that's it you can see it just it looks like it's meant to be there it Blends in really well with everything uh and that's where we' at it so at this point what I would do to kind of complete this process for this post type is I would go in uh here and basically at this point I would probably copy and paste or I would probably have somebody else do it because that's a little bit of kind of a waste of my time to just copy and paste so if I had maybe like a student worker uh who needed to get some hours in and uh maybe I would have them copy and paste this um into here fill out all the tracks once I have the data in there then I would go in and pull this in so just like I'm doing here with these resources where I I get I make a call to the API here with Fetch and then I get that data back I showed you what the Json looks like and then I use that data down here to populate uh the the page so that's what I would do for that the page the courses page with the ministry tracks exactly like that so you can go on GitHub right now and check out this code and just kind of see what the next step would be uh just by checking out one of the pages where I'm actually importing data where you see this get initial props at the top of the component uh so that's it so I've come in at just slightly over an hour so uh we kind of hit our goal today of of being about an hour I am going to uh keep going for a couple more minutes just to answer your questions so if you were only here for the code uh you can stop watching now and thanks for watching uh but if you do have a few more minutes to stick around for some questions uh go ahead and put your questions in the live chat and I will try to answer as many as I can uh as best I can and if you're if you don't want to put your question in the live chat if you're a little nervous about that you can put it uh in a direct message to me on Twitter my uh Twitter uh a link to my Twitter account is in the description for this video uh or if you can't stick around for the answer you can put the question in the comments to this video and I will get to it I do read all your comments and everything that everyone sends me I read it all sometimes it takes me a few days to get to it but uh I do read it all and I will respond all right so let me get to to some of this live chat let's see there's not a whole lot here so uh the question answer session might be pretty short today um which that's fine because I so some of you evidently are like staying up really late to watch this because your time zones are a lot different than my my time zone so uh I appreciate that that you know you uh you like the stream uh enough to uh to stay up like that but I don't want to keep you up too late every night so I'll try to be shorter than normal let's see I'm going through I'm I'm trying to find a question here that I haven't already addressed so haven't found very much yet okay Sebastian ask can you redirect wps.com to the real site uh yeah so I've thought of that before so just uh for some context here um I had said before that on the uh WordPress so like normally uh when you do something in WordPress and you save a post there'll be a link here where you can check out your post or preview so there's any preview button you preview it with the way I've set it up here if you click this preview it's going to take you not to the to the site that you should go to not to cats.com but it's going to try to take you to uh the site that would be there if we were using the WordPress template and I usually just completely disable the template so it'll basically take you to a blank page but you know at best it's just you know it's misleading uh for people try to click that and they think oh wow this isn't what it's supposed to look like or they think hey this site is broken what happened so I just take that out I mean I I I can take out the preview button if I really wanted to get into it into editing but uh I'm not super worried about that right now Sebastian is saying couldn't you just make all that redirect to the right place on the uh on the actual kat.com site and I think that's probably possible and I'd like to do that there's actually another site that I did I can't show you it's um it's like an internal website and uh my my bosses want to be um they want it to stay private it's basically just an internal bulletin realistically like 90% or more of the content there's no reason why it couldn't be public and it probably is public elsewhere um but I'm not allowed to show it but I will say that uh the person in my department who has to input content for that has requested before that that exact feature be there uh that she can preview what it's going to look like so I'm working on a way to do that I would like it to be able to uh for there to be a feature where she can upload things and be able to preview it and see it on a page on the the the site I didn't actually build it with react I made like a single page app but I did it in like jQuery which uh that that site was kind of small enough that it wasn't too much of a mess but I wouldn't want to do that again uh that was before I was confident enough with react to build it so um i' like to make like a set a p P that only she would be able to see that she would be able to preview uh because right now if she puts something in uh it you know it's live so like it may only be live for a second but she has to make it live to see what it's really going to look like which I mean that's not really a good option so I mean I I definitely should have in hindsight I should have made that so that you there was some type of preview feature built in uh but it generally works there's not really a lot of leeway with how you can enter the content for that site but I'm definitely working on that and uh if I get a solution to it maybe I'll show you like on a demo site since I can't show you the actual site uh because that seems like it would be valuable if you're trying to have a similar setup to this uh all right okay so da derp said that did answer his question so uh that that question was about um I almost called you a he I'm not sure if you're he or she so sorry about that uh so daf uh asked a question about how you set up you know how you render the components and things and react so I'm glad that that did answer your question uh Thor Thor is here he said he nearly missed it again um sorry you're missing it is it I don't I don't know why you're missing it is it a weird like it's it's usually at 2:00 p.m eastern time so uh for some reason it seems like you're coming in an hour late is that like you just can't make it earlier or what um how to make one to many relationship between custom posts so Andrew asks how to make one to many relationship between custom post Andrew I'm not exactly sure what you're asking uh if you're still watching could you explain a little bit more uh because I'd like to answer your question but I don't I don't think I understand it well enough right now to give you a good answer Thor says it's 9:00 P p.m. here so not really a problem all right so since it's 900 p.m there tomorrow watch it start watching at 8:00 pm there and then you will be here on time if you can also for those of you who are watching really late all the time there may be sometimes where I have to do an earlier stream so that might be more convenient for you uh thinking like there are definitely going to be some Mondays where I'll have meetings at 1 that'll probably go really long so I'll probably have to switch it up so far um I've been able to skip some of those meetings because it wasn't really relevant for me but I think I'm going to have to start going to a few of them so just heads up on that uh so there will be a little change in time but that might be good for some people maybe some some people that can't normally watch live may be able to uh Jake says nice job Jesse I think you cleared some Concepts that took me quite some time to figure out on my own uh awesome I'm glad I could uh be of some assistance to you Jake uh Rohan says today is STK contrast to yesterday's it's just 12:35 a.m. we went to 2:10 a.m. yesterday yeah yesterday was super long I was I was actually super exhausted I remember yesterday I said I I had to go to the store and pick up some stuff I was so exhausted after the live stream yesterday that I I didn't I went home and um just relaxed because I I couldn't I couldn't even make it I was super hungry and tired and I thought I'm not going to try to go to the store now I'll probably buy everything and uh because I'm so hungry and tired um let's see Thor ask why are you using Wordpress uh oh okay sorry there's one before that so smilers ask what application is it I don't I'm not sure what you're referring to I think I'm missing something so smile is uh what type of redactors oh okay what type of redactors using for code uh you mean a code editor uh it's if you mean my code editor I'm using adom uh if you mean like the framework I'm using react um on the on the front end side of things um to render everything and then I'm using Wordpress to manage the content but I'm not using the template PL uh system that WordPress has so um hopefully it answers your question let me know if it didn't so Thor says why are you using Wordpress for this purpose is there nothing better for this for example uh a simple Django application or something like this um the the two main reasons why I'm using Wordpress for this is number one uh because a lot of people who have no experience at all with code are going to be editing this and there's going to be a turnover rate uh for people who are editing this so they need to be able to be trained very quickly and use this so WordPress is very user friendly in that way the second reason is because this site was a really tough schedule I didn't really have time to learn anything and I don't know something like d Jango I do I have done this exact thing with WordPress in the past so I knew that I could get it done on time if I did it this way so that's generally not a great idea to use something just because hey I know how to do it I'm just going to keep doing it this way but in this case um it actually did work out well uh for the project so if on future projects if I have more time and it would work out better I'm definitely open to using something other than WordPress for Content management actually let me know in the live chat or in the comments uh what you would recommend using if I if we weren't using Wordpress what should have been used what what do you think and uh maybe if I get some time I'll check out your suggestions and see because I'm I'm certainly open WordPress is a little bit of a resource hog it can be on the server so something more lightweight as long as it's still userfriendly uh for for people who don't know about code uh I would definitely be open to using the other thing is WordPress has a huge user base and there's a lot of great documentation on it so that's really helpful for me at times when I need to do some custom things with it um hooligan soft says hey hey what's up uh thanks for watching um Thor says testing in production is great yeah uh I I don't have a copy of the WordPress uh install either locally or on another server I'm thinking about getting one it's probably a good idea to get one I I probably should do it but I just don't have a set up right now to be honest with you I'm a little bit intimidating with the idea of like how do I sync up the database do I have two separate databases and try to keep them in sync do I pull from the same database but if I do that is that really like a a a decent development environment you know cuz so what I I don't know how to do that uh there is somebody else uh Brian works with me here and uh he has worked more with stuff like this and using Wordpress and databases so I'm going to maybe talk to him a little bit about that and see what he recommends in terms of having like a testing environment or test you know uh testing development server uh and if you all have any uh input on that I I would appreciate it as well because I probably should have it you know in general you should never be editing a site live if if you don't have to if it's not an emergency uh hooligan soft says can you make tutorials for making WordPress theme from scratch um that would be really cool unfortunately I don't think I could make a good tutorial on making a WordPress theme from scratch because to do a theme from scratch you have to have some knowledge of PHP uh at least enough to do the WordPress PHP thing and uh I'm not confident in my skills to do that uh so I do know how to do a lot of customization from scratch I have I have honestly I have built a really basic theme from scratch before but was a long time ago so I don't think I could do it justice I I wouldn't feel comfortable putting out a tutorial like that I mean you all know I mean I I attempt a lot of things where I don't really know what I'm doing so I'm not opposed to doing that but to actually do like a from beginning to end tutorial on something I would want to be more knowledgeable so um but if if anyone else knows of a good tutorial to make a theme from scratch uh please um you know let let us know in the live live chat or in the comments so that uh that can be a nice resource for whoever needs to do that Rohan says I don't know how WP handles content but you can have an internal uh temp entry and use preview to generate page from that okay that's interesting um I will have to keep that in mind and maybe look look up some more on that I'm just thinking about that for a second okay thank you for that uh suggestion Andrew says is front end served by WordPress or some node app uh it's a node it's a node app so Andrew I'm using um on a SE so WordPress lives on one digital ocean droplet and then on another droplet well really two other Dr droplets I have clones of a node app it's react um that actually renders all the data that it's getting from WordPress through the WordPress API uh and there's there's a load balancer that just shift traffic between those two copies of the uh the node app uh another thing that I I didn't mention when I was talking about WordPress that I'll mention briefly I just remembered uh the cool thing about using the WordPress API for this is the same content that you put into WordPress you can use for your website you could potentially add a theme onto this and have a traditional WordPress site if you wanted to there's nothing stopping you from doing that as well you can pull the data into anything that can get um anything that can use an API a rest API and get and can process Json data so an any app uh probably some Internet of Things stuff I've actually had an idea to make an Alexa skill for the Amazon Echo that would pull data from the WordPress API and like read you the blog posts uh so I don't know if somebody's already done that and you know about it let me know and then maybe I won't do it because it's been done already but if it hasn't been done I'd like to do it and uh or if you want to take my idea and do it first just let me know because I think it'd be cool just to use um I won't be mad if you Steal My Idea uh but that's kind of cool that you could use it in a lot of different places so the data all lives in one place and it's all easily editable and um like imagine like if you wanted to keep everything in your organization all sync together in terms of the you know um let's say you had like a a business and you wanted like your times that you're open or uh even like I don't know say your restaurant you change your menu frequently well you change your menu here in one place and it automatically syncs to you know your app let's say you had an app I know this would be weird for a restaurant to have an app to and an Alexa skill and all this and now all of a sudden all the data is updated instantly everywhere there's some definitely some value in that and can save whoever's editing your content it saves them a lot of time all right let me continue on I'm nearly at the end here of the live chat so uh we're the stream is getting longer in spite of my my efforts to make it shorter today it keeps going longer so uh sorry about that um I just you know I I don't want to leave you all hanging if you have questions so uh I definitely let's say this I want to try to cut it off at an hour and a half so that'll be in 10 minutes we'll cut it off even if I haven't gotten through everything and then uh maybe I'll just try to answer your questions like maybe at the beginning of the next stream like tomorrow's stream if I don't get to them all uh let's see Thor ask we'll try it's not a Time problem or something it's just probably remembering it um should probably set up a reminder event or something oh okay all right cool Thor that's uh so Thor is talking that's what we're talking about the the time that he was kind of late getting in here uh to watch it so it's just a a remembering thing so cool if you um if you're not already subscribed to the free code Camp Channel I think they'll if you have your notifications turned on and you subscribe I think they will alert you so you'll get like if you have the YouTube app uh it'll Alert on your phone you'll get a notification or it can do like uh desktop notifications as well so that might be helpful to you I also uh post on Twitter usually like beforehand uh so that could be another reminder Andrew says custom post uh author custom post book add books to author okay so Andrew clarified his earlier question about um how to make relationships between custom posts so yeah this is possible let me think for a second because I'm I have worked with this sort of thing before it's been a long time so let me let me just think for a second to make sure I I remember what's going on um okay so here's what you can do um I do I believe in in WordPress you can make so you would have the two custom posts right author and book books to author how did I do this before you know what I think I didn't solve it in the best way so I wanted to be able to add books to author and Link it but I think what I ended up doing instead was did I make a taxonomy I may have made a taxonomy or something so I don't think I solved it correctly but I think it's possible I just don't I don't know how I can't remember exactly how I did a similar thing so I don't want to give you an answer so um sorry I can't give you a good answer on that but I can tell you that I'm I'm almost positive that it's possible because I did look into it before I just I either couldn't get it working or it didn't seem like uh I needed it that much that it was worth the time uh but I I mean that's that's definitely something that that comes up um so I'm sure the answer is is out there uh Jake says um Luca uh node is pulling data from WordPress API okay awesome so uh Jake could already answered the question so sorry I should have read ahead uh and then I wouldn't have had to answer that um John says I'm late fny face all right so sorry John you can watch the replay the replay will be oh man so we had a couple people who are late so the replay will be available in like a minute after um I end this Stream So I mean if if you want to participate in the questions and stuff just add them in the comments below the video um Andrew says WordPress gives you fast bootstrap for backend and already has Json API enabled with all end points yes excellent that's that's a great Point yeah you you don't have to build any of that it just it comes it's just there and if you're using like uh managed hosting or you know like like GoDaddy or something like that they're like you know regular shared Hosting account there's usually usually a oneclick install for WordPress and it takes 5 minutes so in 5 minutes you have a rest API uh you know that's that's really easy uh so I'm I'm sure there are probably better ways to build an API but if you don't know how to do that or don't have time to mess with that then I mean you can't beat that that's that's just simple really simple um Thor says okay thanks for answer never heard of people using Wordpress for this purpose just wondering yeah it's actually it's kind of newer the WordPress API has been around for a couple of years but it's been in like beta stage for a while it's only within the last year uh I think that it's it's like officially part of Wordpress core it used to be you had to get a separate plugin and enable it and stuff so um for a while there it was recommended not to use it on production sites I did still use it anyway because um in my experience like it worked there were very few breaking changes that ever occurred um and if it did happen it was well documented so um I never had a problem with it but it's it's only recently that it's I I think like at a stable enough point that a lot of people are starting to use it Andrew says yes is a good practice to keep staging and production uh even local in sync yeah that's the that's the goal that's what I should have set up so um I pretty much have that for the node um uh part of this but just not for the WordPress part um Andrew says this is how WordPress WordPress takes templates in theme I'm not sure what that was in response to Andrew so um I don't remember I mean what I was talking about at that point so sorry uh Jordan says what size droplets do you use actually so this is really cool um oh ran says the stream keeps dropping I haven't been watching the uh the stream stats so I didn't see sorry about that actually want to that's weird okay sorry it was dropping right now it seems it's it's holding uh I'm like over 5,000 uh kilobit per second so um it should be good right now so sorry about the drop I mean obviously I don't really have control over that connection but I usually have a really good connection at work uh so Jordan the droplet size I'm using $5 droplets for everything so the two uh clone like node droplets are both $5 droplets and the WordPress is on a $5 droplet usually it's recommended not to go with a $5 for WordPress but because I'm using it in this way uh just the Headless part of Wordpress and it's not having to do any like rendering of templates at all uh I've found that I can get away with putting WordPress on a $5 droplet and it's still really fast and it holds holds up uh there'll definitely be a point where if I get too much traffic I would have to upgrade it but uh that's actually been really nice that I'm able to uh to run it on a $5 droplet I'm also going to take advantage of uh once once all the post types and everything really get built out I'm going to turn on caching for the API and that's going to decrease the load on WordPress even further and then I do have caching set um within node at the server level and then there's also caching going on on the client side uh with the service worker so there are three levels of caching if I have time I may even uh route this through Cloud flare and so there will essentially be four levels of caching going on so once if a request even got all the way back to Wordpress uh it would be somewhat rare so it'll allow me it will allow me to uh run these on very cheap droplets uh because I'm I'm kind of protecting them from the brunt of all the traffic that you would normally have on a WordPress site so so for right now that works I think it's pretty cool that I can run it on Lower droplets I mean not that I need to I'm sure you know for this project there was there was a budget that was large enough that I could have done a larger droplet but there's really no reason to this site is running very quickly um at least for me from from my testing it's been running very quickly and uh the API calls are coming back you know very very fast you know within milliseconds um let's see Jonathan says there's a PHP my admin on your host server where WordPress is hosted this gives you full capabilities to run SQL off the database on the backend as well uh yeah actually I don't have um PHP my admin installed when I on WordPress on digital ocean so I'm not sure I actually had uh my colleague Brian set up the WordPress instance so he may have installed PHP my admin or something like that I'll have to ask him about it but um when I've done installs of Wordpress on digital ocean uh I haven't installed anything and if I do need to mess with SQL I've just done it from the command line um and that's worked for me uh if you use a host like uh uh for some sites I do have on GoDaddy and I use site ground for some sites too uh those usually come with like C panel and pH PHP my admin so that makes it a lot easier if you have access to PHP my admin and and can use it uh use that it's way easier than the command line uh for that normally I do like the command line but for for doing database stuff I don't like it as much all right last Andrew says last question for me do you sync your containers databases when using load balancing thanks so uh so no actually so the uh containers so the node apps have no databases uh and those two containers are where the load gets balance between the API calls all go to just one instance of Wordpress so uh there doesn't need to be any load balancing to there because you know obviously there's just one and that's where the database sits so um so no I I don't have to deal with sinking that um to any of the you know for the load balancing purposes okay uh someone asks and I I can't pronounce this because it's in Russian says who is from Russia or who is speaking on Russian uh let's study together uh so I don't speak Russian if anybody else speaks Russian um then you know get together maybe you guys can can study together Andrew says better use uh MySQL workbench app to connect to database instead of PHP my admin was Adge load on your server all right good to know I'll have to check that out uh Andrew knows Russian awesome okay and that's the end of the live chat did I make it I'm two minutes over what I wanted to be so uh almost made it lost track of time there at the end um so still have we have have 32 viewers still even after all that time so a little bit lower than normal but um it's been a long stream we have somebody joining us just now uh hey how's it going thanks for watching uh so I'll uh I'll see you tomorrow uh I should be I don't think I have any meetings or anything so it should be same time 2 pm. eastern time uh thanks for watching uh and uh feel free to ask me any questions and I appreciate all the uh the great uh interaction we've had in the live chat today and um anyway for the uh for all the people that thumbs down this I had one earlier please let me know why you thumbs down it I won't be upset with you I just want to make it better so uh thanks for watching uh have a great day and I will see you tomorrow

Original Description

I need to make some more custom post types in WordPress to pull in with the API into my React site. This will be the first time I use PHP in a live stream! See a professional front-end developer at work. Unscripted. Mistakes included. Live Site: https://catechetics.com Repo: https://github.com/fus-marcom/ci-react Trello Board for this Project: https://trello.com/b/oD4BYdZk React: https://facebook.github.io/react/ Next.js: https://github.com/zeit/next.js/ Materialize: http://materializecss.com/ Twitter: https://twitter.com/JesseRWeigel Youtube: https://www.youtube.com/c/JesseWeigel29 Code Editor: https://atom.io/ Terminal: https://www.iterm2.com/ Project Management: https://trello.com - Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 19 of 60

1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

Learn how to create custom post types in WordPress using PHP and integrate them with a React site through live coding. This lesson covers the basics of WordPress development and front-end engineering.

Key Takeaways
  1. Set up a WordPress environment
  2. Create a custom post type using PHP
  3. Register the custom post type with WordPress
  4. Use the WordPress API to fetch custom post type data
  5. Integrate the custom post type data with a React component
  6. Test and debug the integration
💡 Custom post types in WordPress can be used to create custom content types that can be integrated with front-end frameworks like React.

Related Reads

Up next
The Best AI Workspace | Why monday.com Stands Out
Consumer Research Studios
Watch →