 Welcome back to the channel. In today's video, I'm going to answer a question that has kept on coming over and over again. Now that is related to a video that I made whereby I was getting data from an external API and I was using a plugin that I have here locally on my server. What this code does is that it creates a custom post type which is called API data and then it also creates an endpoint on the rest API where we can post data and it has this callback that waits to receive a name, a password which I used to find out if that person is actually a user of that particular site, then they pass in the title and the body from that data. So we'll need a name, password, title and body whenever we're posting to this rest API. So let's try to see how that actually works. So I'm going to use postman here and I am going to use this callback URL which is for my API and I am going to send in raw data which is in JSON format. So let me begin of my JSON. So we are going to go into our browser here. I'll check my postman. This is the right username. This is the password and this is the demo content. So I will click send here and you will see that it tells us that the message was successful and it returns everything that we needed. So when I come here and reload, you will see that we have our demo page here. I'll edit this and inside here you're going to see that we have this demo content right here. So this works very well if you want to be able to post data from somewhere or you're picking it from a different API and you just want to have it in and then choose to view this. Go on the front end it will say not found and that is because I need to go into my pama links and just straighten out whatever it is. So I'm going to save postname and then that will work. So when I reload this here, you will see that we have the demo and then we have this content body showing up right here. But if we were to go to our main page, you will see that we don't have any content demo showing up here because it's a custom post type. It's not just any ordinary post. Now if we want to show this on the front end. So what I'm going to do is use the wp query function in what press to do this. So I'm going to come back here. I'll close this and then I'm going to go inside my theme folder right here and I'm using the 2020 theme right now. So I'll drag and drop it here. I'm going to create a new page from this singular PHP so that it is similar in nature. I'll just save as. So I'm going to call this page dash API data. So I'll add here an h1 tag just to let us know that we're working with the static title for the API data. So I'll save this and what we'll do now is we're going to add a page template to this. So I'm going to say template name is equal to API data and that's what we want to do. I'm going to remove all this PHP for now. So I'll comment it out and then we're going to save this. Go back to our back end. We'll choose a page, add a new page to call this our page API data. For now and then I'm going to the template and I will choose the API data template. I'll save this here and then we'll choose to view this. So I'll click view page here and you will see that we have a static title for API data here. And so we're going to throw all our data here. Now the technique I'm going to show you can be used for any kind of custom post type querying it and putting it on the front end wherever you want to have it. So let's jump back into our code and see what we're going to do. Now this is a default method of wordpress and it has been optimized so that you can quickly have good querying of that data from the database and then shown on the front end. So you shouldn't be worried about lags or optimizing it a little bit more because this is a default method that comes with wordpress. So what I'm going to do is say our post data is going to equal to a new and we're going to instantiate this class of wp underscore query and it will require some arguments on it. For these arguments we're going to add in what we are looking for. So number one this will be an array of data. So we need to add a semicolon there and the first thing that we'll do is we're going to look for the post type and the post type we are looking for after adding our arrow is going to be api data. Now the next thing that we shall do here is we are going to look for the posts per page. So we can decide to say we want to have posts per page. This should be plural posts per page. If we want to get all of them we shall just press minus one to show that we want to get everything or we can decide to say we want to just get maybe 12 or 3 depending because wordpress by default gives you 10 posts per page. So I'm going to go for minus one so that I get everything and then after doing that let me just dump what we get here. So I'll use this overdump inside our pre tags. I'll copy this post data and going to paste it here. So let's save this come back to our front end here and then you're going to see that we get this dump of data right here and we have the different articles showing up here. So we only have one item inside this loop and it's showing us the demo title and we have the post content here. So the next thing that I will do is just comment this out for now and I'm going to say if so we need to make sure that we're getting data I'm going to say if post data here actually has so I'll say have posts if we have posts if post data has posts that means it is true then we are going to do this. So we're going to say while we're going to just look through each individual item or each individual post that we get back. So while I'll just copy this same condition while we have those posts what we're going to do is look through. So we'll say post data is actually going to be our the post. So we've set our post data to be the post and from this point on we're going to say and we just want to get the title for all those posts that look like what we have here. So I'll come back here reload and you're going to see that we get only the title of demo showing up here. So let me go back to what we have here and I'm going to add demo 2. So demo 2 second demo. This will be the second posts of blah blah blah. So I'll just say that's our body. I'll hit send. Our post is successfully added. When I reload here you're going to see we have another demo 2 showing up here. Now of course I can either choose to add these inside divs or different things altogether. So what I can do here is I can escape the PHP and then open it up again to have this running and then what I'm going to do is just cut this out and then wrap it inside some div tags. So I'll say this is going to be inside our div tags and of course you can add a class to your div if you want and you can say my class will be halves and inside halves we're going to have two different divs. So we'll have a div there. I'll duplicate this and then inside each div we're going to add our PHP comments. So we'll have PHP in here of course opening with the proper tag and then we're going to echo the title and then after getting the title inside here we're also going to echo our content here. We're going to just say the content in the second part. Let's come back after saving this come back here reload and you'll see that we have demo one and demo two and we can choose to actually add style to these. So what I'm going to do for now is just use my browser to add that style but if you want to see more of how to do that I have a number of videos that show you how to enqueue particular styles or add styles inside your WordPress and those links are down in the description of this video and so for the halves we're going to say let us display grid so I'm going to use grid so I just need to check my particular HTML and see what I'm doing wrong. So I'm going to cut this div and then just add it in here. So I'm checking my HTML to make sure it's correct. So I'll have an h2 here and then close this off with an h2 and then I'll put inside this div that's showing the content. So when I look at my HTML here I see that this is going to give me some trouble. So I'm going to move this div halves just before we get the loop so I'll cut this other div and then I'm going to put it after the loop. So I'll save this come back to my front end reload this. I'll right click to inspect and then we'll have divs here and you will see that we have two other divs inside here so for my halves I'll add CSS here and I'm just going to do this on the front end browser but you can be able to enqueue your stylesheets inside your plugin or inside your theme. There are very many videos that I've done in that context so I'll share one in the video description below so that you can be able to add this particular CSS. So I'll just go for display grid and then I'll use grid dash template columns and I'm going to use one fr one fr that's going to distribute our halves into two sections in here. Now of course you can go a level deeper and add different stylings for example if you want to include a featured image you can be able to do that but this is how we essentially pick our data from our custom post types and then we add it directly into our front end so if I click on this button you will see that in our API data we have our two custom posts and we are showing them on our front end like this so if you like the content that I'm doing on this channel you can consider supporting by checking inside the description below how to or you can give this video a thumbs up or you can consider subscribing to the channel if you haven't thought about it otherwise enjoy your day.